首页 > 代码库 > jQuery中对AJAX操作的封装函数
jQuery中对AJAX操作的封装函数
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)进行解析,再调用第三个参数——响应成功的回调函数处理响应结果。
jQuery中对AJAX操作的封装函数