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