首页 专题 H5案例 前端导航 UI框架

JQuery学习笔记整理:AJAX

阅读 1705 评论 0
jQuery中封装了很多与AJAX请求相关的方法,这些方法能够让你更轻松地处理AJAX请求,在这里,并不打算讲解AJAX请求的原理,如需了解:可看这里:《JavaScript学习笔记整理(14):AJAX》。

目录
  1. $.get()、$.post()
  2. load()、$.getScript()、$.getJSON()
  3. $.ajax()

1、$.get()、$.post()

$.get()   使用HTTP GET方法发起Ajax请求

$.post()  使用HTTP POST方法发起Ajax请求

(1)$.get()
$.get()使用HTTP GET方法发起Ajax请求;$.post() 使用HTTP POST方法发起Ajax请求。

$.get( url [, data ] [, success ] [, type ] );

$.post( url [, data ] [, success ] [, type ] )

参数说明:
url : 指定请求的目标URL
data : 发送请求传递的数据
success : 请求成功时执行的回调函数,它会传递三个参数:第一个是response(请求返回的数据),第二个是请求状态文本(例如:success、notmodified、error、timeout、abort等),第三个是当前jqXHR对象(经过jQuery封装的XMLHttpRequest对象)。
type : 指定请求返回的数据类型,可以是xml、html、script、json、jsonp、text。如果省略此参数,jQuery会自动猜测返回数据类型,可能是:xml、json、script或html。

$.get( 'example.php?id=1' );

$.get( 'example.php', 'id=1' );  //和第一条等价

$.get( 'example.php', {id:1} ); //和第一条等价


$.get( 'example.php', {id:1}, function(response,textStatus,jqXHR){

  //response是请求返回数据

  //textStatus可能是success、notmodified

},'json');  //指定返回数据的类型是JSON格式,jQuery将会尝试将返回数据转换为JSON对象。

$.get()和$.post()两个方法的用法完全一样,底层也都是使用$.ajax()来实现的,但是两者请求方式不一样,前者是GET请求,后者是POST请求。

2、load()、$.getScript()、$.getJSON()

(1)load()
load()方法仅用来从服务器获取HTML数据,并替换当前匹配元素内容。

jQuery.load( url [, data ] [, complete] );

参数说明:
url : 指定请求的目标URL
data : 发送请求传递的数据
complete : 请求完成(不管成功或失败)后执行的回调函数,它会传递三个参数:第一个是response(请求返回的数据),第二个是请求状态文本(例如:success),第三个是当前jqXHR对象(经过jQuery封装的XMLHttpRequest对象)。

load()会返回jQuery对象本身。

<div class="box"></div>


$('.box').load('example.php');  //加载example.php的html内容来替换当前文档的每一个div.box元素

$('.box').load('example.php?id=1');

$('.box').load('example.php',{id: 1});

$('.box').load('example.php',{id: 1},function(response,textStatus,jqXHR){

  //response 是返回的原始文本数据

  //textStatus 是请求状态文本

  //jqXHR是经过jQuery封装的XMLHttpRequest对象。

});

load()方法还有一个额外的用法:

$('.box').load('example.php?id=1 #box');

//会从返回来的html内容中获取id为box的元素来替换所有div.box元素。


注意:jQuery会自动过滤load()返回来的html内容中的DOCTYPE以及html、head、body的标签后再进行替换,而且如果jQuery对象中没有匹配元素,load()不会执行,既不会发送ajax请求,也不会执行回调函数。

(2)$.getScript()
$.getScript()方法用来载入JavaScript文件(以HTTP GET形式),并在全局作用域下执行其中的语句,而且它可以加载跨域的JS文件。

jQuery.getScript( url [, complete] );

参数说明:
url : 指定请求的目标URL
complete : 请求成功后执行的回调函数,它会传递三个参数:第一个是response(请求返回的数据),第二个是请求状态文本(例如:success),第三个是当前jqXHR对象(经过jQuery封装的XMLHttpRequest对象)。

$.getScript('example.js');

注意:如果多次加载相同URL的js文件,每次都会重新加载该js文件,因为getScript()函数会在js文件的URL后添加一个时间戳参数后缀,从而避免浏览器获取缓存的js文件。

(3)$.getJSON()
$.getJSON()方法用来从服务器获取JSON数据(以HTTP GET形式)。

jQuery.getJSON( url [, data ] [, complete] );

参数说明:
url : 指定请求的目标URL
data : 发送请求传递的数据
complete : 请求成功后执行的回调函数,它会传递三个参数:第一个是response(请求返回的数据),第二个是请求状态文本(例如:success),第三个是当前jqXHR对象(经过jQuery封装的XMLHttpRequest对象)。

(4)使用JSONP
JSONP支持跨域加载数据。

//首先创建一个处理数据的函数

function processJSONP(data){}


//然后向服务器发起请求

$.getJSON( 'example.php?callback=processJSONP&id=1', function(response,textStatus,jqXHR){

  //返回的数据会是这样的格式:processJSONP({"name": "tg"});

});

注意上面的请求地址格式(加上了 callback=processJSONP )。

