从AJAX的工作原理来看,它是一种可以使用脚本操纵HTTP和Web服务器进行数据交换并且不会导致页面重载的技术。Ajax的核心就是XMLHttpRequest对象。
具体来说,AJAX包括以下几个步骤:
1、创建Ajax对象。
2、发出http请求。
3、接收服务器传回的数据。
4、更新网页数据。
概括起来,就是一句话,AJAX通过原生的XMLHttpRequest对象发出http请求,得到服务器返回的数据后,再进行处理。
AJAX可以是同步请求,也可以是异步请求。但是,大多数情况下,特指异步请求。因为同步的Ajax请求,对浏览器有“堵塞效应”。
1、XMLHttpRequest对象
XMLHttpRequest对象用来在浏览器与服务器之间传递数据。
var ajax=new XMLHttpRequest();
ajax.open('get','http://www.example.com/page.php',true);
上面的代码向指定的服务器网址,发出GET请求。
然后,AJAX指定回调函数,监听通信状态(readyState属性)的变化。
ajax.onreadystatechange=handleStateChange;
一旦能拿到服务器返回的数据,ajax不会刷新整个网页,而是只更新相关部分,从而不打断用户正在做的事情。
下面是XMLHttpRequest对象的典型用法。
var xhr=new XMLHttpRequest();
//指定通信过程中状态改变时的回调函数
xhr.onreadystatechange=function(){
//通信成功时状态值为4
if(xhr.readyState===4){
if(xhr.status===200){
console.log(xhr.reponseText);
}else{
console.error(xhr.statusText);
}
}
}
xhr.onerror=function(e){
console.error(xhr.statusText);
}
//open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET','/endpoint',true);
//发送http请求
xhr.send(null);
open方法的第三个参数是一个布尔值,表示是否为异步请求。如果设为false,就表示这个请求是同步的。
2、XMLHttpRequest实例的属性
2.1、readyState
readyState是一个只读属性,用一个整数和对应的常量,表示XMLHttpRequest请求当前所处的状态。