By Noxxxx from https://www.noxxxx.com/?post_type=post&p=478
欢迎分享与聚合,尊重版权,可以联系授权
Ajax的全称为Asynchronous JavaScript And Xml,是一种web客户端与服务器端异步通信的技术。
异步的直观表现就是:当前页面发送一个请求给服务器,当前页面不需要等待服务器响应也可以继续操作网页。
XMLHttpRequest对象
1、创建xhr对象
var xhr = new XMLHttpRequest();
2、发送请求
xhr.open("get","example.php",false); xhr.send(null);
open
方法接受三个参数:要发送的请求类型(常用的有get和post),请求的url和表示是否异步的布尔值。send()
方法接受一个参数,即要作为请求主体发送的数据。但是 不需要通过请求主体发送数据时,必须给send()方法传入 null 。
3、异步请求
多数情况下,我们是需要发送异步请求,JavaScript可以继续执行而不必等待响应。这时,可以检测XHR对象的readyState属性,它有以下几个可能的值:
- 0:未初始化。尚未调用open()
- 1: 启动。已调用open(),未调用send()
- 2: 发送。已调用send(),为未收到响应
- 3:接受。已接受到部分数据
- 4:完成。已接受全部数据
readyState的值每次变化都会触发一次readystatechange事件。通常,我们只对最后一个状态感兴趣,只要readyState变为4,我们就可以开始处理响应了。因此可以这样写代码:
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (){ if(xhr.readyState == 4){ //处理 } }; xhr.open("get","example.php",true); xhr.send(null);
因为调用open方法时也会触发readystatechange事件,所以 在调用open前就要注册eadystatechange事件 。
4 、异步请求
在收到响应后,响应的数据会自动填充xhr对象的相关属性,因此我们只需判断处理这些属性即可。相关属性如下:
- responseText:作为响应被返回的主体
- responseXML:如果响应的类型是”text/xml”或”application/xml”,这个属性将保存着响应的xml文档
- status:响应的http状态
- statusText:http状态的说明
收到响应后,我们首先应根据http的状态判断是否成功,一般状态码status = 200,被是做成功状态码为304表示内容未被修改,可使用本地缓存。可像下面这样检测这两种状态码:
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (){ if(xhr.readyState == 4){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ //响应成功返回 }else{ console.log("Request was unsuccessful " + xhr.status); } } }; xhr.open("get","example.php",true); xhr.send(null);
在接收到响应之前还可以调用abort()方法来取消异步操作:
xhr.abort()
Ajax 的缺点就目前来看,主要是破坏了浏览器的前进和后退功能。在浏览器日趋强大的的今天,兼容性问题其实不是特别大了。
不错,受教了!支持一下!