注意:因为jQuery中的所有关于AJAX方法在默认情况下都是异步的(如果将async设置为false就是同步),所以如果你要对AJAX方法返回来的数据进行操作时,就需要在complete回调函数里操作。


3、$.ajax()

上面都是介绍jQuery提供的一些便捷的AJAX方法(底层都是通过$.ajax()实现),接下来了解一下jQuery Ajax底层的API。


语法

$.ajax( url [, settings ])

参数说明:

 url :指定请求的目标URL

 settings : 一个以键值对组成的请求设置,用来指定发送请求的可选参数。


settings中的可选参数说明:

accepts  发送的内容类型请求头,用于告诉服务器——浏览器可以接收服务器返回何种类型的响应,默认:取决于数据类型dataType


async  指定是否是异步请求,默认是true。当设置为true(同步请求)时,请求时将锁定浏览器,直到获取远程数据后才会执行其他操作。


beforeSend  指定在Ajax请求发起之前执行的回调函数,该函数还传入2个参数,第一个是jqXHR对象,第二个是当前settings对象。如果该函数返回false,将会取消本次请求。


cache 指定是否缓存URL请求,默认为true(dataType为'script'或'jsonp'时,则默认为false)。如果设为false将强制浏览器不缓存当前URL请求。该参数只对HEAD、GET请求有效。


complete  指定在Ajax完成(不管成功或失败)后执行的回调函数,该函数会传入2个参数:第一个是jqXHR对象,第二个是表示请求状态的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。


contents  一个以"{字符串:正则表达式}"配对的对象,用来确定jQuery将如何解析响应,给定其内容类型。


contentType  使用指定的内容编码类型将数据发送给服务器,默认是'application/x-www-form-urlencoded; charset=UTF-8'。


context  用于设置Ajax相关回调函数的上下文对象(也就是函数内的this指针)。


converters  一个数据类型到数据类型转换器的对象。每个转换器的值是一个函数,返回经转换后的请求结果。默认: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}


crossDomain  指定是否是跨域请求,默认(同域请求为false,跨域请求为true)。如果想强制使用跨域请求(如JSONP形式),就要设置为true。


data  指定发送到服务器的数据,它将自动转为字符串。如果是GET请求,它将被添加到URL后面。


dataFilter  指定处理响应的原始数据的回调函数。该函数还有两个参数:其一表示响应的原始数据的字符串,其二是dataType属性字符串。


dataType  指定返回的数据类型,如不设置,jQuery会智能猜测(可能是xml、json、script或html)。


error    指定Ajax请求失败之后执行的函数。该函数还传入3个参数:第一个是jqXHR对象、 第二个是请求状态字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 第三是错误信息字符串(响应状态的文本描述部分,例如'Not Found'或'Internal Server Error')。跨域脚本和跨域JSONP请求不会调用该函数。


global  指定是否触发全局Ajax事件,默认true。如果设为false,将会阻止全局事件处理函数被触发,例如ajaxStart()和ajaxStop()。它可以用来控制各种Ajax事件。


headers  一个额外的"{键:值}"对映射到请求一起发送。此设置会在beforeSend 函数调用之前被设置 ;因此,请求头中的设置值,会被beforeSend 函数内的设置覆盖 。


ifModified  允许当前请求仅在服务器数据改变时获取新数据(如未更改,浏览器从缓存中获取数据)。它使用HTTP头信息Last-Modified来判断。从jQuery 1.4开始,他也会检查服务器指定的'etag'来确定数据是否已被修改。


isLocal  允许当前环境被认定为“本地”,(如文件系统),即使jQuery默认情况下不会这么做,默认false。以下协议目前公认为本地:file, *-extension, and widget。如果isLocal设置需要修改,建议在$.ajaxSetup()方法中这样做一次。


jsonp  重写JSONP请求的回调函数,默认是callback,如果主动设置,将取代callback部分,也就是"url?callback=?"中的callback。


jsonpCallback  指定JSONP请求的回调函数名,将取代jQuery自动生成的随机函数名。


method  指定HTTP请求方法 (比如:"POST", "GET ", "PUT","DELETE")


mimeType  一个mime类型用来覆盖XHR的mime类型。


password  指定响应HTTP访问认证请求的密码。


processData  默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。


scriptCharset  设置该请求加载的脚本文件的字符集。只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。这相当于设置<script>标签的charset属性。通常只在当前页面和远程数据的内容编码不同时使用。


statusCode  一个 HTTP响应状态码和当请求响应相应的状态码时执行的函数组成的对象,默认{}


success  指定Ajax请求成功完成之后执行的函数。该函数还传入3个参数:第一个是请求返回的数据data、第二个是响应状态字符串textStatus、第三个是jqXHR对象。


timeout  设置请求超时的毫秒值。


traditional  默认false,如果你希望使用传统方式来序列化参数,将该属性设为true。


type 指定请求类型,默认是“GET”,还可以是“POST”、“DELETE”、“PUT”,后两个有些浏览器不支持,慎用。


url  指定请求的URL,默认是当前页面URL。


username  指定响应HTTP访问认证请求的用户名。


