JQuery对AJAX操作的封装

时间:2022-03-31 13:34:15

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)

作用:创建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调用函数!