Jquery Ajax请求方法总结(值得收藏)

JQuery确实是一个很好的轻量级JS框架，可以帮助我们快速开发JS应用，在一定程度上改变我们编写JavaScript代码的习惯。

废话少说，言归正传。让我们首先看一些简单的方法，为了方便起见，所有这些方法都封装了jQuery.ajax()。当然，如果想要处理复杂的逻辑，还是需要使用jQuery.ajax()(这将在后面讨论)。

1.加载(url、[数据]、[回调]):加载远程HTML文档代码，并将其插入DOM。

请求的网页的网址。

数据(映射):(可选参数)密钥/值数据发送到服务器。

回调(回调):(可选参数)请求完成时的回调函数(不需要成功)。

默认情况下，该方法在GET模式下传递。如果[数据]参数传入数据，它将自动转换为开机自检模式。在jQuery 1.2中，可以指定选择器来过滤加载的HTML文档，只有过滤后的HTML代码才会被插入到DOM中。表单是“url #some selector”。

这种方法可以方便地动态加载一些HTML文件，比如表单。

示例代码：

$('.ajax.load ')。加载('[URL]http://www . cn blogs.com/qlielulu/archive/2008/03/30/1130270 . html[/URL]。' post '，函数(responseText，textStatus，XMLHttpRequest){ this；//这里指的是当前的DOM对象，即$(. Ajax . load ')[0]//alert(responsetext)；//要返回的内容//alert(textStatus)；//请求状态：成功，错误//alert(XMLHttpRequest)；//XMLHttpRequest对象})；结果将显示在这里。

注意：不知道为什么写URL的绝对路径会在FF下出错。如果你知道问题，请告诉我。下面的get()和post()例子使用了绝对路径，所以会出错，在FF下看不到返回的结果。还有就是跨域调用get()和post()例子，发现上传后没有办法得到结果，所以去掉了Run按钮。

2.jquery。GET (URL、[数据]、[回调]):使用GET进行异步请求。

参数：

发送请求的网址。

数据(映射):(可选)要发送到服务器的数据以键/值的键值对的形式表示，并将作为查询字符串附加到请求URL。

回调(函数):(可选)加载成功时回调函数(仅当响应的返回状态为成功时才调用此方法)。

这是一个简单的GET请求函数，用来替换复杂的$.ajax。请求成功时调用回调函数。如果你需要在出错时执行一个函数，使用$.ajax。

示例代码：

