Ajax

什么是Ajax

AJAX（Asynchronous javascript and xml）用JavaScript 以异步的形式操作 xml （现在操作的是json）

• Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复

　　　　form表单传输数据的方式就属于传统的web模型，当我们提交数据后会刷新整个页面，在新的页面中返回内容。

　　　　form表单有三个很重要的属性，分别是

1. 1. method：规定发送数据的http方式，一般是get或者post

   2. action：要把数据传送到的地址

   3. enctype：规定在发送表单数据之前如何对其进行编码

　　　　　　　　enctype的默认值是 “application/x-www-form-urlencoded”，即在发送前编码所有字符，这个属性值即使我们不写也是默认这个的。

  　　　　　　　  multipart/form-data (<input type='file'>) 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值

• AJAX模型中，数据在客户端与服务器之间独立传输，服务器不再返回整个页面。（异步局部地获取数据，大大改善了Form表单的缺点）

Ajax重要的两个对象

new XMLHttpRequest() 和new ActiveXObject('Microsoft.XMLHttp') 一般的主流浏览器支持第一个方法，IE6以下用第二个方法。

对象的方法

方法	描述
abort	停止当前的请求
getAllResponseHeaders	把http请求的所有响应首部最为键/值返回
getResponseHeaders(‘headerLabel’)	返回指定首部的串值
open(‘method’, ‘url’, ‘true’)	建立对服务器的调用，method参数可以是get、post或者put。 url参数可以是相对url或者绝对url， 第三个参数是选择异步还是同步，异步是true。 这个方法还包括三个可选参数。
send(string)	向服务器发送请求     string：仅用于 POST 请求
setRequestHeader(‘header’, ‘value’)	向请求添加 HTTP 头。之前必须调用open方法 header: 规定头的名称 value: 规定头的值

对象的属性

属性	描述
onreadystatechange	状态改变触发器
readyState	对象的状态，状态值 0代表未初始化，未调用send()方法 1代表读取中，已调用send()，正在发送请求 2代表已读取，send方法执行完成，接收到全部响应内容 3代表交互中，正在解析响应内容 4代表完成，响应内容解析完成
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据
status	服务器返回的状态码，如：404 = “文件未找到”、200 = “成功” 500 = “服务器内部错误” 304=“资源未被修改”
statusText	服务器返回的状态文本信息

AJAX创建流程

1.生成一个ajax对象

2.通过ajax对象 open（method，url，flag）方法初始化请求；

3.通过ajax对象 send发送数据

4.通过ajax对象的onreadystatechange来监听状态改变，当数据请求成功之后就可以操作数据了(readyState == 4&&status==200)

下面封装一个属于自己的ajax

function ajax(method, url, callback, data, flag) {
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr =  new XMLHttpRequest();
    }else {
        xhr = new ActiveXObject('Microsoft.XMLHttp')
    }
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                callback(xhr.responseText);
            }else {
                console.log('error');
            }
        }
    }
    method = method.toUpperCase();
    if(method == 'GET') {
        var date = new Date(),
            timer = date.getTime();
        xhr.open(method, url + '?' + data + '&timer=' + timer, flag);
        xhr.send();
    }else if(method == 'POST') {
        xhr.open(method, url, flag);
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.send(data);
    }
}