JQuery对AJAX操作的封装

1.jQuery对AJAX操作的封装——load

用法：$(‘div’).load(‘1.php’,[‘k=v’],[fn])：$.load()是JQ对js dom中onload函数的封装

作用：创建XHR对象，发起异步请求，把成功响应消息的主体数据(必需是text/html)，追加为当前选定元素的innerHTML。

注意：响应消息必需是HTML片段！当前选定元素已有内容会被替换！

演示：异步加载全站所有页面都要使用的页头和页尾

2.jQuery对AJAX操作的封装——$.get

用法：$.get('2.php', ['k=v'], fn)

作用：创建XHR对象，发起异步GET请求，得到成功的响应消息调用指定的回调方法。

具体用法：

$.get(
    'check_uname.php',//借口
    {uname:'tom',age:20}, //参数
    function(data, msg, xhr){  //回调
        //data就是响应主体数据
    }
)

3.jQuery对AJAX操作的封装——$.post

用法：$.post('3.php', {k:v,k:v}, fn)

扫描二维码关注公众号，回复： 2492544 查看本文章

作用：创建XHR对象，发起异步POST请求，得到成功的响应消息调用指定的回调方法。

具体用法：

$.post(
    'register.php',
    {uname:'tom',upwd:'123'}, 
    function(data, msg, xhr){  
        //data就是响应主体数据
    }
)

//$.post(url, data, fn)的底层实现：
jQuery.post = function(url,data,fn){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState===4){
      if(xhr.status ===200){  
        fn(xhr.responseText,'success',xhr);  
      }
    }
  }
  3 xhr.open('post', url, true);
  4 xhr.send( data );
}

扩展知识：
表单序列化——把表单中所有带name属性的输入域的值拼接为特殊形式的字符串，用于请求消息中的主体数据。

var data = $('#loginForm').serialize();
//返回值形如： k1=v1&k2=v2&...
//其中k就是表单中输入域的name

4.jQuery对AJAX操作的封装——$.getScript

用法：$.getScript('4.php', [{k:v,k:v}], [fn])

作用：创建XHR对象，发起异步GET请求，得到成功的响应消息——必需是application/javascript类型，自动调用eval()执行返回的JS脚步(即使响应消息声明的内容类型不是JS)。

具体用法：

`$.getScript( '4.php' )`

5. jQuery对AJAX操作的封装——$.getJSON

用法：$.getJSON('5.php', [{k:v,k:v}], fn)

作用：创建XHR对象，发起异步GET请求，得到成功的响应消息——必需是application/json类型，自动调用JSON.parse()把服务器返回的JSON字符串解析为JS对象。

6.jQuery对AJAX操作的封装——$.ajax

使用方法：

$.ajax( {
    type: 'GET',   //POST/PUT/DELETE...
    url: 'x.php',
    data: 'k=v&k=v',    //{k:v, k:v}
    beforeSend: fn,     //在请求发送前的回调
    success: fn,        //响应成功后的回调
    error: fn,          //响应失败后的回调
    complete: fn        //响应完成后(不论成败)的回调
} )

成功的调用： beforeSend() => success() => complete()
失败的调用： beforeSend() => error() => complete()

对应于原生AJAX：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            success();
        }else {
            error();
        }
        complete()
    }
}
xhr.open()
beforeSend();
xhr.send()

总结jQuery中封装的AJAX操作：

(1) $('div').load(url)

发起GET或POST请求，接收html响应

(2) $.get(url, data, fn(data,msg,xhr){})

发起GET请求，接收任意响应，自动根据内容类型执行特定的操作，如eval()/JSON.parse()

(3) $.post(url, data, fn(data,msg,xhr){})

发起POST请求，接收任意响应，自动根据内容类型执行特定的操作，如eval()/JSON.parse()

(4) $.getScript( url )

发起GET请求，接收script响应，自动eval()

(5) $.getJSON( url, data, fn(data,msg,xhr){})

发起GET请求，接收JSON响应，自动JSON.parse()

(6) $.ajax( )

发起任意类型请求，接收任意类型响应，处理成功/失败的响应——万能AJAX调用函数！

JQuery对AJAX操作的封装

总结jQuery中封装的AJAX操作：

猜你喜欢