Ajax加强

目录

1.XMLHttpRequest的基本使用

2.数据交换格式

3.封装自己的Ajax函数

4.XMLHttpRequest Level2的新特性

5.jQuery高级用法

6.axios

 

一、XMLHttpRequest的基本使用

1.1什么是XMLHttpRequest

XMLHttpReques(简称xhr) 是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数,就是基于xhr对象封装起来。

 

 

1.2使用xhr发起GET请求

步骤:

  1.创建xhr对象

  2.调用xhr.open()函数

  3.调用xhr.send()函数

  4.监听xhr.onreadystatechange事件

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 1.创建 XHR 对象
    var xhr = new XMLHttpRequest();
    // 2.调用 open 函数
    xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
    // 3.调用send函数
    xhr.send();
    // 4.监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取服务器响应的数据
        console.log(xhr.responseText);
      }
    };
  </script>
</html>
复制代码

 

1.3使用xhr发起带参数的GET请求

  xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");

 

 

1.4了解xhr对象的readyState属性

XMLHttpRequest对象readyState属性,用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于下状态的一个:

状态 描述
0 UNSENT XMLHttpRequest对象已被创建,但尚未调用open方法
1 OPENED open()方法已经被调用
2 HEADERS_RECEIVED send()方法已经被调用,响应头也已经被接收
3 LOADING 数据接收中,此时response属性中已经包含部分数据
4 DONE Ajax请求完成,这意味着数据传输已经彻底完成或失败

 

1.5查询字符串

1.

定义:查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)

格式:讲英文的 ? 放在URL的末尾,然后再加上参数=值,想加上多个参数的话,使用&符号进行分隔。以这个形式,可以将想要发给服务器的数据添加到URL中。

    // 不带参数的URL地址
    xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?");
    // 带一个参数的URL地址
    xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
    // 带两个参数的URL地址
    xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记");
 

 

2.GET请求携带参数的本质

无论使用$ajax(),还是使用$.get(),又或者直接使用xhr对象发起GET请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器的。

 

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="/lib/jquery.min.js"></script>
  <script>
    $.get(
      "http://www.liulongbin.top:3006/api/getbooks",
      { id: 1, bookname: "西游记" },
      function (res) {
        console.log(res);
      }
    );

    $.ajax({
      method: "GET",
      url: "http://www.liulongbin.top:3006/api/getbooks",
      data: {
        id: 1,
        bookname: "西游记",
      },
    });
  </script>
</html>
复制代码

 

 1.6 URL编码与解码

1.什么是编码

URL地址,只允许出现在相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。

如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)

URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。

URL编码原则的通俗理解:使用英文字符去表示非英文字符。

http://www.liulongbin.top:3006/api/getbooks?id:1&bookname:西游记
//经过URL编码之后,URL地址编程如下格式:
http://www.liulongbin.top:3006/api/getbooks?id:1&bookname=
%E8%A5BF %E6%B8%B8 %E8%AE%B0

 

 2.如何对URL进行编码与解码

 浏览器提供了URL编码与解码的API,分别是:

encodeURL()编码的函数

decodeURL()解码的函数

 

  <script>
    var str = "秦浩洋";
    var str2 = encodeURI(str);
    console.log(str2);
    var str3 = decodeURI("%E6%B5%A9%E6%B4%8B");
    console.log(str3);
  </script>

 

3.URL编码的注意事项

由于浏览器会自动对URL地址进行编码操作,因此,大多数情况下,程序员不关心URL地址的编码与解码操作.

 

1.7使用xhr发起POST请求

步骤:

1.创建xhr对象

2.调用xhr.open()函数

3.设置Content-Type属性(固定写法)

4.调用xhr.send()函数,同时指定要发送的数据

5.监听xhr.send()函数,同时指定发送的数据

 

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 1.创建xhr对象
    var xhr = new XMLHttpRequest();
    // 2.调用open函数
    xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
    // 3.设置Contene-Type属性
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // 4.调用send函数
    xhr.send("bookname=水浒传&author=施耐庵&publisher=上海图书出版社");
    // 5.监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };
  </script>
</html>
复制代码

 

 

2.数据交换格式

