Ajax

一、ajax是什么?
ajax: asynchronous javascript and xml: 异步的javascript和xml。
ajax是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。
使用ajax技术之后，页面无刷新，并且不打断用户的操作。
二、ajax编程的基本步骤

1. 获取ajax对象(XmlHttpRequest)
2. 使用 XmlHttpRequest向服务器发送请求
3. 在服务器端处理请求
4. 在监听器当中，处理服务器返回的响应
   其中：ajax对象的属性
   a. onreadystatechange: 绑订一个事件处理函数(即: 注册一个监听器)
   当ajax对象的readyState值发生了改变(比如， 从0-->1)，就会产生readystatechange事件。
   b. responseText: 获得服务器返回的文本
   c. responseXML: 获得服务器返回的XML dom对象
   d. status: 获得状态码
   e. readyState: 返回ajax对象与服务器通讯的状态。返回值是一个number类型的值，不同的值表示不同的含义:
   0: (为初始化) --> 对象已建立，但是尚未初始化(尚未调用 open方法)
   1: (初始化) --> 对象已建立，尚未调用send方法
   2: (发送数据) --> send方法已调用
   3: (数据传送中) --> 已接受部分数据
   4: (响应结束) --> 接收了所有的数据
   三. 选择POST还是GET
   如果请求不改变服务器状态只是取回数据则使用GET.GET请求被缓存起来,如果多次提取相同的数据可提高性能;只有当URL和参数的长度大于2048个字符时才使用POST提取数据在IE下URL过长会导致请求参数被截断;
   完整封装代码：

//小工具函数，把Json对象转URL字符串；
function json2url(json){
    json.t = Math.random();
    var arr = [];
    for(var name in json){
        arr.push(name+'='+encodeURIComponent(json[name]));
    }
    return arr.join('&');
}
//Aja函数封装，接收一个Json对象
/*
url:服务器地址
data：数据
type：发送方式，默认GET
timeout:超时时间，默认5s
success:成功回调函数
error:失败回调函数
*/
function ajax(json){
    var json = json||{};
    if(!json.url)return;
    json.data = json.data || {};
    json.type = json.type || 'get';
    json.timeout = json.timeout || 5000;
  //获取Ajax对象，XMLHttpRequest并没有标准化，要区分浏览器
    if(window.XMLHttpRequest){
  //非IE浏览器
        var oAjax = new XMLHttpRequest();
    }else{
  //IE浏览器
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    switch(json.type.toLowerCase()){
        case 'get':
            oAjax.open('GET',json.url+'?'+json2url(json.data),true);
            oAjax.send();
            break;
        case 'post':
            oAjax.open('POST',json.url,true);
  //因为按照http协议的要求，如果发送的post请求，请求数据包里面，应该有一个消息头 content-type。但是，ajax对象默认没有，所以，需要调用setRequestHeader方法。
            oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            oAjax.send(json2url(json.data));
            break;
    }
    var timer = setTimeout(function(){
        oAjax.onreadystatechange=null;
        json.error&&json.error('亲，网络不给力');
    },json.timeout);
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            clearTimeout(timer);
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                json.success&&json.success(oAjax.responseText);
            }else{
                json.error&&json.error(oAjax.status);
            }
        }
    };
}