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的div元素用来显示追加的HTML元素；

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

$(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:
f958
请求状态：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方式提交的所有数据都可以通过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请求成功时执行的函数