2.1什么是数据交换格式

数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式。

前端领域,经常提及的两种数据交换分别是XML和JSON。其中XML用的非常少,所以我们重点要学习的数据交换格式就是JSON。

 

 

 

2.2XML

1.什么是XML

XML的英文全称是EXtensible Markup Language,即可扩展标记语言。因此,XML和HTML类似,也是一种标记语言。

HTML:

 

 

 

XML:

 

 

 

2.XML和HTML的区别

XML和HTML虽然都是标记语言,但是,它们两者之间没有任何的关系

HTML被设计用来描述网页上的内容的载体

 

 

 XML被设计用来传输和存储数据,是数据的载体

 

 

 

3.XML的缺点

 

 

 1.XML格式臃肿,和数据无关的代码太多,体积大,传输效率低

2.在JavaScript中解析比较麻烦

 

 2.3JSON

1.什么是JSON

概念:JSON的英文全称是JavaScriptObjectNotation,即“JavaScript 对象表示法”。简单来讲,

JSON就是JavaScript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,

JSON的本质是字符串。

作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XMl,专门用于存储和传输数据,但是

JSON比XML更小、更快、更易解析。

现状:JSON是在2001年开始被推广和使用的数据格式,到现在位置JSON已经成为了主流的数据交换格式。

 

2.JSON的两种结构

JSON就是用字符串来表示JavaScript的对象和数组。所以,JSON中包含对象和数组两种结构,通过这两种结构的相互嵌套,可以表示各种的数据结构。

 对象结构:对象结构在JSON中表示为{}括起来的内容。数据结构为{key: value, key: value, ...}]的键值对结构。其中,key必须是使用英文的双引保包裹的字符串,value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

 

 

 

数组结构:数组结构在JSON中表示为[ ]括起来的内容。数据结构为["java","JavaScript",30,true...]。

数组中数据的类型可以是数字字符串、布尔值、null、数组、对象6种类型

 

 

 

3.JSON语法注意事项

1.属性名必须使用双引号包裹

2.字符串类型的值必须使用双引号包裹

3.JSON中不允许使用单引号表示字符串

4.JSON中不能写注释

5.JSON的最外层必须是对象或数组格式

6.不能使用undefined或函数作为JSON的值

JSON的作用:在计算机与网络之间存储和传输数据。

JSON的本质:用字符串来表示JavaScript的对象数据或数组数据

 

4.JSON和JS对象的关系

JSON是JS对象的字符串表示一个JS对象的信息,本质是一个字符串。例如:

 

 

 

5.JSON和JS对象的互转

要实现从JSON字符串转换为JS对象,使用JSON.parse()方法:

 

 <script>
    var jsonSTR = '{"a":"hello","b":"world"}';
    var obj = JSON.parse(jsonSTR);
    console.log(obj);
  </script>

 

要实现从JS对象转换为JSON字符串,使用JSON.stringify()方法:

复制代码
  <script>
    var xhr = new XMLHttpRequest();
    xhr, open("GET", "http://www.liulongbin.top:3006/api/getbooks");
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.dtstus === 200) {
        console.log(xhr.responseText);
        var result = JSON.parse(xhr.responseText);
        console.log(result);
      }
    };
  </script>
复制代码

 

6.序列化和反序列化

把数据对象转换为字符串的过程,叫做序列化,例如:调用JSON.strgify()函数操作,叫做JSON序列化。

把字符串转换为数据对象的过程,叫做反序列化,例如:调用JSON.parse()函数的操作,叫做JSON反序列化

 

3.封装自己的Ajax函数

3.1要实现的效果

 

 

 3.2定义options参数选项

itheima()函数是我们自定义的Ajax函数,它接收一个配置对象作为参数,配置对象中可以配置如下属性:

method 请求的类型

url    请求的URL地址

data    请求携带的数据

success请求成功之后的回调函数

3.3处理data参数

需要把data对象,转化成查询字符串的格式,从而提交给服务器,因此提前定义resolveData函数如下:

 

 

 

复制代码
ITheima.js:

function resolveData(data) {
  var arr = [];
  for (var k in data) {
    var str = k + "=" + data[k];
    arr.push(str);
  }
  return arr.join("&");
}
var res = resolveData({ name: "zs", age: 20 });
console.log(res);


测试页面.html
  <script src="js/ITheima.js"></script>
复制代码

 

3.4ITheima函数

在ITheima()函数中,需要创建xhr对象,并监听onreadystatechange事件:

 

 

 

3.5判断请求类型

不同的请求类型,对应xhr对象的不同操作,因此需要对请求类型进行if...else...的判断

 

 

3.6测试ITheima的可用性

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="js/ITheima.js"></script>
  <script>
    // ITheima({
    //   method: "GET",
    //   url: "http://www.liulongbin.top:3006/api/getbooks",
    //   data: {
    //     di: 1,
    //   },
    //   success: function (res) {
    //     console.log(res);
    //   },
    // });

    ITheima({
      method: "post",
      url: "http://www.liulongbin.top:3006/api/addbook",
      data: {
        bookname: "水浒传",
        author: "施耐庵",
        publisher: "背景图书出版社",
      },
      success: function (res) {
        console.log(res);
      },
    });
  </script>
</html>
复制代码

 

4.XMLHttpRequest Level2的新特性

1.旧版XMLHttpRequest的缺点

1.只支持文本数据的传输,无法用来读取和上传文件

2.传送和接收数据时,没有进度信息,只能提示有没有完成

2.XMLHttpRequest Level2的新功能

1.可以设置HTTP请求的时限

2.可以使用FormData对象管理表单数据

3.可以上传文件

4.可以获得数据传输的进度信息

4.2设置HTTP请求时限

有时,Ajax操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。新版本XMLHttpRequest对象,增加了timeout属性,可以设置HTTP请求的时限:

 

 

 

上面的语句,将最长等待时间设为3000毫秒。过来这个时限,就自动停止HTTP请求。与之配套的还有一个timeout事件,用来指定回调函数:

 

 

 

复制代码
  <script>
    var xhr = new XMLHttpRequest();

    // 设置超时时间
    xhr.timeout = 30;
    // 设置超时以后的处理函数
    xhr.ontimeout = function () {
      console.log("请求超时了");
    };

    xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
    xhr.send();

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };
  </script>
复制代码

 

4.3FormData对象管理表单数据

Ajax操作往往用来提交数据。为了方便表单处理,HTML5新增了一个formData对象,可以模拟表单操作:

 

  

复制代码
  <script>
    // 1.创建FormData实例
    var fd = new FormData();
    // 2.调用append函数,向fd中追加数据
    fd.append("uname", "秦浩洋");
    fd.append("upwd", "666666");

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://www.liulongbin.top:3006/api/formdata");
    xhr.send(fd);

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
      }
    };
  </script>
复制代码

 

FormData对象也可以用来获取网页表单的值,实例代码如下:

 

 

复制代码
  <body>
    <form id="form1">
      <input type="text" name="uname" autocomplete="off" />
      <input type="password" name="upwd" />
      <button type="submit">提交</button>
    </form>
  </body>
  <script>
    // 1.通过DOM操作,获取到form表单元素
    var form = document.querySelector("#form1");

    form.addEventListener("submit", function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault();

      // 创建FormData,快速获取到form表单中的数据
      var fd = new FormData(form);

      var xhr = new XMLHttpRequest();
      xhr.open("POST", "http://www.liulongbin.top:3006/api/formdata");
      xhr.send(fd);

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText));
        }
      };
    });
  </script>
复制代码

 

 

 4.4上传文件

新版XMLHttpRequest对象,不仅可以发送文本信息,还可以上传文件

实现步骤:

1.定义UL结构

2.验证是否选择了文件

3.向FormData中追加文件

4.使用xhr发起上传文件的请求

5.监听onreadystatechange事件

1.定义UI结构

 

 

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签,来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />
  </body>
  <script></script>
</html>
复制代码

 

2.验证是否选择了文件

 

 