xhr  一个用于创建并返回XMLHttpRequest对象的回调函数。你可以重写该属性以提供自己的XHR实现,或增强其功能。默认值:在IE下是ActiveXObject(如果可用),在其他浏览器中是XMLHttpRequest。


xhrFields  一个具有多个"字段名称-字段值"对的对象,用于对本地XHR对象进行设置。一对「文件名-文件值」在本机设置XHR对象。例如,如果需要,你可以用它来为跨域请求设置XHR对象的withCredentials属性为true。


Ajax事件:

beforeSend    指定在Ajax请求发起之前执行的回调函数,该函数还传入2个参数,第一个是jqXHR对象,第二个是当前settings对象。如果该函数返回false,将会取消本次请求。


complete    指定在Ajax完成(不管成功或失败)后执行的回调函数,该函数会传入2个参数:第一个是jqXHR对象,第二个是表示请求状态的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。


error    指定Ajax请求失败之后执行的函数。该函数还传入3个参数:第一个是jqXHR对象、 第二个是请求状态字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 第三是错误信息字符串(响应状态的文本描述部分,例如'Not Found'或'Internal Server Error')。跨域脚本和跨域JSONP请求不会调用该函数。


success    指定Ajax请求成功完成之后执行的函数。该函数还传入3个参数:第一个是请求返回的数据data、第二个是响应状态字符串textStatus、第三个是jqXHR对象。


 textStatus 请求状态值说明:

abort  表示请求是jqXHR对象的abort方法终止的

error  表示一般的错误,这类错误通常是由服务器报告的

notmodified  表示这次请求得到的内容与上一次请求没有差别

parsererror  表示服务器返回的数据无法正常解析

success  表示请求成功完成

timeout  表示在服务器返回信息之前请求已经超时


 dataType (指定返回的数据类型)可能值:

'xml' :返回XML文档,可使用jQuery进行处理。  


'html': 返回HTML字符串。  


'script': 返回JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意:在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)  


'json': 返回JSON数据。JSON数据将使用严格的语法进行解析(属性名必须加双引号,所有字符串也必须用双引号),如果解析失败将抛出一个错误。从jQuery 1.9开始,空内容的响应将返回null或{}。  


'jsonp': JSONP格式。使用JSONP形式调用函数时,如"url?callback=?",jQuery将自动替换第二个?为正确的函数名,以执行回调函数。 

 

'text': 返回纯文本字符串。


 statusCode   一个 HTTP响应状态码和当请求响应相应的状态码时执行的函数组成的对象(例子):

$.ajax({

  url: 'example.php',

  statusCode: {

    404: function(){

      alert('找不到页面');

    },

    200: function(){

      alert('请求成功');

    }

  }

});


(1)全局设置

除了一个个参数设置外,如果你的所有Ajax请求都需要设置settings中某些参数时,你可以使用 $.ajaxSetup() 函数进行全局设置(从1.9版本后,仅在document上调用)。

$.ajaxSetup({

  timeout: 5000

});


 ajaxPrefileter()

指定预先处理Ajax参数选项的回调函数。在所有参数选项被jQuery.ajax()函数处理之前,你可以使用该函数设置的回调函数来预先更改任何参数选项。

$.ajaxPrefilter( [ dataType ,] handler);

参数:

 dataType :一个或多个用空格隔开的数据类型所组成的字符串。如果未指定该参数,则表示所有数据类型。可用的数据类型为"xml"、 "html"、 "text"、 "json"、 "jsonp"、 "script"。该字符串为它们之间的任意组合(多种类型用空格隔开),例如:"xml"、 "text html"、 "script json jsonp"。

 handler  : 用于预处理参选项的回调函数,它会传入三个参数:

handler(options,originalOpetions,jqXHR)

 options : 当前Ajax请求的所有参数选项

 originalOptions : 传递给$.ajax()方法的未经修改的残血选项

 jqXHR : 当前请求的jqXHR对象。


(2)事件方法

ajaxComplete(function)  注册在Ajax请求完成后执行的函数(不管请求成功或失败)

ajaxError(function)  注册在Ajax请求失败后执行的函数

ajaxSend(function)  注册在Ajax请求开始之前的执行的函数

ajaxStart(function)  注册在Ajax请求开始时执行的函数

ajaxStop(function)  注册在所有Ajax请求完成之后执行的函数

ajaxSuccess(function)  注册在Ajax请求成功完成之后执行的函数

除了ajaxStop回调函数不会收到任何参数,其他回调函数则会接收到以下三个参数(ajaxError方法还会额外得到一个描述出错信息的参数):

参数说明:

 event : 描述当前事件的Event对象

 jqXHR : 描述当前请求的jqXHR对象

 settings : 包含当前请求配置信息对象。

$(document).ajaxComplete(function(event,jqXHR,settings){});


$(document).ajaxError(function(event,jqXHR,settings,errorMsg){})

 errorMsg 描述出错信息的参数


注意:从1.9版本开始,上面这些事件方法仅允许在 document 对象上使用,而且这些方法必须在发起任何Ajax请求之前调用,以确保每一个Ajax请求正确触发注册的函数。



关注”全栈技术杂货铺“

全栈技术杂货铺