ajax 的应用已经非常广泛了,历史就不多说了,有一点大家可能没注意到的是,其实追究起来 ajax 技术是由微软先提供的,好吧,有兴趣的同学可以自己去找找资料,下面我将简要对 jQuery 中的 ajax 技术进行一个概述。

XMLHttpRequest

使用 jquery 之前,我有必要对最原始的 xmlhttprequest 进行一个回顾,使用这个最原始的方法进行一个 ajax 请求,代码应如下:

<script type=text/javascript>
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById(myDiv).innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open(GET,/ajax/test1.txt,true);
        xmlhttp.send();
    }
</script>


原始的 xhr 发起 ajax 请求主要可以分为几个部分:

  1. 创建 xmlHttpRequest 对象
  2. 创建回调函数(即收到响应后的处理函数)
  3. 发起请求

JQuery 的 Ajax

从上面的例子的 3 个步骤中可以看到,首先第一步,创建 xhr 对象,就这个一个简简单单的需求我们用了多少行代码来实现?数数应该是有 6-7 行的,其次是第二步的回调函数,本来就一个处理还是,但是,居然还有判断状态码,代码也有 4-5 行,最后是发起请求,这个是不多了,只有 2 句,但是,为什么不能是一句,甚至于没有呢?

好,接下来就给大家演示一下 jQuery 的 Ajax 请求是怎么实现的,下面上一个例子:

$.ajax({
    type: GET,
    url: test.json,
    dateType: json,
    success: function(data){
        console.log(success);
    },
    error: function(e) {
        console.log(e.message);
    }
});


这里大家应该可以猜得出来,这个是请求 test.json 的 ajax 请求,当请求成功之后会打印出 success 请求,失败之后会打印出失败的信息。

$.ajax 是 jQuery 中最底层的 ajax 实现了,此外,jQuery 还在 $.ajax 的基础上封装了 $.get/$.post/$.getJSON/$.load 等请求函数,除此之外,我们使用 ajax 免不了传输数据,这是,jQuery 还给我们提供了表单的序列化函数,$.serialize()$.serializeArray() ,可以帮助我们将表单序列化成字符串和 json 数据结构。