jquery load回调封装_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)进行解析，再调用第三个参数——响应成功的回调函数处理响应结果。