实现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的基本步骤

赞 (0)
分享到:更多 ()

发表评论 0