jQuery与Ajax的应用（jQuery中的Ajax）实例讲解

一.jquery中的ajax

jquery对ajax操作进行了封装，在jquery中$.ajax()方法属于最底层的方法，第二层是load()、$.get()和 $.post 方法，第三层是$.getscript()和 $getjson() 方法。

1.load()方法

载入html文档

load()方法—能载入远程html代码并插入dom中，结构为：

load(url [,data] [,callback]) //请求html页面的url地址，发送至服务器的数据，请求完成时的回调函数

首先在一个空白页面上构建一个被load()方法加载并追加到页面中的html文件，名字为test.html;

然后再新建一个空白页面，上面添加两个元素，button按钮用来触发ajax事件，id为restext的p元素用来显示追加的html元素；

接下来编写jquery代码，等dom元素加载完毕后，通过单击id为send的按钮来调用load()方法，然后将test.html的内容加载到id为“restext”的p区域：

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

筛选载入的html文档

如果只需要加载test.html页面内的某些元素，可以使用load()方法的url参数达到目的，通过为url参数指定选择符：

语法结构为：“url selector”

$("#restext").load("test.html .para"); //例只加载test.html页面中class为“para”的内容

传递方式

load()方法的传递方式根据参数data自动指定，若没有参数传递，则采用get方式传递，反之则会自动转换为post方式：

$("#restext").load("test.php",function(){
    //无参数传递，get方式
});
$("#restext").load("test.php",{name:"rain",age:"22"},function(){
    //有参数传递，post方式
});

回调函数

必须在加载完成后才能继续的操作，该函数有三个参数:返回的内容、请求状态和xmlhttprequst对象：

$("#restext").load("test.html"，function(responsetext,textstatus,xmlhttprequest){
// });

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

load()方法通常用来从web服务器上获取静态的数据文件，如果需要传递一些参数给服务器中的页面，可以使用$.get()或者$.post()方法。

$.get()方法

$.get()方法使用get方式来进行异步请求，结构为：

$.get(url [,data] [,callback] [,type]) //请求html页面的url地址，发送至服务器的数据，回调函数，服务器返回内容格式

$.get()方法的回调函数只有两个参数：

function(data,textstatus){
    //data:  返回的内容，可以是xml文档、json文件、html片段等
    //textstatus:  请求状态：success、error、notmodified、timeout4种
}

服务器返回的数据格式：html片段、xml文档、json文件

例：html片段

$(function(){
    $("#send").click(function(){
        $.get("get1.php",{
            username:$("#username").val() ,
            content:$("#content").val()
        },function(data,textstatus){
            $("#restext").html(data);  //将返回的数据添加到页面上
        });
    })
})

xml文档和json文件同理，但是需要对返回的数据进行处理，比较麻烦。分析优缺点：在不需要与其他应用程序共享数据的时候使用html片段返回数据最简单；如果数据需要重用，那么json文件在性能和文件大小方面具有优势；当远程应用程序未知时，xml文档是明智的选择。

$.post()方法

它与$.get()方法的结构和使用方式都相同，不过仍然有以下区别：

get请求会将参数跟在url后进行传递，而post请求则是作为http消息的实体内容发送给web服务器；

get方式对传输的数据大小有限制，而使用post方式传递的数据量要比get方式大得多；

get方式请求的数据会被缓存起来，其他人可以从历史记录看到，get方式会带来严重的安全性问题；

get方式和post方式传递的数据在服务器端的获取也不相同，在php中，get方式的数据可以用$_get[]获取，而post方式可以用$_post[]获取，两种方式都可以用request[]来获取；由于post和get方式提交的所有数据都可以通过" role="presentation">request[]来获取；由于post和get方式提交的所有数据都可以通过request[]来获取；由于post和get方式提交的所有数据都可以通过_request[]来获取，因此只需要改变jquery函数，就可以将程序在get请求和post请求之间切换，代码如下：

$(function(){
    $("#send").click(function(){
        $.post("post1.php",{
            username:$("#username").val() ,
            content:$("#content").val()
        },function(data,textstatus){
            $("#restext").append(data);  //将返回的数据添加到页面上
        });
    })；
})

3.$.getscript()方法和`$.getjson()方法

$.getscript()

有时候在页面初次加载时就取得所需的全部javascript文件是完全没有必要的，虽然可以在需要哪个javascript文件时，动态地创建

$(function(){
    $('#send').click(function(){
        $.getscript('test.js');
    });
})

与其他ajax方法一样，$.getscript()方法也有回调函数，它会在javascript文件成功载入后运行。

$.getjson()

$.getjson()方法用于加载json文件，与$.getscript()方法的用法相同。当单击“加载”按钮后，网页上看不到任何效果，虽然函数加载了json文件，但是并没有告诉javascript返回的数据怎么处理，为此jquery提供了回调函数，在回调函数里处理返回的数据：

$('#send').click(function(){
    $.getscript('test.json',function(data){
        //返回的数据
    });
});

可以在函数中通过data变量来遍历响应的数据，jquery提供了一个通用的遍历方法$.each(),这是一个全局函数，可以用于遍历对象和数组。

4.$.ajax()方法

$.ajax()方法是jquery最底层的ajax实现，它可以代替前面所有方法，它的结构为：

$.ajax(options) //只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息

例如，可以用下面jquery代码代替$.getscript()方法：

$(function(){
    $('#send').click(function(){
        $.ajax({
            type:"get",
            url:"test.js",
            datatype:"script"
        });
    });
})

二.序列化元素

1.serialize()方法

做项目过程中表单经常用来提供数据，常规方法是使表单提交到另一个页面，整个浏览器都会被刷新，而使用ajax技术能够异步地提交表单，并将服务器返回的数据显示在当前页面中。前面在说$.get()和$.post()方法的时候，为了获取姓名和内容，必须将字段的值逐个添加到data参数中，但是如果表单元素特别复杂，这种就会增加工作量，jquery提供了一个简化的方法—serialize().它作用于一个jquery对象，能够将dom元素内容序列化为字符串，用于ajax请求，可以将$.get() 方法程序改为如下：

$("#send").click(function(){
    $.get("get1.php",$("#form1").serialize() , function(data,textstatus){
        $("#restext").html(data);
    });
});

因为serialize()方法作用于jquery对象，所以不光只有表单能使用它，其他选择器选取的元素也都能使用它，例：

$(":checkbox,:radio").serialize();

2.serializearray()方法

serializearray()方法与serialize()方法类似，但它不是返回字符串，而是将dom元素序列化后，返回json格式的数据：

var fields=$(":checkbox,:radio").serializearray();
console.log(fields);  //用firebug输出

既然是一个对象，那么就可以使用$.each()函数对数据进行迭代输出。

3.$.param()方法

它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化：

var obj={a:1,b:2,c:3};
var k=$.param(obj);
alert(k);  //输出a=1&b=2&c=3

三.jquery中的ajax全局事件

jquery简化ajax操作不仅体现在调用ajax方法和处理响应方面，而且还体现在对调用ajax方法的过程中的http请求的控制。通过jquery提供的一些自定义全局函数，能够为各种与ajax相关的事件注册回调函数。例如，当ajax请求开始时，会触发ajaxstart()方法的回调函数；当ajax请求结束时，会触发ajaxstop()方法的回调函数，这些方法都是全局方法。所以在加载的过程中，要给用户提供一些提示和反馈信息。

jquery的ajax全局事件中的其他方法：

ajaxcomplete(callback)—ajax请求完成时执行的函数

ajaxerror(callback)—ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递

ajaxsend(callback)—ajax请求发送前执行

ajaxsuccess(callback)—ajax请求成功时执行的函数