ajax实现局部刷新（ajax请求的五个步骤）
概述
ajax 是一个缩写，它的全名是 asynchronous javascript and xml，意思就是异步 javascript 和 xml，即用javascript执行异步网络请求。
ajax 不是一种新技术，而是一个在 2005 年被 jesse james garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括:
- html 或 xhtml
- css
- javascript
- dom
- xml
- xslt
- xmlhttprequest
尽管 x 在 ajax 中代表 xml, 但由于 json 的许多优势，比如更加轻量以及作为 javascript 的一部分，目前 json 的使用比 xml 更加普遍。json 和 xml 都被用于在 ajax 模型中打包信息。
ajax 的优势
传统的网页（不使用 ajax）如果需要更新内容，必须重载整个网页面。
ajax 通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
xmlhttprequest 对象
xmlhttprequest（xhr）对象用于与服务器交互。通过 xmlhttprequest 可以在不刷新页面的情况下请求特定 url，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。xmlhttprequest 在 ajax 编程中被大量使用。
ajax 的工作原理
其工作原理基本经过以下几个步骤：
- 客户端发送请求，请求交给 xhr。
- xhr 把请求提交给服务。
- 服务器进行业务处理。
- 服务器响应数据交给 xhr 对象。
- xhr 对象接收数据，由 javascript 把数据写到页面上。
ajax 的创建步骤
根据 ajax 的工作原理，它的创建步骤主要包括：
- 创建 xmlhttprequest 对象，即创建一个异步调用对象。
- 创建一个新的 http 请求，并指定该 http 请求的方法、url 及验证信息。
- 设置响应 http 请求状态变化的函数。
- 发送 http 请求。
- 获取异步调用返回的数据。
- 使用 javascript 和 dom 实现局部刷新。
ajax 的具体使用
以下是 使用 ajax 的完整流程。
1. 创建 xmlhttprequest 对象
const request = new xmlhttprequest();2. 创建一个新的 http 请求，并指定该 http 请求的方法、url 及验证信息
创建 http 请求可以使用 xmlhttpreques t对象的 open() 方法,其语法代码如下：
request.open(method, url, async, user, password);参数解析：
- method 要使用的http方法，比如 “get”、”post”、”put”、”delete” 等。
- url 表示要向其发送请求的 url 地址。
- async (可选) 一个可选的布尔参数，表示是否异步执行操作，默认为 true。如果值为 false，send() 方法直到收到答复前不会返回。如果 true，已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true，否则将引发异常。
- user (可选 用于认证用途的用户名，默认值为 null。
- password (可选) 用于认证用途的密码，默认值为 null。
3. 设置响应 http 请求状态变化的函数和服务端返回信息函数
创建完 http 请求之后，应该就可以将 http 请求发送给 web 服务器了。然而，发送 http 请求的目的是为了接收从服务器中返回的数据。从创建 xmlhttprequest 对象开始，到发送数据、接收数据、xmlhttprequest 对象一共会经历以下 5 种状态：
- 未初始化状态。在创建完 xmlhttprequest 对象时，该对象处于未初始化状态，此时 xmlhttprequest 对象的 readystate 属性值为 0。
- 初始化状态。在创建完 xmlhttprequest 对象后使用 open() 方法创建了 http 请求时，该对象处于初始化状态。此时 xmlhttprequest 对象的readystate属性值为 1。
- 发送数据状态。在初始化 xmlhttprequest 对象后，使用 send() 方法发送数据时，该对象处于发送数据状态，此时xmlhttprequest 对象的 readystate 属性值为 2。
- 接收数据状态。web 服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，xmlhttprequest 对象处于接收数据状态，xmlhttprequest 对象的 readystate 属性值为 3。
- 完成状态。xmlhttprequest 对象接收数据完毕后，进入完成状态，此时 xmlhttprequest 对象的 readystate 属性值为 4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用 responsetext 属性或 responsexml 属性来获取数据。
总的来说，readystate 属性的值有以下几种：
- 0 (未初始化) or (请求还未初始化)
- 1 (正在加载) or (已建立服务器链接)
- 2 (加载成功) or (请求已接受)
- 3 (交互) or (正在处理请求)
- 4 (完成) or (请求已完成并且响应已准备好)
只读属性 xmlhttprequest.status 返回了 xmlhttprequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前，status 的值为 0。值得注意的是，如果 xmlhttprequest 出错，浏览器返回的 status 也为0：
- unsent（未发送） 0
- opened（已打开） 0
- loading（载入中） 200
- done（完成） 200
var xhr = new xmlhttprequest();
console.log('unsent', xhr.readystate); // readystate 为 0
xhr.open('get', '/api', true);
console.log('opened', xhr.readystate); // readystate 为 1
xhr.onprogress = function () {
console.log('loading', xhr.readystate); // readystate 为 3
};
xhr.onload = function () {
console.log('done', xhr.readystate); // readystate 为 4
};
xhr.send(null);只有在xmlhttprequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断xmlhttprequest对象的状态：
const xhr = new xmlhttprequest();
xmlhttprequest.onreadystatechange = function () {
if (xhr.readystate === 4 && xhr.status === 200) {
// do something here
}
}4. 发送http请求
xmlhttprequest.send(data);结束
最后，附上一个简单的完整 ajax 实例：
<button id="ajaxbutton" type="button">make a request</button>
<script>
var httprequest;
document.getelementbyid("ajaxbutton").addeventlistener('click', makerequest);
function makerequest() {
httprequest = new xmlhttprequest();
httprequest.onreadystatechange = alertcontents;
httprequest.open('get', 'test.html');
httprequest.send();
}
function alertcontents() {
if (httprequest.readystate === xmlhttprequest.done) {
if (httprequest.status === 200) {
alert(httprequest.responsetext);
} else {
alert('there was a problem with the request.');
}
}
}
</script>
~
~