jQuery与Ajax的应用

Ajax全称”Asynchronous JavaScript and XML”（异步JavaScript和XML），它并不是指一种单一的技术，而是有机地利用了一系列交互式应用相关的技术所形成的结合体。他的出现，揭开了无刷新更新页面的新时代，是web开发应用的一个里程碑。
在传统模式中，数据提交时通过表单来实现的，而数据获取是靠全页面刷新获取整页的内容。Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。
但是，Ajax也存在许多缺点。浏览器对XHR对象支持度不够；在Ajax中“前进”和“后退”按钮的功能都会失效，当触发一个Ajax交互后又觉得不想这么做，单击“退后”按钮，浏览器后退到先前的一个页面，通过Ajax交互得到的内容完全消失了；对搜索引擎的支持不足。

传统Js实现Ajax

（1）、定义一个函数，异步获取信息

function Ajax(){
    //...
}

（2）、声明一个空对象，用来装入XHR对象

var xmlHttpReq = null;

（3）、给XHR对象赋值

if(window.ActiveXObject){    //IE5 IE6以ActiveXObject的方式引入对象
    xmlHttpReq = new Active XObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){           //XML是window的子对象
    xmlHttpReq = new XMLHttpRequest();    //实例化一个对象
}

（4）、使用open()方法初始化对象，指定http方法和要使用的服务器URL;

xmlHttpReq.open("GET","test.php",true)    //显示地把async参数设置为true

（5）、注册一个XMLHttpRequest对象将调用的回调事件处理器当作它的readyState值改变时调用当readyState值发生改变时，会激发一个readystatechange事件，可用该事件属性来注册该回调事件处理器。

XMlHttpReq.onreadystatechange = RequestCallback;

（6）、使用send()方法发送该请求；

xmlHttpReq.send(null);    

当请求状态改变时，XHR对象调用onreadystatechange属性注册的事件处理器。因此，在处理该响应之前，事件处理器应该首先检查readyState的值和HTTP状态。

function RequestCallback(){    //一旦readyState值改变将会调用该函数
    if(xmlHttpReq.readyState == 4){
        if(xmlHttpReq.status == 200){
            document.getElementById("resText").innerHTML = xmlReq.responseText;
        }
    }
}

jQuery中的Ajax

1、load()方法

load(url [,data] [,callback]);

url：请求HTML页面的URL地址；
data(可选)：发送至服务器的key/value数据；
callback：请求完成时的回调函数，无论请求成功或失败。

$(function(){
    $("#send").click(function(){
        $("#resText").load("test.html");
    });
}); 

如果只需要加载test.html页面内的某个元素，通过为URL参数指定选择符，语法结构为：“url selector”。$("#resText").load("test.html .para");
回调函数有三个参数，分别代表请求返回的内容、请求状态、XHR对象。

$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest)){
    //......
}

2、$.get()和$.post()方法

$.(get)(url [,data] [,callback] [,type])

data(可选)：发送至服务器的key/value数据会作为QueryString附加到请求URL中；
callback：载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法。
type：服务器端返回内容的格式。

$("#send")click(function(){
    $.get("get.php",{
        username:$("#username").val(),
        content:$("#content").val()
    },function(data,textStatus){

        //HTML片段
        $("#resText").html(data);

        //XML文档
        var username = $(data).find("comment").attr("username");
        var content = $(data).find("comment content").text();
        var txtHTML = "<div class='commet'<h6>" + username + ":</h6><p class='para'" + content + "</p></div>";
        $("#resText").html(txtHTML);

        //JSON文件
        var username = data.username;
        var content = data.content;
        var txtHTML = "<div class='comment'<h6>" + username + ":<h6><p class='para'>" + content + "</p></div>";
        $("#resText").html(txtHTML);

        //textState:   请求状态：success,error,notmodified,timeout 4种
        }
    );
});

3、$.getScript()和$.getJson()

有时候在页面初次加载时就取得所需的全部JS文件是完全没有必要的，JQuery提供了$.getScript()来直接加载.js文件，并且不需要对文件进行处理，他会自动执行。

$(function(){
    $("#send").click(function(){
        $.getScript('test.js',function(){//...});
    });
});

$.getJson()方法用来加载Json文件

$(function(){
        $("#send").click(function(){
                $.getJson('test.js',function(commentIndex,comment){
                        var html = "";
                        $.each(data,function(){
                                html += '<div class="content"><h6> + comment['username'] + ':</h6><p class = "para">' + comment['username'] + '</p></div>';
                        });
                        $("#resText").html(html);
                });
        });
});

$.each(),用于遍历对象和数组，以数组和对象作为第一个参数，以一个回调函数作为地热个参数。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

4、$.ajax()

$.ajax()方法是jQuery中最底层的Ajax实现，前面介绍的方法都是基于$.ajax()方法构建的，可以用它来代替前面的前面的所有方法。

//代替$get.Json()方法
$(function(){
    $("#send").click(function(){
        $.ajax({
            type:"GET",
            url:"test.js",
            datatype:"json",
            success:function(data){
                $("#resText").empty();
                var html = "";
                $.each(data,function(){
                    html += '<div class="content"><h6> + comment['username'] + ':</h6><p class = "para">' + comment['username'] + '</p></div>';
                });
            }
        });
    });
})

jQuery中的Ajax全局事件

通过jQuery提供的一些全局自定义函数，能够为各种与Ajax相关的事件注册回调函数。例如，当请求开始时，会触发AjaxStart()方法的回调函数，当请求结束时，会触发AjaxStop()方法的回调函数。这些方法都是全局的，因此无论创建他们的代码位于何处都会触发他们。
ajaxComplete(callback)，Ajax请求完成时执行的函数；
ajaxError(callback)，请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递；
ajaxSend(callback)，请求发送前执行的函数；
ajaxSuccess(callback)，请求成功时执行的函数。