AJax技术

Ajax是一种浏览器端与服务器端交互技术，核心对象是XMLHttpRequest，允许在不刷新整个页面的情况下动态维护数据.
优点：提高用户体验，减少服务器端压力
缺点：1、破坏浏览器的Back行为

2、一些手持设备没法支持Ajax

3、因为其异步交互的特性，若同时有多个Ajax请求，无法保证哪一个先获得响应，需要手动处理

js操作ajax代码：
/**
 * 创建XMLHttpRequest对象
 */
function createXHR() {
    var xhr = null;
    try{
        xhr = new XMLHttpRequest();
    } catch(e) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}
/**
 * 发送ajax请求
 * method - [post(数据通过表单提交，没有长度限制，先发请求头再发数据体)| get(通过url传递，有长度限制2k，用户可见不安全，容易出现乱码)]
 * url - 请求url
 * async - [true(异步) | false(同步)]
 * param - 参数
 * cb - 回调方法
 */
function sendReq(/*{method, url, async, param, cb}*/obj) {
    var method = obj.method || 'get';
    var url = obj.url || '';
    var async = obj.async || true;
    var param = obj.param || {};
    var cb = obj.cb || function(){};
    var xhr = createXHR();
    //当xhr的readyState改变时触发
    xhr.onreadystatechange = cb(xhr);
    xhr.open(method, url, async);
    xhr.send(param);
}
/**
 * 回调函数
 * --------------------------------------------------------------------------
 * readyState的五种状态：
 * 状态码           名称            描述
 * 0                uninitialized   初始化状态，XMLHttpRequest对象已经被创建
 * 1                open            open()方法已调用，但send()方法未调用，请求未发出
 * 2                send            send()方法被调用，HTTP请求已发送至服务器，未收到响应
 * 3                interative      所有请求头已经接收到，响应体开始接收但未完成
 * 4                complete        HTTP响应接收成功
 * --------------------------------------------------------------------------
 * Status状态码：
 * 代码             说明
 * 1xx              临时响应
 * 2xx              服务器成功的处理了请求
 * 3xx              重定向
 * 4xx              浏览器请求错误
 * 5xx              服务器内部错误，即服务器在处理一个正确请求时发生错误
 */
function cb(xhr) {
    //返回请求头字段
    if(xhr.readyState == 3) {
        var date = xhr.getResponseHeader('Date');
    }
    //返回处理结果
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {
            //do something
        }
    }
}