$.get('。/ajax.aspx '，{action:' get '，name3360' lulu'}，函数(data，text status){//返回的数据可以是xmlDoc，jsonObj，html，text等。这个；//这里指的是Ajax请求的选项配置信息，请参考下图alert(数据)；//alert(textStatus)；//请求状态：成功、错误等。这里当然抓不到错误，因为错误发生时根本不会运行回调函数//alert(this)；});单击发送请求：

这个在jQuery.get()回调函数中指向Ajax请求的选项配置信息：

3.jquery。POST (URL、[数据]、[回调]、[类型]):异步请求由POST发出。

参数：

发送请求的网址。

数据(映射):(可选)要发送到服务器的数据以键/值的键-值对的形式表示。

回调(函数):(可选)加载成功时回调函数(仅当响应的返回状态为成功时才调用此方法)。

类型(字符串):(可选)官方描述是：要发送的数据类型。实际上，它应该是客户端请求的类型(JSON、XML等)。).

这是一个简单的POST请求函数，用来替换复杂的$.ajax。请求成功时调用回调函数。如果你需要在出错时执行一个函数，使用$.ajax。

示例代码：

Ajax.aspx:

回应。content type=' application/JSON '；回应。写(' {result: ' ' '请求['name']')，你好！(此消息来自服务器)' ' } ')；JQuery代码：

$.post ('ajax.aspx '，{action:' post '，name:' lulu'})，function (data，text status){//数据可以是xmlDoc，jsonObj，html，text等。//这个；//这个Ajax请求的选项配置信息，请参考jQuery.get()中提到的这个alert(data . result)；}，' JSON ')；单击提交：

在此将请求的格式设置为“json”:

如果您将请求的格式设置为“json”，此时您没有将Response返回的ContentType设置为：Response . content type=“application/JSON”；那么您将无法捕获返回的数据。注意，警惕(数据.结果)；由于Accept头设置为“json”，这里返回的数据是一个对象，不需要使用eval()将其转换为对象。

4.jquery。GETscript (URL，[回调]) :请求通过get加载并执行一个JavaScript文件。

参数

要加载的JS文件的Url(字符串):地址。

回调(函数):(可选)成功加载回调函数。

在jQuery 1.2之前，getScript只能调用同域的JS文件。在1.2中，可以跨域调用JavaScript文件。注意：Safari 2或更早版本无法在全局范围内同步执行脚本。如果您通过getScript添加脚本，请添加延迟函数。

例如，当只有编辑器焦点()可用时，可以使用此方法加载编辑器所需的JS文件。下面是一些示例代码：加载并执行test.js

JQuery代码：

复制代码如下：美元。getScript(' test . js ')；

并加载执行AjaxEvent.js，成功后显示信息。

JQuery代码：

$.Getscript ('ajaxevent.js '，function () {alert ('ajaxevent.js)已加载并执行。“点击上面的获取或发布按钮，看看有什么不同？”);});加载后，再次单击上面的加载请求，查看有何不同。

JQuery Ajax事件

Ajax请求生成几个不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。jQuery中有两种Ajax事件：本地事件和全局事件。

每个Ajax请求都在方法中定义本地事件，例如：

$.ajax({ beforeSend:函数(){ //处理beforeSend事件}，complete:函数(){ //处理完整事件} //.});全局事件由每个Ajax请求触发，并广播给DOM中的所有元素。上面getScript()示例中加载的脚本是一个全局Ajax事件。全局事件可以定义如下：

$(“#正在加载”)。bind('ajaxSend '，function(){ $(this)。show()；}).bind('ajaxComplete '，function(){ $(this)。hide()；});或者：

$(“#正在加载”)。ajaxStart(function(){ $(this))。show()；});我们可以通过设置全局选项在特定请求下禁用全局事件：

$.Ajax ({url:' test.html '，global: false，//禁用全局Ajax事件。//.});以下是jQuery给出的Ajax事件的完整列表：

ajaxStart(全局事件)如果启动了一个埃阿斯请求，并且当前没有其他埃阿斯请求正在运行，则会广播此事件发送前(本地事件)此事件在启动埃阿斯请求之前触发，允许您修改XMLHttpRequest对象（如果需要，可以设置其他标头)ajaxSend(全局事件)此全局事件也在请求运行之前触发。成功（本地事件)此事件仅在请求成功时调用（服务器没有错误，数据没有错误)。Ajax成功(全局事件)此事件也仅在请求成功时调用。错误（本地事件)此事件仅在请求出错时调用（请求永远不能同时出现错误和成功回调)。此全局事件的行为与本地错误事件相同。完成（本地事件)无论请求是否成功，都会调用此事件。即使对于同步请求，您也总是会收到一个完整的回调ajaxComplete(全局事件)该事件的行为与完整事件相同，并且将在每次埃阿斯请求完成时被触发ajaxStop(全局事件)如果不再有正在处理的埃阿斯请求，则会触发该全局事件。

具体的全局事件请参考应用程序接口文档。

好了，下面开始说jQuery里面功能最强的埃阿斯请求方法$.Ajax()；

jQuery.ajax(选项):通过超文本传送协议请求加载远程数据

这个是jQuery的底层创建交互式、快速动态网页应用的网页开发技术实现。简单易用的高层实现见$.得到，$。邮政等。

$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。注意：如果你指定了数据类型选项，请确保服务器返回正确的哑剧信息，(如可扩展标记语言返回文本/xml ')。错误的哑剧类型可能导致不可预知的错误。见为创建交互式、快速动态网页应用的网页开发技术请求指定数据类型。

当设置数据类型类型为"脚本"的时候，所有的远程（不在同一个域中)开机自检请求都回转换为得到方式。

$.ajax()只有一个参数：参数密钥/值对象，包含各配置及回调函数信息。详细参数选项见下。

jQuery 1.2中，您可以跨域加载JSON数据，使用时需将数据类型设置为JSONP。使用JSONP形式调用函数时，如我的url？回调=?“jQuery将自动替换？为正确的函数名，以执行回调函数。数据类型设置为" jsonp "时，jQuery将自动调用回调函数。(这个我不是很懂)

参数列表：

参数名称类型描述发送请求地址的url字符串(默认为：当前页面地址)。键入字符串(默认情况下为：“GET”)请求方法(“POST”或“GET”)，默认情况下为“GET”。注意：也可以使用其他HTTP请求方法，如PUT和DELETE，但只有部分浏览器支持。超时数以毫秒为单位设置请求超时。此设置覆盖全局设置。异步布尔值(默认为： true)默认情况下，所有请求都是异步请求。如果需要发送同步请求，请将此选项设置为false。请注意，同步请求将锁定浏览器，用户的其他操作必须等待请求完成后才能执行。发送函数在发送请求之前，可以修改XMLHttpRequest对象的函数，比如添加自定义HTTP头。XMLHttpRequest对象是唯一的参数。函数(XMlhttprequest){ this；//这个Ajax请求的选项} cache boolean(默认值： true) jQuery 1.2是一个新函数。如果设置为false，则不会从浏览器缓存中加载请求信息。在完成完整的函数请求后回调函数(当请求成功或失败时调用)。参数：XMLHttpRequest对象，成功信息字符串。函数(XMLHttpRequest，textStatus){ this；//此Ajax request}内容类型字符串的选项(默认值为： ' application/x-www-form-URL encoded ')向服务器发送信息时的内容编码类型。默认值适用于大多数应用。数据对象，发送到服务器的字符串数据。自动转换为请求字符串格式。获取请求将被附加到网址。请检查processData选项说明以禁用此自动转换。格式必须是键/值。如果是数组，jQuery将自动对应不同值的相同名称。例如，{foo:['bar1 '，' bar2']}被转换为' ' foo=bar1foo=bar2 ' '。数据类型字符串需要服务器返回的数据类型。如果没有指定，jQuery会根据HTTP包的MIME信息自动返回responseXML或responseText，作为回调函数的参数传递。值： 'xml':可用于返回xml文档，该文档可由jQuery处理。Html':返回纯文本Html信息；包括脚本元素。Script':返回纯文本JavaScript代码。结果不会自动缓存。Json':返回Json数据。Jsonp':JSONP格式。以JSONP形式调用函数时，比如myurl？回调=？”jQuery会被自动替换吗？是执行回调函数的正确函数名。当请求失败时，将调用错误函数(默认为：自动判断(xml或html))。这个方法有三个参数：XMLHttpRequest对象、错误信息和(可能)捕获的错误对象。函数(xmlhttprequest，textstatus，error through){//通常textStatus和errorhown只有一个值为这个；//此Ajax请求的选项}全局布尔值(默认为： true)是否触发全局AJAX事件。设置为false不会触发全局AJAX事件，如ajaxStart或ajaxStop。它可以用来控制不同的Ajax事件。ifModified Boolean(默认值： false)只能在服务器数据发生变化时获取新数据。用HTTP包的最后修改的头信息来判断。ProcessData Boolean(默认为： true)默认情况下，发送的数据将被转换为对象(技术上不是字符串)，以匹配默认内容类型“application/x-www-form-URL encoded”。如果要发送DOM树信息或其他不想转换的信息，请设置为false。函数请求成功后，回调函数。该方法有两个参数：服务器返回数据，返回状态为函数(数据、文本状态){//数据可以是xmldoc、jsonobj、html、text等.这个；//这个Ajax请求的选项}这里有几个Ajax事件参数：beforeSend、success、complete和error。

我们可以定义这些事件来很好地处理我们的Ajax请求。注意这些Ajax事件中的这个都指向Ajax请求的选项信息(说get()方法的时候请参考这个的图片)。请仔细阅读以上参数表。如果您想使用jQuery进行Ajax开发，您必须熟悉所有这些参数。代码，获取博客公园主页的文章标题：

$.ajax({ type: 'get '，URL : '[URL]http://www。cn博客。com/RSS[/URL]'，beforeSend:函数(XMLHttpRequest){//ShowLoading()；}，成功：函数（数据，TextStatus){ $(。AJax。AJaxResult ').html(" ")；$("项目",数据)。每个（函数(I，DoMele){ $(。AJax。AJaxResult ').追加(' ' $(domEle).儿童('标题')。text()' ')；});}，完成：函数(XMLHttpRequest，textStatus){//hide loading()；}，error: function(){ //请求出错处理}});其他

jQuery.ajaxSetup(选项):设置全局创建交互式、快速动态网页应用的网页开发技术默认选项。

设置创建交互式、快速动态网页应用的网页开发技术请求默认地址为/xmlhttp/'，禁止触发全局创建交互式、快速动态网页应用的网页开发技术事件，用邮政代替默认得到方法。其后的创建交互式、快速动态网页应用的网页开发技术请求不再设置任何选项参数。

jQuery代码：

$.ajaxSetup({ url: '/xmlhttp/'，global: false，键入： ' POST ' })；$.Ajax({ data : myData })；序列化()与serializeArray()

serialize() :序列表表格内容为字符串。

serializeArray() :序列化表格元素（类似''.serialize()" "方法)返回JSON数据结构数据。

示例：

超文本标记语言代码：

p id=' results ' results 3360 b p form select name=' single ' option single option 2 option select name=' multiple ' multiple=' multiple ' option selected=' selected ' multiple 3 option 2 option selected=' selected ' multiple 3 option/input type=' checkbox ' name=' check 1 '/check 1输入类型=' check ' name=' check 2 ' check=' check '/check 2输入类型=' radio ' name=' radio ' value=' radio 1 ' check

serializeArray()结果为：

下面给大家介绍为什么一般请求可以下载文件，Ajax请求就不能下载

那是因为反应原因，一般请求浏览器是会处理服务器输出的回应，例如生成巴布亚新几内亚，文件下载等，ajax请求只是个"字符性"的请求，可以读取到返回的回应，但只是读取而已，是无法执行的，说白点就是射流研究…无法调用到浏览器的下载处理机制和程序。