《锋利的jQuery》要点归纳（五）jQuery与ajax的应用（上）
一、jQuery中的Ajax
1 load()方法 load(url[,data][,callback])
url: string类型，请求html页面的url地址
data：object类型，发送至服务器的key/value数据
callback：function类型，请求完成时的回调函数，无论请求成功或失败
1.1 载入html文档
首先构建一个被load()加载并追加到页面中的html文件，取名为test.html，如下：
< div class ="comment" >
< h6 > 项目1： </ h6 >
< p class ="para" > 值1 </ p >
</ div >
< div class ="comment" >
< h6 > 项目2： </ h6 >
< p class ="para" > 值2 </ p >
</ div >
< div class ="comment" >
< h6 > 项目3： </ h6 >
< p class ="para" > 值3 </ p >
</ div >
触发ajax页面和jQuery代码如下：
< input type ="button" id ="send" value ="ajax获取" />
< div class ="comment" > 所有项目： </ div >
< div id ="resText" ></ div >
< script >
$( function (){
$( " #send " ).click( function (){
$( " #resText " ).load( " test.html " );
});
});
</ script >
执行如上代码后，test.html的内容被加载进#resText中。
1.2 筛选载入的html文档
<!-- 在载入的文件名后跟选择器 --> $("#resText").load("test.html .para");
1.3 传递方式
load()方法的传递方式根据参数data自动指定，如果没有参数传递，则采用GET方式传递；反之，则会自动转换为POST方式。
$( " #resText " ).load( " test.php " ,{name: " rain " ,age: " 22 " }, function (){
// ...
});
1.4 回调参数
加载完成（无论请求成败）后继续的操作。提供3个参数：请求返回的内容、请求状态、XMLHttpRequest对象。
$( " #resText " ).load( " test.html " , function (responseText,textStatus,XMLHttpRequest){
// responseText: 请求返回的内容
// textStatus: 请求状态：success、error、notmodified、timeout 4种
// XMLHttpRequest: XMLHttpRequest对象
});
2 $.get()方法和$.post()方法
2.1 $.get()
$.get(url[,data][,callback][,type])
| 参数名称 |
类型 |
说明 |
| url |
String |
请求的HTML页的URL地址 |
| data（可选） |
Object |
发送至服务器的key/value数据回作为QueryString附加到请求URL中 |
| callback（可选） |
Function |
载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法 |
| type（可选） |
String |
服务器端返回内容的格式，包括xml、html、script、json、text和_default |
$.get()方法的回调函数注释：
$.get()方法的回调函数只有两个参数data和textStatus，且回调函数只有当数据成功返回（success）后才被调用，和load()方法不同
function (data,textStatus){
// data:返回的内容，可以是XML文档，JSON文件，HTML片段等等
// textStatus:请求状态：success、error、notmodified、timeout4种
}
例（P182）
< form id ="form1" action ="#" >
< p > 评论 </ p >
< p > 姓名 < input type ="text" name ="username" id ="username" /></ p >
< p > 内容 < textarea name ="content" id ="content" ></ textarea ></ p >
< p >< input type ="button" id ="send" value ="提交" /></ p >
</ form >
< div class ="comment" > 已有评论 </ div >
< div id ="resText" ></ div >
2.1.1 使用参数
$( " #send " ).click( function (){
$.get( " get1.php " ,{ // 确定请求页面的URL地址
username:$( " #username " ).val(),
content:$( " #content " ).val() // 将姓名和内容的值作为data参数传递给后台
},回调函数);
});
2.1.2 数据格式
HTML片段
$( function (){
$( " #send " ).click( function (){
$.get( " get1.php " ,{
username:$( " #username " ).val(),
content:$( " #content " ).val()
}, function (data,textStatus){
$( " #resText " ).html(data); // 将返回的数据添加到页面上
});
});
});
XML文档（需要在服务端设置Content-Type类型：header("Content-Type:text/xml; charset=utf-8");//php）
$( function (){
$( " #send " ).click( function (){
$.get( " get2.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); // 将返回的数据添加到页面上
});
});
});
JSON文件
$( function (){
$( " #send " ).click( function (){
$.get( " get3.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()方法的第四个参数（type）为"json"来代表期待服务器端返回的数据格式
});
});
2.2 $.post()
与$.get()的区别
get请求会将参数跟在URL后进行传递，而post请求则是作为HTTP消息的实体内容发送给web服务器。
get方式对传输的数据有大小限制(<=2kb)，而使用POST方式传递的数据量不受限制
get方式请求的数据会被浏览器缓存起来，引起安全性问题
get方式和post方式传递的数据在服务器端的获取也不相同。php中，get方式的数据可以用$_GET[]获取，而post方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。
由于post和get方式提交的所有数据都可以通过$_REQUEST[]来获取，因此只需要改变jQuery函数，就可以在get请求和post请求之间切换。（P186）
另外，当load()方法带有参数传递时，会使用post方式发送请求。因此也可以使用load()方法来完成同样的功能。如：
$( function (){
$( " #send " ).click( function (){
$( " #resText " ).load( " post1.php " ,{
username:$( " username " ).val(),
content:$( " #content " ).val()
});
});
});
3 $.getScript()方法和$.getJson()方法（P187）
3.1 $.getScript() 动态加载js文件（可以加回调函数）
$( function (){
$( " #send " ).click( function (){
$.getScript( " test.js " );
});
});
3.2 $.getJSON() 动态加载json文件，加载后的数据可通过回调函数处理
$( function (){
$( " #send " ).click( function (){
$.getJSON( " test.json " , function (data){
// data:返回的数据
});
});
});
遍历数据（P189）：
$( function (){
$( " #send " ).click( function (){
$.getJSON( " test.json " , function (data){
$( " #resText " ).empty();// 返回数据成功后，首先清空id为resText的元素的内容，以便重新构造新的html
var html = "" ;
$.each(data, function (commentIndex,comment){// $.each()函数遍历对象和数组//（以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。//回调函数拥有2个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容）
html += " <div class='comment'><h6> " + comment[ ' username ' ]+ " :</h6><p class='para'> " + comment[ ' content ' ] + " </p></div> " ;// 将遍历出来的内容构建成html代码拼接起来
});
$( " #resText " ).html(html); // 将构建好的html添加到id为resText的元素中
});
});
});
引申：JSONP（P190）
JSONP允许在服务器端集成Script tags返回至客户端，通过JavaScript Callback的形式实现跨域访问。（略）
4 $.ajax()方法（P191）
$.ajax(options) 该方法只有1个参数
常用参数表（参数详细说明见原书P192）
| 参数名称 |
类型 |
说明 |
| url |
String |
发送请求的地址，默认为当前页地址 |
| type |
String |
请求方式（POST或GET，默认为GET） |
| timeout |
Number |
设置请求超时时间 |
| data |
Object或String |
发送到服务器的数据 |
| dataType |
String |
预期服务器返回的数据类型，可用类型有：xml、html、script、json、jsonp、text |
| beforeSend |
Function |
发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头 |
| complete |
Function |
请求完成后调用的回调函数（请求成功或失败时均调用） |
| success |
Function |
请求成功后调用的回调函数 |
| error |
Function |
请求失败时被调用的函数 |
| global |
Boolean |
默认为true。表示是否触发全局Ajax事件 |
$.ajax()方法是jQuery最底层的Ajax实现，可以用来代替前面所有的方法
如使用$.ajax()方法代替$.getScript()方法：
$( function (){
$( " #send " ).click( function (){
$.ajax({
type: " GET " ,
url: " test.js " ,
dataType: " script "
});
});
});
再如使用$.ajax()方法代替$.getJSON()方法：
$( function (){
$( " #send " ).click( function (){
$.ajax({
type: " GET " ,
url: " test.json " ,
dataType: " json " ,
success: function (data){
$( " #resText " ).empty();
var html = "" ;
$.each(data, function (commentIndex,comment){
html += " <div class='comment'><h6> " + comment[ " username " ]+ " :</h6><p class='para'> " + comment[ " comment " ] + " </p></div> " ;
});
$( " #resText " ).html(html);
}
});
});
});