jQuery提供了6个简化AJAX操作的函数，每个都可以代替元素AJAX中的四步代码！
(1)$('xxx').load() jQuery对象函数
(2)$.get() jQuery全局函数
(3)$.post() jQuery全局函数
(4)$.getScript() jQuery全局函数
(5)$.getJSON() jQuery全局函数
(6)$.ajax() jQuery全局函数
1.jQuery中对AJAX操作的封装函数之一——load
用法：
$('选择器').load( 'x.php' ,[data], [fn] )
作用：
使用XHR发起异步的请求，获取服务器端返回的html片段，把xhr.responseText设置为当前选定元素的innerHTML。响应成功完成后，会自动调用第三个回调函数。
不足：服务器返回必须是HTML片段！响应内容会替换掉当前选定元素中已有的内容！
演示：异步加载全站的页头和页尾
$(function(){
$('div#header').load('header.php');
$('div#footer').load('footer.php');
})
2.jQuery中对AJAX操作的封装函数之二——$.get
用法：
$.get( 'x.php' ,[data], function(txt, msg, xhr){ } )
$.get( 'x.php' ,'uname=tom&age=20', function(txt, msg, xhr){ } )
$.get( 'x.php' ,{uname:'tom', age:20} , function(txt, msg, xhr){ } )
作用：
创建XHR发起异步的GET请求，第二个参数是可选的请求数据(键值对形式或者对象形式)，获取服务器端的响应消息，调用第三个回调函数（相当于之前成功异步请求，并对请求进行的的doResponse），在此回调函数中对响应主体进行处理。
练习：页面加载完成后，异步请求表格中的批量数据
(1)编写SQL：数据库-mymovie，表-movie
(2)编写PHP：movie_select_all.php，以JSON格式向客户端返回所有的电影记录 '[{},{},{}]'
(3)编写HTML：movie_select_all.html，当页面加载完后，异步请求所有的电影记录，拼接在TABLE中 $.get('x.php', doResponse)
jQuery中对AJAX操作的封装函数之三——$.post
用法：
$.post( 'x.php' ,data, function(txt, msg, xhr){ } )
$.post( 'x.php' ,'uname=tom&age=20', function(txt, msg, xhr){ } )
$.post( 'x.php' ,{uname:'tom', age:20} , function(txt, msg, xhr){ } )
作用：
创建XHR发起异步的POST请求，第二个参数是必需的请求数据(键值对形式或者对象形式)，获取服务器端的响应消息，调用第三个回调函数（相当于之前的doResponse），在此回调函数中对响应主体进行处理。
练习：电影数据加载完成后，当用户点击某个电影的“删除”，异步提交要删除的影片编号，实现删除功能
步骤：
(1)编写SQL
(2)编写PHP：movie_delete.php，接收客户端提交的mid，执行删除，从数据中删除该电影，返回'{"msg":"succ","affectedRows":1}' 或 '{"msg":"err", "sql":"DELETE...."}'
提示：PHP中的关联数组会被json_encode()编码为JSON对象
(3)修改影片列表页，点击某个“删除”，异步提交要删除的影片编号，实现影片删除
提示：为DOM树上后添加的元素绑定事件监听必须用“事件代理”
4.jQuery中对AJAX操作的封装函数之四——$.getScript
用法：
$.getScript( 'x.php' ,[data], [fn])
作用：
创建XHR发起异步的GET请求，第二个参数是可选的请求数据(键值对形式或者对象形式)，第三个参数，回调函数可选的，表示响应成功之后的回调。要求服务器端返回的必须是application/javascript类型的响应，该方法会自动调用eval(xhr.responseText)进行执行。
5. jQuery中对AJAX操作的封装函数之五——$.getJSON
用法：
$.getJSON( 'x.php' ,[data],function(result, msg, xhr){ })
作用：
创建XHR发起异步的GET请求。要求服务器端返回的必须是application/json类型的响应，该方法会自动调用JSON.parse(xhr.responseText)进行解析，再调用第三个参数——响应成功的回调函数处理响应结果。
|
$.getJSON()不论响应消息内容类型声明什么，都会调用JSON.parse(xhr.responseText) |
|
$.get()只有当响应消息内容类型声明为application/json，才会调用JSON.parse(xhr.responseText) |
演示：页面加载完成后，异步请求服务器端的实现了国际化的欢迎消息(i18n)
|
$.getScript()不论响应消息内容类型声明什么，都会调用eval(xhr.responseText) |
|
$.get()只有当响应消息内容类型声明为application/javascript，才会调用eval(xhr.responseText) |
jQuery中对AJAX操作的封装函数之五——$.ajax —— 重点！
用法：
$.ajax( {
type: 'GET', //POST/PUT/DELETE/HEAD
url: 'x.php',
data: 'k=v'或{k:v} //要提交的请求数据
beforeSend: fn, //请求发送之前的回调函数
success: fn, //响应成功的回调函数
error: fn, //响应失败的回调函数
complete: fn //响应完成的回调函数-不论成败
} )
|
var xhr = new XMLHttpRequest() xhr.onreadystatechange = function(){ if(xhr.readyState===4){ if(xhr.status===200){ success(); }else { error(); } complete(); } } xhr.open('GET','x.php?k=v', true) beforeSend(); xhr.send(null); |
|
响应成功回调顺序： beforeSend => success => complete |
|
响应失败回调顺序： beforeSend => error => complete |
作用：
此函数是jQuery中万能的AJAX调用函数！前面5个方法都是该方法的简化版本。
创建XHR发起异步的GET请求。要求服务器端返回的必须是application/json类型的响应，该方法会自动调用JSON.parse(xhr.responseText)进行解析，再调用第三个参数——响应成功的回调函数处理响应结果。