ajax技术

一，概述

ajax（异步的javascript和xml）是一个js的技术，用来实现浏览器异步请求服务器，且不需要浏览器刷新页面。

二，实现方式

1，创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2，使用open()方法初始化一个请求

语法：

open(method, url, [async], [user], [password]) - 打开（初始化）一个请求，但不会发送

         method - 请求的方法（例如GET、POST）

         url - 请求的地址

         async - 是否为异步请求（默认为true）（可选）

         user - 用于认证的用户名（可选）

         password - 用于认证的密码（可选）

xhr.open('get', 'http:www.xx.com/api/getData');

3，send()发送数据

xhr.send({name: '张三', age: 18});

4，onreadystatechange回调函数监听响应

回调函数配合XMLHttpRequest实例化的对象的readyState属性来配合使用。（也可以使用onload事件更快速的处理响应的数据）

readyState值：

0：未初始化。创建了XMLHttpRequest对象，但是没有调用open()方法

1：已打开连接。调用了open()方法，但是还没有发送数据send()

2：数据已发送。已调用send()方法发送数据，服务器已接收请求

3：交互中。服务器正在处理请求并返回数据

4：完成。服务器已经完成了数据传输

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xht.responseText);
        console.log(data);
    }
}

三，常用属性和方法

以上的onreadystatechange、readyState都是XMLHttpRequest对象的属性与方法。js还封装了一些其他的常用属性和方法。

• responseText - 服务器返回的数据文本
• status - 服务器返回的http状态码
• responseXML - 服务器XML返回的数据
• setRequestHeader(header, value) - 设置请求头
• getResponseHeader(header) - 获取响应头
• getAllResponseHeaders() - 获取所有的响应头
• abort() - 停止或放弃当前异步请求
• onload() - 处理服务器响应成功后的数据（只有响应成功才会触发onload事件）

示例：

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

// onload事件触发说明服务器响应成功
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText)
    }
}