目录

1.XMLHttpRequest的基本使用

2.数据交换格式

3.封装自己的Ajax函数

4.XMLHttpRequest Level2的新特性

5.jQuery高级用法

6.axios

 

一、XMLHttpRequest的基本使用

1.1什么是XMLHttpRequest

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

Ajax加强_xml

 

 

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。

Ajax加强_xml_02

 

 

 

2.2XML

1.什么是XML

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

HTML：

Ajax加强_html_03

 

 

 

XML：

Ajax加强_html_04

 

 

 

2.XML和HTML的区别

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

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

Ajax加强_html_05

 

 

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

Ajax加强_json_06

 

 

 

3.XML的缺点

Ajax加强_json_07

 

 

 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种类型。

Ajax加强_xml_08

 

 

 

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

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

Ajax加强_json_09

 

 

 

3.JSON语法注意事项

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

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

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

4.JSON中不能写注释

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

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

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

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

 

4.JSON和JS对象的关系

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

Ajax加强_xml_10

 

 

 

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要实现的效果

Ajax加强_html_11

 

 

 3.2定义options参数选项

itheima（）函数是我们自定义的Ajax函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：

method 请求的类型

url　　  请求的URL地址

data　   请求携带的数据

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

3.3处理data参数

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

Ajax加强_html_12

 

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事件：

Ajax加强_html_13

 

 

 

3.5判断请求类型

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

Ajax加强_html_14

 

 

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请求的时限：

Ajax加强_json_15

 

 

 

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

Ajax加强_xml_16

 

 

 

<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对象，可以模拟表单操作：

Ajax加强_xml_17

 

  

<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对象也可以用来获取网页表单的值，实例代码如下：

Ajax加强_json_18

 

 

<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>

Ajax加强_xml_19

 

 

 4.4上传文件

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

实现步骤：

1.定义UL结构

2.验证是否选择了文件

3.向FormData中追加文件

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

5.监听onreadystatechange事件

1.定义UI结构

Ajax加强_json_20

 

 

<!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.验证是否选择了文件

Ajax加强_html_21

 

 

<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中追加文件

Ajax加强_json_22

 

<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发起上传文件的请求

Ajax加强_html_23

 

5.监听onreadystatechange事件

Ajax加强_html_24

 

 

<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事件来获取文件的上传进度

Ajax加强_xml_25

 

 

基于上面代码添加

// 监听文件上传的进度
      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.监听上传进度的事件 |  动态进度条

Ajax加强_json_26

 

 

// 监听文件上传的进度
      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.监听上传完成的事件

Ajax加强_json_27

 

 

5.1jQuery实现文件上传

引入jQuery.js

 

1.定义UI结构

Ajax加强_xml_28

 

 

2.验证是否选择了文件

Ajax加强_xml_29

 

 

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

 

3.向FormData中追加文件

Ajax加强_html_30

 

 

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

Ajax加强_xml_31

 

 

<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>