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: 请求状态：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方式提交的所有数据都可以通过 R E Q U E S T [ ] 来 获 取 ； 由 于 P O S T 和 G E T 方 式 提 交 的 所 有 数 据 都 可 以 通 过 _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请求成功时执行的函数