jQuery对AJAX操作的封装

jQuery对AJAX操作的封装

1.jQuery对AJAX操作的封装——load()
$(‘…’).load(url, [data], [fn]) 异步加载指定URL返回的数据(必需是text/html)，挂载为当前选定元素的innerHTML 示例：仿写GoogleSuggest，搜索建议 服务器端： header(‘Content-Type: text/html’); 客户端：$(‘#suggest ul’).load(‘1.php?kw=xx’, fn);
load()函数的局限性：(1)服务器只能返回HTML片段 (2)此方法只能把返回结果加载为当前选定元素的innerHTML,已有内容全部会被清除 (3)响应成功时，才有效；失败的情况下，没有任何处理机制

2.jQuery对AJAX操作的封装——$.ajax()
使用方法：

$.ajax( {
type: 'GET/POST/PUT/DELETE',
url: 'xx.php',
data: 'k1=v1&k2=v2' | {k1:v1,  k2:v2},
dataType: 'text/html/script/xml/json/jsonp',
beforeSend: fn,
success: fn,
error: fn,
complete: fn
} )

在jQuery提供的所有AJAX函数中，提交的数据可以有两种形式：
(1)HTTP协议规定的标准格式： ‘k1=v1&k2=v2…’
(2)JS对象格式：{ k1: v1, k2:v2 } jQuery在发送此格式的数据之前会自动调用$.param()函数，将JS对象改为第一种格式
示例：分多次异步加载员工数据
服务器端：
header(‘Content-Type: application/json’);
客户端：

$.ajax({
type: 'GET',
url: '2.php',
dataType: 'json',
success: function(data){
}
});

3.jQuery对AJAX操作的封装——$.get()

$.get()是$.ajax()的一个简化版本。
用法：$.get(url, [data], [sccessFn])$.get(‘2.php’, function(data){
})

4.jQuery对AJAX操作的封装——$.post()

$.post( )是$.ajax()的一个简化版本。
示例：实现表单数据的异步提交

$.post(
'4.php' , 
'k1=v1&k2=v2'/{k1:v1,k2:v2},## 标题 ##  
function(data){
}
)

提示：(1)若请求数据是对象格式，jQuery底层会自动将其转换为符合HTTP标准的数据格式(键值对形式) (2)$.post底层会自动修改Content-Type请求消息的头部为application/x-www-form-urlencoded

5.jQuery对AJAX操作的封装——$.getJSON()$.getJSON()是$.ajax()的一个简化版本。 发起异步的GET请求，获取服务器端返回的JSON响应，并自动调用JSON.parse()方法把服务器返回的JSON字符串解析为JS对象。 用法：$.getJSON(‘xx.php’, data, fn)

6.jQuery对AJAX操作的封装——$.getScript()$.getScript()是$.ajax()的一个简化版本。 发起异步的GET请求，获取服务器端返回的JS响应，并自动调用eval()方法，执行服务器端范围的字符串数据。 用法：$.getJSON(‘xx.php/xx.js’)

7.补充话题：使用AJAX异步提交表单
(1)方式一：手工收集所有的用户输入，封装为大的“k1=v1&k2=v2…”键值对形式，使用$.post(url, data,fn)把数据提交给服务器 (2)方式二：表单序列化：$('#myform').serialize( ); 其返回值就是“k1=v1&k2=v2...”键值对形式，再使用$.post发起异步请求即可。
(3)方式三：使用jQuery Form插件提供的ajaxSubmit()函数，用法：

$('#myform').ajaxSubmit({
type: 'GET/POST',
url: 'xx.php',
dataType: 'json',
success: fn,
clearForm: true,
resetForm: true
});  //此函数会自动把选定的表单进行序列化并异步提交