AJAX

Posted 2020-11-26 把番茄沉入海底

Ajax简介

Ajax 的全称是 Asynchronous javascript and XML（异步的 JavaScript 和 XML），是一种用于创建动态网页的技术。

Ajax 是一种使用现有标准的新方法，通过与服务器进行少量的数据交换，Ajax 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax的优缺点

Ajax 的优点：

• 最大的优点是页面无刷新更新，用户的体验非常好
• 使用异步方式与服务器通信，具有更迅速的响应能力
• 可以将一些服务器工作转移到客户端，利用客户端资源来处理，减轻服务器和带宽的压力，节约空间和带宽租用成本
• 技术标准化，并被浏览器广泛支持，不需要下载插件或者小程序

Ajax 的缺点：

• Ajax 不支持浏览器 back 返回按钮
• 有安全问题，Ajax 暴露了与服务器交互的细节
• 对搜索引擎不友好
• 破坏了程序的异常机制
• 不容易调试

Ajax工作原理

在客户端（如浏览器）和服务器之间加了一个中间层：Ajax 引擎。由 Ajax 引擎独立向服务器请求数据，前端获取到 Ajax 返回的数据后，可以使用新数据来更新页面、或进行其它操作，使用户请求和服务器响应异步化，从而保证了在不刷新页面的前提下可以局部更新网页内容。

使用new XMLHttpRequest()命令来创建一个Ajax实例对象。

XMLHttpRequest类

Ajax 技术的核心是XMLHttpRequest类，简称 XHR，它允许脚本异步调用 HTTP API。

XMLHttpRequest 的兼容

在 IE7 之前的版本（IE5、IE6）并不支持XMLHttpRequest()构造函数，它们需要使用ActiveX对象进行模拟：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

XMLHttpRequest的兼容写法可以是这样的：

// 三元表达式,其中问号前面的是条件,当条件是正确的就执行冒号前面的语句,否则执行冒号后面的语句
var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

Ajax请求进程

创建 XMLHttpRequest 对象之后，发起 HTTP 请求的下一步是调用 XMLHttpRequest 对象的open方法，指定 HTTP 请求的两个必需部分：请求方法 和 URL

var xhr = new XMLHttpRequest();
// 其中请求方法为大写
xhr.open("GET", "/statics/demosource/demo_get_json.php");
//第一个参数用于指定 HTTP 请求的方法，不区分大小写；
//该参数可取的值包括："GET"、"POST"、"HEAD"、"PUT"、"OPTIONS"、"DELETE"，其中，"GET" 和 "POST" 是得到广泛支持的请求方法；
//第二个参数用于指定 HTTP 请求的 URL 地址，可以是 绝对URL 或 相对URL；
//第三个参数是可选的，可用布尔值指定脚本是否以异步的方式调用此次 Ajax 请求；默认为true。

setRequestHeader 设置请求头

如果 HTTP 请求需要设置请求头，那么调用 open 方法之后的下个步骤就是设置它，使用的方法是：setRequestHeader

var xhr = new XMLHttpRequest();
xhr.open("POST", "/statics/demosource/demo_post_json.php");

// 在 open 方法之后设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//xhr.setRequestHeader(name, value)
//name：请求头名称。
//value：请求头的值。

send 发送请求主体

使用 XMLHttpRequest 发起 HTTP 请求的最后一步是指定可选的请求主体、并向服务器发送它，使用的方法是：send

• 示例1：GET 请求

var xhr = new XMLHttpRequest();
xhr.open("GET", "/statics/demosource/demo_get_json.php");

// 无请求主体
xhr.send(null);
//由于 GET 请求 绝对 没有请求主体，所以在调用 send 方法时可以传递 null 或 省略这个参数；

• 示例2：POST 请求

var xhr = new XMLHttpRequest();
xhr.open("POST", "/statics/demosource/demo_post_json.php");

// 把 msg 作为请求主体发送
xhr.send(msg);
//POST 请求通常都拥有请求主体，可在 send 方法中指定它；
//POST 请求的请求主体，应该匹配setRequestHeader方法所指定的 "Content-Type" 头。

Ajax取得响应

一个完整的 HTTP 响应由 状态码、响应头和 响应主体 组成，这三者都可以通过XMLHttpRequest对象提供的属性和方法获取。

为了能够在 HTTP 响应准备就绪时得到通知，必须监听XMLHttpRequest对象上的readystatechange事件。但为了理解这个事件类型，需要先了解下readyState属性，因为该事件监听的是readyState属性值的改变。

readystatechange 事件的触发时机是在 readyState 属性值发生改变时触发

readyState 属性

readyState属性是一个整数，它的值代表了不同的 HTTP 请求状态。

readyState属性值的含义：

• 0：初始值，表示请求未初始化，open方法尚未调用
• 1：启动请求，open 方法已经调用，但尚未调用 send 方法
• 2：请求发送，已经调用 send 方法，但尚未接收到响应
• 3：接收响应，已经接受到部分响应数据，主要是响应头
• 4：HTTP 响应完成，已经接收到全部响应数据，而且可以在客户端使用

每次readyState属性值的改变都会触发readystatechange事件，但只有readyState属性值为 4 时的状态才表示 HTTP 的响应准备就绪。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        // HTTP响应完成
    }
};

