AJAX

概述
    Async Javascript And Xml
    异步请求
传统的WEB请求(同步请求)与Ajax异步请求异同
    传统的WEB请求(同步请求)
        请求过程：浏览器(当前页面就会丢弃) --> HTTP协议 --> Web服务器
        响应过程：Web服务器 --> 准备一个新的html页面  ---> 浏览器
    Ajax异步请求
        请求过程：浏览器(当前页面不会丢弃) --> Ajax引擎(http协议) --> Web服务器
        响应过程：Web服务器 --> 准备部分数据 ---> Ajax引擎(http协议) --> dom编程
发送异步请求的步骤
    1.创建Ajax引擎对象(XMLHttpRequest(其它)、ActiveXObject(ie))
        var xhr = new XMLHttpRequest(); // msie7+、firefox、chrome、opera
        var xhr = new ActiveXObject("msie浏览器的版本号"); // msie7-
    2.调用xhr.open()方法打开服务器之间的连接
        //请求方式post|get/请求的URL/true:　异步请求的异步 false: 异步请求的同步
        xhr.open("get|post", "url", true|false);
    3.发送异步请求
    4.获取服务器端的响应数据
readyState的五种状态
    0：XMLHttpRequest对象还没有完成初始化。
    1：XMLHttpRequest对象开始发送请求。
    2：XMLHttpRequest对象的请求发送完成。
    3：XMLHttpRequest对象开始读取服务器的响应。
    4：XMLHttpRequest对象读取服务器响应结束。
status的状态码
    200：服务器响应正常。
    400：无法找到请求的资源。
    401：访问资源的权限不够。
    403：没有权限访问资源。
    404：需要访问的资源不存在。
    405：需要访问的资源被禁止。
    407：访问的资源需要代理身份验证。
    414：请求的URL太长。
    500：服务器内部错误。

使用

// 创建Ajax引擎对象
(function(){
    // msie7+、firefox、chrome、opera
    if (window.XMLHttpRequest){
        window.xhr = new XMLHttpRequest();
    }else{// ms ie7-
        // ActiveXObject();
        // 定义msie浏览器版本号
        var xmls = ["MSXML2.XMLHTTP.7.0",
                    "MSXML2.XMLHTTP.6.0",
                    "MSXML2.XMLHTTP.5.0",
                    "Microsoft.XMLHTTP"];
        for (var i = 0; i < xmls.length; i++){
            try{
                window.xhr = new ActiveXObject(xmls[i]);
                break;
            }catch(e){
                alert(e);
            }
        }
    }
})();
window.onload = function(){
    document.getElementById("btn").onclick = function(){
        var userId = document.getElementById("userId").value;
        var pwd = document.getElementById("pwd").value;
        xhr.open("get", "login?userId=" + userId + "&pwd=" + pwd, true);
        // 设置请求头，用来告诉浏览器对我的请求进行form-urlencode编码
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send();
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4){
                if (xhr.status == 200){ 
                    var res = xhr.responseText;
                    document.getElementById("div").innerHTML = res;
                }
            }
        };
    };
};
JQuery异步请求
    $.ajax(url, {
        type : "get|post", // 请求方式
        data : "{key:vlaue,key:value}", // 请求参数
        dataType : "html|text|json|script|xml|jsonp", // 服务器响应回来的数据类型
        async : true|false, // 异步还同步
        success : function(data){ // 请求成功回调的函数
            // data : 响应数据
        },
        error : function(){ // 请求失败回凋的函数
        }
    });
    $.get(
        "get.action", 
        "userId=" + userId, 
        function(data, status){
            if (status == "success"){
                $("#res").html(data);
            }
        }, 
        "text"
    );
    $.getJSON(
        "getJSON.action", 
        "userId=" + userId, 
        function(data, status){
            if (status == "success"){
                $("#res").html(data.name  + "==" + data.age);
            }
        }
    );
    $.getScript(
        "getScript.action", 
        function(data, status){
            if (status == "success"){}
        }
    );
    $("#div").load(
        "data/menu.html", 
        function(data, status){
            if (status == "success"){
            }
        }
    );
    $.post(
        "post.action", 
        params, 
        function(data, status){
            if (status == "success"){
                $("#res").html(data);
            }
        }, 
        "text"
    );