实现Ajax的步骤和封装函数

实现Ajax的步骤

第一步：

创建一个XMLHttpRequest对象：

var xhr = null;

标准浏览器以及IE6以上版本浏览器使用XMLHttpRequest对象

IE6及一下版本浏览器使用ActiveXObject(Microsoft.XMLHTTP)创建。

第二步：

使用XMLHttpRequest的onreadystatechange属性，当xhr的readystate发生变化时触发。

第三步：

初始化xhr，调用open（）方法

第四步：

发送请求，调用send（）方法。

/*Ajax封装函数*/

function ajax(method, url, sucFn, data){

//第一步：创建一个XMLHttpRequest（标准浏览器及ie6以上）

//或ActiveXObject("Microsoft.XMLHTTP")(ie)对象。

var xhr = null;

if(window.XMLHttpRequest){

//标准浏览器

xhr = new XMLHttpRequest();

} else {

//IE浏览器

xhr = ActiveXObject("Microsoft.XMLHTTP");

}

//第二步：

//使用XMLHttpRequest对象的onreadystatechange属性，在xhr的readyState属性发生变化时触发。

xhr.onreadystatechange = function (){

// 1) 判断readyState的值是否符合要求（数据是否接收完成）

// readyState: 0（未初始化， 未调用xhr的open方法）

// 1（已初始化，调用了xhr的open方法）

// 2（未调用send）

// 3（调用send,已成功发送请求，“正在接收数据”）

// 4 （数据接收完成）

if(xhr.readyState == 4){

// status是服务器的HTTP状态， 200代表服务器处理正常，成功向客户端发送了所请求的数据

if(xhr.status == 200 || xhr.status == 0){

sucFn(xhr.responseText);

} else {

alert("服务器出错，错误码是：" + xhr.status);

}

}

};

// data参数作为可选项（可传可不传）

data = data ? data : "";

if(method.toUpperCase() == "GET"){

//第三步：初始化xhr。调用open()方法

xhr.open(method, url + "?" + data, true);

//第四步：发送请求，调用send()方法。

xhr.send();

} else {

xhr.open(method, url, true);

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send(data);

}

}