首页 > 代码库 > 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操作的封装函数