复制代码
<script>
    // 1.获取到文件上传按钮
    var btnUpload = document.querySelector("#btnUpload");
    // 2.为按钮绑定单击事件处理函数
    btnUpload.addEventListener("click", function () {
      //3.获取用户选择的文件列表
      var files = document.querySelector("#file1").files;
      if (files.length <= 0) {
        return alert("请选择要上传的文件!");
      }
      console.log("用户选择了待上传的文件");
    });
  </script>
复制代码

 

3.向FormData中追加文件

 

复制代码
<script>
    // 1.获取到文件上传按钮
    var btnUpload = document.querySelector("#btnUpload");
    // 2.为按钮绑定单击事件处理函数
    btnUpload.addEventListener("click", function () {
      //3.获取用户选择的文件列表
      var files = document.querySelector("#file1").files;
      if (files.length <= 0) {
        return alert("请选择要上传的文件!");
      }
      var fd = new FormData();
      // 将用户选择的文件,添加到FormData中
      fd.append("avatar", files[0]);
    });
  </script>
复制代码

 

 4.使用xhr发起上传文件的请求

 

5.监听onreadystatechange事件

 

 

复制代码
  <script>
    // 1.获取到文件上传按钮
    var btnUpload = document.querySelector("#btnUpload");
    // 2.为按钮绑定单击事件处理函数
    btnUpload.addEventListener("click", function () {
      //3.获取用户选择的文件列表
      var files = document.querySelector("#file1").files;
      if (files.length <= 0) {
        return alert("请选择要上传的文件!");
      }
      var fd = new FormData();
      // 将用户选择的文件,添加到FormData中
      fd.append("avatar", files[0]);
      //创建xhr对象
      var xhr = new XMLHttpRequest();
      // 调用open函数,指定请求类型与URL地址。其中,请求类型必须为POST
      xhr.open("POST", "http://www.liulongbin.top:3006/api/upload/avatar");
      // 发起POST请求
      xhr.send(fd);

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText);
          if (data.status === 200) {
            // 上传成功
            document.querySelector("#img").src =
              "http://www.liulongbin.top:3006" + data.url;
          } else {
            // 上传失败
            console.log("图片上传失败!" + data.message);
          }
        }
      };
    });
  </script>
复制代码

 

4.5显示文件上传的进度

需要引入boostrap.css

需要引入jQuery.js

1.

新版本的XMLHttpRequest对象中,可以通过监听xhr.upload.ogress事件来获取文件的上传进度

 

 

基于上面代码添加

      // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100);
          console.log(procentComplete);
        }
      };

 

2.

复制代码
    <!-- bootstrap 中的进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px">
      <div
        class="progress-bar progress-bar-striped active"
        role="progressbar"
        aria-valuenow="45"
        aria-valuemin="0"
        aria-valuemax="100"
        style="width: 80%"
        id="percent"
      >
        80%
      </div>
    </div>
复制代码

 

3.监听上传进度的事件 |  动态进度条

 

 

复制代码
  // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100);
          console.log(procentComplete);
          // 动态设置进度条
          $("#percent")
            .attr("style", "width:" + procentComplete + "%")
            .html(procentComplete + "%")
            .html(procentComplete + "%");
        }
      };
复制代码

 

4.监听上传完成的事件

 

 

5.1jQuery实现文件上传

引入jQuery.js

 

1.定义UI结构

 

 

2.验证是否选择了文件

 

 

复制代码
  <script>
    $(function () {
      $("#btnUpload").on("click", function () {
        var files = $("#file1")[0].files;
        if (files.length <= 0) {
          return alert("请选择文件后再上传");
        }
        console.log("ok");
      });
    });
  </script>
复制代码

 

3.向FormData中追加文件

 

 

4.使用jQuery发起上传文件的请求

 

 

复制代码
  <script>
    $(function () {
      $("#btnUpload").on("click", function () {
        var files = $("#file1")[0].files;
        if (files.length <= 0) {
          return alert("请选择文件后再上传");
        }

        var fd = new FormData();
        fd.append("avatar", files[0]);

        // 发起 jQuery的Ajax请求,上传文件
        $.ajax({
          method: "POST",
          url: "http://www.liulongbin.top:3006/api/upload/avatar",
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res);
          },
        });
      });
    });
  </script>
复制代码

 

posted @   罗砂  阅读(32)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示