ajax兼容写法,ajax的原理和使用步骤（兼容性写法）

Ajax是前后台交互的方式，在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页

Ajax是异步请求，在请求接口的同时，页面不卡死，回调处理接口返回的后续任务

XMLHttpRequest 对象用于在后台与服务器交换数据。

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

xmlhttp=new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

创建Ajax的步骤：

1、创建一个XMLHttpRequest异步对象

var xhr;

if (window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else{

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

2、设置请求方式和请求地址

方法 xhr.open()

xhr.open()方法有三个参数

第一个参数 ：发送请求所使用的方法(GET 还是 POST)。

GET比POST 更简单也更快，并且在大部分情况下都能用。

在以下情况中，需要使用 POST 请求：

无法使用缓存文件(更新服务器上的文件或数据库)

向服务器发送大量数据(POST 没有数据量限制)

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

第二个参数：服务器端脚本的 URL地址，可以是任何类型的文件

第三个参数：同步异步的设置 (true(异步)或 false(同步))。

//get

xhr.open("get", "getPage.json", true)

// post 方式发送数据 需要设置请求头

xhr.open("post", "getPage.json", true)

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

如果是post方法，需要设置Content-Type，默认就是www-form

3、用send发送请求

xhr.send() 方法可将请求送往服务器。

// get 不需要传递参数

xhr.send(null)

// post 需要传递参数

xhr.send("pageSize=20&currentPage=1")

4、监听状态变化

onreadystatechange

每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status

状态码 200：成功

xhr.onreadystatechange = function() {

// 判断异步对象的状态

if(xhr.readyState == 4) {

// 判断交互是否成功

if(xhr.status == 200) {

// 获取服务器响应的数据

var res = xhr.responseText//返回的数据

// 解析数据

res = JSON.parse(res)

}

}

}