Ajax的工作原理和过程

1.Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax异步请求

        请求过程：浏览器(当前页面不会丢弃) --> Ajax引擎(http协议) --> Web服务器

        响应过程：Web服务器 --> 准备部分数据 ---> Ajax引擎(http协议) --> dom编程

2.Ajax的工作过程

(1)创建Ajax引擎对象(XMLHttpRequest(其它)、ActiveXObject(ie))

var xhr =newXMLHttpRequest();// msie7+、firefox、chrome、opera

var xhr =newActiveXObject("msie浏览器的版本号");// msie7-

(2)调用xhr.open()方法打开服务器之间的连接

//请求方式post|get/请求的URL/true:　异步请求的异步 false: 异步请求的同步xhr.open("get|post","url",true|false);

(3)发送异步请求

(4).获取服务器端的响应数据

---

3.例子

// 创建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"

    );