jQuery与Ajax应用
一、Ajax的优势和不足
1.Ajax的优势：
（1）不需要插件支持：不需要任何浏览器插件就可以被绝大多数浏览器支持
（2）优秀的用户体验：能在不刷新整个页面的前提下更新数据
（3）提高web程序的性能：按需发送数据
（4）减轻服务器和带宽的负担：在客户端创建Ajax引擎，把一些工作转移到客户端。
2.Ajax的不足
（1）浏览器对XMLHttpRequest对象的支持度不足：许多浏览器不支持XMLHttpRequest
（2）破坏浏览器前进、“后退”按钮的正常功能：这些按钮会失效
（3）对搜索引擎的支持的不足：爬虫程序无法理解javascript代码
（4）开发和调试工具的缺乏：缺少javascript开发和调试工具
二、Ajax的XMLHttpRquest
Ajax的核心是XMLHttpRquest对象，它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。
三、安装Web环境——Appserv
1.下载AppServ
下载地址为：http://www.appservnetwork.com
2.安装AppServ
安装AppServ非常简单，只要连续轻松的单击“next”按钮，就可以
四、第一个Ajax例子
在解除jQuery的Ajax操作之前，先看一个用传统的javascript实现的Ajax例子。例子描述：单击一个按钮，然后通过传统javascript的Ajax的方式从服务器端取回一个“Hello Ajax!”的字符串并显示在页面上。
首先在前台页面中书写HTML代码，代码如下：
<input type = “button” value = “Ajax提交” onclick = ”Ajax() ;”/>
<div id = “resText”></div>
<button>按钮用来触发Ajax，id为“resText”的元素用来显示从服务器返回的HTML文本。接下来完成Ajax()函数。代码如下：
$(function(){
$("#send").click(function(){
$("#resText").load("1.html");
});
})
五、jQuery中的Ajax
jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$post()方法，第3层是$.getScript()和$getJSON()方法。首先介绍第2层的方法，因为使用频率很高
1.load()方法
（1）载入HTML文档
load()方法的结构为：
load( url [ , data] [ , callback])
它接受3个参数：
第一个是string类型的url，表示请求HTML页面的URL地址
第二个是object类型的data（可选），表示发送至服务器的key/value数据
第三个是function类型的callback（可选），表示请求完成时回调的函数，无论请求成功或失败
首先构建一个被load()方法加载并追加到页面中的HTML文件，名字为test.html，HTML代码如下：
<div class = “comment”>
<h6>张三：</h6>
<p class = “para”>沙发.</p>
</div>
<div class = “comment”>
<h6>李四：</h6>
<p class = “para”>板凳.</p>
</div>
<div class = “comment”>
<h6>王五：</h6>
<p class = “para”>地板.</p>
</div>
然后新建一个空白页面，在上面添加两个元素：<button>按钮用来触发Ajax事件，id为“resText”的元素用来显示追加的HTML内容。HTML代码如下：
<input type="button" value="Ajax获取" id = “send">
<div class="comment">已有评论：</div>
<div id = “resText”></div>
接下啦开始编写jQuery代码。等DOM元素加载完毕后，通过单击id为“send”的按钮来调用load()方法，然后将test.html的内容加载到id为“resText”的元素里。
jQuery代码如下：
$(function(){
$(“#send”).click(function(){
$(“#resText”).load(“test.html”) ;
});
});
（2）筛选载入的HTML文档
上面例子是将test.html页面中的内容都加载到id为“resText”的元素里。如果只需要test.html页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。
load方法的URL参数的语法结构为：“url selector”。例如，需要加载test.html页面中class名为“para”的内容，可以使用如下代码：
$(“#resText”).load(“test.html .para”) ;
（3）传递参数
load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式传递，反之则会自动转换为POST方式。
（4）回调参数
对于必须加载完成后才能继续的操作，load()方法提供了回调函数，该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，jQuery代码如下：
$(“#resText”).load(“test.html” , function(responseText , textStatus , XMLHttpRequest){
// responseText ： 请求返回的内容
// testStatus ： 请求状态：success、error、notmodified、timeout4种
// XMLHttpRequest ： XMLHttpRequest对象
})
2.$.get()方法和$.post()方法
$.get()和$.post()方法是jQuery的全局函数。
（1）$.get()方法
$.get()方法使用GET方式来进行异步请求。
它的结构为：$.get(url [ , data] [ , callback ] [ , type ])
$.get()方法参数解释：
|
参数名称 |
类型 |
说明 |
|
url |
String |
请求的HTML页的URL地址 |
|
data（可选） |
Object |
发送至服务器的key/value数据会作为QueryString附加到请求URL中 |
|
callback（可选） |
Function |
载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法 |
|
type（可选） |
String |
服务器端返回内容的格式，包括xml、html、script、json、text和_default |
下面是一个评论页面的HTML代码，通过该段代码来介绍$.get()方法的使用
<form id="form1" action="#">
<p>评论：</p>
<p>姓名：<input type="text" name="username" id="username"></p>
<p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"></p>
</form>
<div class="comment">已有评论：</div>
<div id="resText"></div>
（1）使用参数：
首先要确定请求页面的URL地址。代码如下：
$(“#send”).click(function(){
$.get(“get1.php” data参数，回调函数) ;
}) ;
然后，在提交之前，需要获取“姓名”和“内容”的值作为data参数传递给后台。
代码如下：
$(“#send”).click(function(){
$.get(“get1.php” , {
username : $(“#username”).val() ,
content : $(“#content”).val()
} ，回调函数) ;
}) ;
如果服务器端接收到传递的data数据并成功返回，那么就可以通过会调换函数将返回的数据显示到页面上。
$.get()方法的回调函数只有两个参数，代码如下：
fuction(data , textStatus){
//data : 返回的内容，可以是XML文档、JSON文档、HTML片段等等
//textStatus : 请求状态：success、error、notmodified、timeout4种
}
回调函数只有当数据成功返回后才能被调用。
（2）数据格式：
①HTML片段
由于服务器端返回的数据格式是HTML片段，因此并不需要经过处理就可以将新的HTML片段数据插入到主页中。jQuery代码如下：
$(function(){
$("#send").click(function(){
$.get("get1.php",{
username : $("#username").val(),
content : $("#content").val()
}, function(data , textStatus){
$("#resText").html(daga); //将返回的数据添加到页面上
});
});
})
②XML文档
由于服务器端返回的数据格式是XML文档，因此需要对返回的数据进行处理，处理XML文档与处理HTML文档一样，也可以使用常规的attr()、find()、filter()以及其他方法。jQuery代码如下：
$(function(){
$("#send").click(function(){
$.get("get1.php",{
username : $("#username").val(),
content : $("#content").val()
}, function(data , textStatus){
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var txtHtml = "<div class = 'comment'><h6>"
+ username + ":</h6><p class='para'>"
+ content + "</p></div>";
$("#resText").html(txtHtml);
});
});
})
XML文档的体积相对较大，解析和操作它们的速度要慢一些。
③JSON文件
JSON文件非常简洁易读，与XML文档一样可以方便的被重用。
由于服务器端返回的数据格式是JSON文件，因此需要对返回的数据进行处理之后，才可以将新的HTML数据添加到主页中。jQuery代码如下：
$(function(){
$("#send").click(function(){
$.get("get1.php",{
username : $("#username").val(),
content : $("#content").val()
}, function(data , textStatus){
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);
},"json");
});
})
将$.get()方法的第4个参数设置为“json”来代表期待服务器端返回的数据格式。
通过对3中数据格式的优缺点进行分析，可以得知在不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据一般来说是最简单的；如果数据需要重用，那么JSON文件是不错的选择，它在性能和文件大小方面具有优势；而当远程应用程序未知时，XML文档时明智的选择。
2.$ .post()方法
$.get()方法与$.post()方法的区别：
|
GET请求 |
POST请求 |
|
GET请求会将参数跟在URL后进行传递 |
POST请求则是作为HTTP消息的实体内容发送给Web服务器 |
|
GET方式对传输的数据有大小限制（通常不能大于2KB） |
POST方式传递的数据量要比GET方式大得多（理论上不受限制） |
|
GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号密码等。在某种情况下，GET方式会带来严重的安全性问题 |
POST方式相对来说可以避免这些问题 |
|
在PHP中，GET方式的数据可以用$_GET[]获取，也可以用$_REQUEST[]获取 |
POST方式可以用$_POST[]获取，也可以用$_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);
});
});
})
另外，当load()方法带有参数传递时，会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能。代码如下：
$(function(){
$("#send").click(function(){
$("#resText").load("post1.php",{
username : $("#username").val(),
content : $("#content").val()
})
});
})
3.$.getScript()方法和$.getJson()方法
（1）$.getScript()
有时候，在页面初次加载时就取得所需的全部javascript文件是完全没有必要的。为此jQuery提供了$.getScript()方法来直接加载.js文件，与加载一个HTML片段一样简单方便，并且不需要对javascript文件进行处理，javascript文件会自动执行。
jQuery代码如下：
$(function(){
$(“#send”).click(function(){
$.getScript(‘test.js’);
});
})
与其他方法一样，$.getScript()方法也有回调函数，它会在javascript文件成功载入后运行。例如想载入jQuery官方颜色动画插件，成功后给元素绑定颜色变化动画可以用到$.getScript()方法的回调函数。代码如下：
$(function(){
$.getScript(‘jquery.color.js’,function(){
$(‘#go’).click(function(){
$(“.block”).animate({backgroundColor : ‘pink’} , 1000)
.animate({backgroundColor : ‘blue’} , 1000) ;
});
});
});
（2）$.getJSON()方法
$.getJSON()方法用于加载JSON文件，与$.getScript()方法的用法相同。
jQuery代码如下：
$(function(){
$(“#send”).click(function(){
$.getJSON(‘test.json’) ;
}) ;
})
加载JSON文件之后，javascript对返回的数据要进行处理就要调用回调函数。代码如下：
$(function(){
$(“#send”).click(function(){
$.getJSON(‘test.json’ , function(data){
// data ：返回的数据
}) ;
}) ;
})
jQuery使用了一个通用的遍历方法$.each()，可以用于遍历对象和和数组。$.each()函数不同于jQuery对象的each()方法，它是一个全局函数，不操作对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。代码如下：
$(function(){
$(“#send”).click( function(){
$.getJSON(‘test.json’ , function(data){
$(“#resText”).empty();
var html = ‘ ‘ ;
$.each(data , function(commentIndex , comment){
html += ‘<div class = “comment”><h6>’
+ comment[‘username’] + ‘:</h6><p class = “para”>’
+ comment[‘content’] + ‘</p></div>’ ;
}) ;
$(‘#resText’).html(html) ;
});
});
})
4.$.ajax()方法
$.ajax()方法是jQuery最底层的Ajax实现，它们的结构是：
$.ajax(options)
该方法只有1个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选的。
六、序列化元素
1.serialize()方法
与jQuery其他方法一样，serialize()方法也是作用于一个jQuery对象，它能够将DOM元素的内容序列化为字符串，用于Ajax请求。
$(“#send”).click(function(){
$.get(“get1.php” , $(“#form1”).serialize() , function(data , textStatus){
$(“#resText”).html(data) ;
}) ;
}) ;
2.serializeArray()方法
该方法不是返回字符串而是将DOM元素序列化之后返回JSON格式的数据。jQuery代码如下：
var fields = $(“: checkbox , : radio”).serializeArray() ;
console.log(fields) ;
3.$.param()方法
它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。比如将一个普通的对象序列化：
var obj = {a : 1 , b : 2 , c : 3} ;
var k = $.param(obj) ;
alert(k) ;