xhr.open("GET", "/statics/demosource/demo_get_json.php");
xhr.send();
//readyState的属性值只代表此时的 HTTP 请求处于哪个阶段：是发送了请求还是未发送请求，是只接收到了响应头还是响应完成；
//"响应完成" 只代表 HTTP 请求结束，至于服务器的响应状态：是请求成功还是请求错误，又或者是服务器错误，需要通过 HTTP 状态码判断，它存储在XMLhttpRequest的status属性上； 

status 属性

status属性会以数字的形式保存服务器响应的 HTTP 状态码，诸如使用最频繁的 "200" 表示请求成功，"404" 表示 URL 不能匹配服务器上的任何资源。

HTTP 状态码是用来表示网页服务器响应状态的 3 位数字代码，所有状态码的第一个数字代表了响应的五种状态之一：

• 1xx:临时响应
• 2xx:成功
• 3xx:重定向
• 4xx:请求错误
• 5xx:服务器错误

示例：Ajax 请求失败

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        // 获取到响应数据，可执行一些请求成功的回调函数
    } else {
        alert("请求失败，HTTP 状态码为：" + xhr.status);
    }
};

xhr.open("GET", "/statics/demosource/404.txt");
xhr.send();

结果为：

responseText 属性

responseText属性以字符串的形式存储了响应主体，即：服务器的响应数据。

示例：响应html文本

xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) return;
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    oView.innerHTML = xhr.responseText;
                }
            };

示例：响应 JSON 数据

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        // 使用JSON.parse把 响应数据转换为json数据
        var res = JSON.parse(xhr.responseText);
        // 将响应数据中的date属性赋值给oTime做内容
        oTime.innerText = res.date;
    }
};

• responseText：无论返回的数据类型是什么，响应主体的内容都会保存在responseText属性中
• responseXML：只对 XML 数据有效，若响应主体是非 XML 数据，该属性值为null
• response：通常配合responseType使用。若指定了XMLHttpRequest实例的responseType属性，则将响应内容转换为该属性所指定的格式并返回，否则按默认情况处理

abort 中止请求

若 HTTP 请求的时间超出预期，可以调用XMLHttpRequest对象上的abort方法来中止 HTTP 请求。

示例：实现超时

var xhr = new XMLHttpRequest();
var timer = null;    // 用于存储定时器标识

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        clearTimeout(timer);    // 未超时则取消定时器
    }
};

xhr.open("GET", "/statics/demosource/demo_get_json.php");
xhr.send();

// 2秒后中止此次 GET 请求
timer = setTimeout(function(){
    xhr.abort();
}, 2000)

GET 请求

GET 请求一般用于信息获取，它没有请求主体，而是使用 URL 传递参数（即：传递数据给后台）。

GET 传递参数的方式分两步：

1. 对所需发送的数据（具有名称和值）执行普通的 URL 编码，即：由一对对 "名称=值" 组成（称为：名/值对），每一对之间用 "&" 拼接，如 "name=value&name=value&...&name=value"；
2. 由于 名/值对 会附加在 URL 地址后面，因此在这串字符参数的最前面需要添加个 "?"，表示 URL 的 查询参数 开始。

示例:传递表单数据

// GET请求的后端接口
var url = "/statics/demosource/demo_get_json.php";

// 获取用户输入的表单数据
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 将需要传递的参数拼接为 "名称=值" 对的形式
var query = "country=" + country + "&city=" + city;

// 在 query 前面添加个 "?"，再拼接后端接口
var queryURL = url + "?" + query;

// 发起GET请求：使用拼接好的 queryURL
ajaxGet(queryURL);

GET 请求的缓存问题

对于 GET 请求，请求的结果会被浏览器缓存，特别是在 IE 浏览器下。这时，如果 GET 请求的 URL 不变，那么请求的结果就是浏览器的缓存（也就是上次 GET 请求的结果）。

解决 GET 请求缓存问题的办法是：实时改变 GET 请求的 URL，只要 URL 不同，就不会取到浏览器的缓存结果。

具体做法是：在 URL 末尾添加时间戳参数。由于时间戳可以精确到毫秒，从而保证了每次发起 GET 请求的时间不同，达到实时改变请求 URL 的目的。

var url = "/statics/demosource/demo_get_json.php";

// 在请求参数的最后附加时间戳参数 t
var query = "user=" + user + "&pwd=" + pwd + "&t=" + new Date().getTime();

var queryURL = url + "?" + query;
// ajax_get为自己封装的请求对象，不是固定用法
ajax_get(queryURL);

POST 请求

POST 请求一般用于修改服务器上的资源，它需要发送一个请求主体，客户端传递给服务器的数据就包含在这个请求主体中。

POST 请求使用 表单编码 的方式来发送数据的关键步骤：

1. 对所需发送的数据（具有名称和值）执行普通的 URL 编码，即：像 GET 请求那样拼接为 名/值 对的形式；
2. 将"Content-Type"请求头的值设置为"application/x-www-form-urlencoded"。

"Content-Type"请求头用于设置请求主体的编码格式。

示例：

// 获取用户输入的表单数据
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 将数据拼接为 名/值对 的形式
var query = "country=" + country + "&city=" + city;

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    // ... ... 省略事件处理程序
}

// 指定 POST 请求
xhr.open("POST", "/statics/demosource/demo_post_json.php");

// 设置请求主体的编码方法
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 发送请求主体（数据）
xhr.send(query);

"表单编码" 只是对请求主体的一种编码方式，并不是发送 HTML 表单数据所特有的。同样的，数据往往都直接来自一个 JavaScript 对象，只需对 JavaScript 对象执行 URL 编码