实现AJAX的基本步骤

AJAX（Asynchronous JavaScript and XML）：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这就意味着可以在不重新加载整个网页的情况下，对网页的局部进行更新。

实现AJAX的基本步骤：

一、创建XMLHttpRequest对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均支持XMLHttpRequest 对象，而IE5 和 IE6 使用 的是ActiveXObject。

在现代浏览器中创建XMLHttpRequest对象的语法如下所示：

var xhr = new XMLHttpRequest()；

在IE5 和 IE6中则使用ActiveXObject 对象：

var xhr = new ActiveXObject(“Microsoft.XMLHTTP”)；

为了兼容所有的浏览器，判断浏览器是否支持XMLHttpRequest 对象。

var xhr;
if (window.XMLHttpRequest){
    // 标准浏览器
    xhr = new XMLHttpRequest();
}else{
    // IE6, IE5
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

二、创建一个新的HTTP请求,并指定请求的方法、URL、是否异步处理请求及验证信息

xhr.open(method,URL,flag,username,userpass);

method：请求的类型（GET、POST、PUT、DELETE、HEAD……）

URL：文件在服务器上的位置

flag：是否异步请求。可选参数，参数值为布尔类型。true表示异步方式、false表示同步方式，默认为true。

username：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。

userpass：该参数为可选参数，用于输入密码。如果服务器需要验证，则必须使用该参数。

三、为onreadystatechange 事件绑定方法，监听状态的改变

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        var result = xhr.responseText;
    }
}

readyState属性：表示请求/响应过程的当前活动阶段

0：未初始化。尚未调用 open()方法。

1：启动。已经调用 open()方法，但尚未调用 send()方法。

2：发送。已经调用 send()方法，但尚未接收到响应。

3：接收。已经接收到部分响应数据。

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。

status属性：响应的 HTTP 状态码

200：响应成功

301：永久重定向/永久转移

302：临时重定向/临时转移

304：本次获取内容是读取缓存中的数据

400：请求参数错误

401：无权限访问

404：访问的资源不存在

……

四、发送HTTP请求

xhq.send(data);

其中data是个可选参数，请求主体发送的参数，如果请求的数据不需要参数，即可以使用null来替代。

只有在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数。

欢迎分享本文，转载请保留出处：前端ABC » 实现AJAX的基本步骤