Ajax基础学习

AJAX

1. 浏览器本身就具备网络通信的能力，但在早期浏览器并没有把这个能力开放给 JS
2. 最早是微软在IE浏览器中把这一能力向JS开放，让JS可以在代码中实现发送请求，这项技术在2005年被正式命名为AJAX（Asynchronous Javascript And XML）
3. 这套API主要依靠一个构造函数完成；该构造函数的名称为XMLHttpRequest，简称为XHR
4. 由于XHR API有着诸多缺陷，在HTML5和ES6发布之后，产生了一套更完善的API来发送请求；这套API主要使用的是一个叫做fetch的函数，因此这套 API 又称之为Fetch API
5. 无论是XHR还是Fetch，它们都是实现ajax的技术手段，只是API不同

XHR API

XMLHttpRequest对象

1. XMLHttpRequest对象的属性

   1. onreadystatechange事件：onreadystatechange属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对onreadystatechange属性进行设置

      let xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          ..      
        }
      }
      

   2. readyState属性：存有服务器响应的状态信息。每当readyState改变时，onreadystatechange函数就会被执行

      • readyState属性可能的值

        状态	描述
        0	请求未初始化（在调用open()之前）
        1	请求已提出（调用send()之前）
        2	请求已发送（这里通常可以从响应的到内容头部）
        3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
        4	请求已完成（可以访问服务器响应并使用它）

      • 测试响应是否完成

        xhr.onreadystatechange = function () {
          if(xhr.readyState == 4) {
            // 从服务器的response获得数据
            // xhr.responseText： 获取服务器响应的消息体文本
          }
        }
        

   3. responseText属性：通过responseText属性来取回由服务器返回的数据

   4. status属性：响应状态码

      • 200: “OK”
      • 404: 未找到页面

请求服务器

1. 要想把请求发送到服务器，我们就需要使用**open()方法和send()方法**

2. open()方法定义请求，需要三个参数

   1. 第一个参数定义发送请求所使用的方法（GET / POST）

   2. 第二个参数规定服务器端脚本的URL

   3. 第三个参数规定是否使用异步，默认使用异步（true)，使用同步（false)

      xhr.open('get', 'url?name=jack&skill=swim');
      xhr.send(null);
      

3. send()方法可将请求送往服务器；构建请求体，发送到服务器，如果没有请求体，传递null

   1. post方式发送请求，数据写在send()函数中，书写方式：key=value&key2=value2，为字符串

   2. send(null);

      xhr.open('post', 'url');
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.send('name=rose&skill=painting');
      

总结

var xhr = new XMLHttpRequest(); //创建发送请求的对象
xhr.onreadystatechange = function () {
  // 当请求状态发生改变时运行的函数
  
  // xhr.readyState： 一个数字，用于判断请求到了哪个阶段
    // 0: 刚刚创建好了请求对象，但还未配置请求（未调用open方法）
    // 1: open方法已被调用
    // 2: send方法已被调用
    // 3: 正在接收服务器的响应消息体
    // 4: 服务器响应的所有内容均已接收完毕
  
  // xhr.responseText： 获取服务器响应的消息体文本
  // xhr.getResponseHeader("Content-Type") 获取响应头Content-Type
};
// 配置请求，如：xhr.open('POST', 'https://xxx/xxx/getDict')
xhr.open('请求方法', 'url地址'); 
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 构建请求体，发送到服务器，如果没有请求体，传递null
xhr.send('请求体内容');

Fetch API

// fetch会返回一个Promise，该Promise会在接收完响应头后变为fulfilled
const resp = await fetch('url地址', {
  // 请求配置对象，可省略，省略则所有配置为默认值
  method: '请求方法', // 默认为GET
  headers: {
    Content-Type: 'application/json', // 请求头配置
    a: 'abc',
  },
  body: '请求体内容', // 请求体
});

// 获取响应头对象
resp.headers;
// 获取响应状态码，例如：200
resp.status;
// 获取响应状态码文本，例如：OK
resp.statusText;
// 用json的格式解析即将到来的响应体，返回Promise，解析完成后得到一个对象
resp.json();
// 用纯文本的格式解析即将到来的响应体，返回Promise，解析完成后得到一个字符串
resp.text();