jQuery中对AJAX操作的封装函数

Posted 2020-09-08 Sam_camel

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