jQuery Ajax实例的完整解析

让我们废话少说，言归正传。让我们首先看一些简单的方法，为了方便起见，所有这些方法都封装了jQuery.ajax()。当然，如果我们想处理复杂的逻辑，您仍然需要使用jQuery.ajax()(这将在后面提到)。默认情况下，1. load(url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。,url(String) : 请求的HTML页的URL地址。,data(Map) : (可选参数) 发送至服务器的 key/value 数据。,和callback(Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。的方法由GET传递。如果[数据]参数传入数据，将自动转换为开机自检。在jQuery 1.2中，可以指定选择器来过滤加载的HTML文档，只有过滤后的HTML代码才会被插入到DOM中。表单是“url #some selector”。这种方法可以方便地动态加载一些HTML文件，比如表单。示例：复制代码如下： $(. Ajax . load ')。load(' http://www.php100.com/index.html.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 (String) :发送请求的url地址。data (Map) :(可选)要发送到服务器的数据以Key/value的键值对的形式表示，它将作为QueryString追加。回调(函数):(可选)加载成功时回调函数(仅当响应的返回状态为成功时才调用此方法)。这是一个简单的GET请求函数，用来替换复杂的$.ajax。请求成功时调用回调函数。如果在出现问题时需要执行一个函数，可以使用$.ajax。示例：复制的代码如下： $。get('。/ajax.aspx '，{action3360' get '，name:' lulu'}，函数(data，text status){//返回的数据可以是xmlDoc，jsonObj，html，text等。这个；//这里指的是Ajax请求的选项配置信息，请参考下图alert(数据)；//alert(textStatus)；//请求状态：成功、错误等。这里当然不能抓到错误，因为错误发生时根本不会运行回调函数//alert(this)；});在send request: jQuery.get()的回调函数中点击此处，指向Ajax请求的选项配置信息：。

3.jQuery。POST (URL，[数据]，[回调]，[类型]):用于异步请求复制的代码如下：url (String) :发送请求的URL地址。数据(映射):(可选)要发送到服务器的数据以键/值的键-值对的形式表示。回调(函数):(可选)加载成功时回调函数(仅当响应的返回状态为成功时才调用此方法)。类型(字符串):(可选)官方描述是：要发送的数据类型。实际上，它应该是客户端请求的类型(JSON、XML等)。).这是一个简单的POST请求函数，用来替换复杂的$.ajax。请求成功时调用回调函数。如果出了问题需要执行某个函数，可以使用$.ajax .示例代码：Ajax.aspx:复制代码如下： response . content type=' application/JSON '；回应。写(' {result: ' '请求['name']')，你好！(此消息来自服务器)“}”)；JQuery代码：复制的代码如下： $。post ('ajax.aspx '，{action:' post '，name:' lulu'})，函数(数据、文本状态){//数据可以是xmlDoc、jsonObj、html、文本等。//这个；//这个Ajax请求的选项配置信息，请参考jQuery.get()中提到的这个alert(data . result)；}，' JSON ')；点击提交：请求的格式在这里设置为‘JSON’:(9501 . 163.com)。

如果你设置了请求的格式为json '，此时你没有设置反应回来的内容类型为：回应内容类型=' application/JSON '；那么你将无法捕捉到返回的数据。注意一下，警报(数据。结果)；由于设置了接受报头为“json”，这里返回的数据就是一个对象，并不需要用eval()来转换为对象4.jQuery.getScript(url，[回调] ) :通过得到方式请求载入并执行一个Java脚本语言文件。参数网址（字符串):待载入射流研究…文件地址回调（函数):(可选)成功载入后回调函数jQuery 1.2版本之前，getScript只能调用同域射流研究…文件。 1.2中，您可以跨域调用Java脚本语言文件。注意：Safari 2或更早的版本不能在全局作用域中同步执行脚本。如果通过getScript加入脚本，请加入延时函数。这个方法可以用在例如当只有编辑器焦点()的时候才去加载编辑器需要的射流研究…文件。下面看一些示例代码：加载并执行test.js。框架代码： $.getScript('测试。js’)；加载并执行AjaxEvent.js，成功后显示信息jQuery。代码： 复制代码代码如下： $.getScript('AjaxEvent.js '，function(){ alert('AjaxEvent.js加载完成并执行完成。你再点击上面的得到或邮政按钮看看有什么不同？');});加载完后请重新点击一下上面的负荷请求看看有什么不同jQuery Ajax事件埃阿斯请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在框架这里有两种埃阿斯事件：局部事件和全局事件。局部事件就是在每次的埃阿斯请求时在方法内定义的，例如：复制代码代码如下： $.ajax({ beforeSend:函数(){ //处理发送前事件}，完成：函数(){ //处理完整事件} //.});全局事件是每次的埃阿斯请求都会触发的，它会向数字正射影像图中的所有元素广播，在上面getScript()示例中加载的脚本就是全局埃阿斯事件。全局事件可以如下定义：复制代码代码如下：美元(正在加载).bind('ajaxSend '，function(){ $(this).show()；}).bind('ajaxComplete '，function(){ $(this).hide()；});或者：复制代码代码如下：美元(正在加载).ajaxStart(function(){ $(this)).show()；});我们可以在特定的请求将全局事件禁用，只要设置下全球的选项就可以了：复制代码代码如下： $.ajax({ url: 'test.html '，global: false，//禁用全局埃阿斯事件。//.});下面是框架官方给出的完整的埃阿斯事件列表：ajaxStart(全局事件)如果启动了一个埃阿斯请求，并且当前没有其他埃阿斯请求正在运行，则会广播此事件发送前(本地事件)该事件在埃阿斯请求启动之前触发，允许您修改XMLHttpRequest对象（如果需要，设置附加的头)。)ajaxSend(全局事件)该全局事件也在请求运行之前触发。成功（本地事件)仅当请求成功时才会调用此事件（服务器没有错误，数据没有错误)。埃阿斯成功（全局事件)仅当请求成功时，才会调用此事件。错误（本地事件)仅当请求出现错误时才会调用此事件（请求永远不会出现错误和成功回调)。ajaxError(全局事件)该全局事件的行为与本地错误事件相同。完成（本地事件)无论请求是否成功，都会调用此事件。您总是会收到一个完整的回调，即使是同步请求ajaxComplete(全局事件)该事件的行为与完整事件相同，并将在每次埃阿斯请求完成时触发ajaxStop(全局事件)如果没有更多的埃阿斯请求被处理，就会触发这个全局事件。具体的全局事件请参考应用程序接口文档。

好了，让我们从jQuery中最强大的Ajax请求方法$。Ajax()；JQuery.ajax(options) :通过HTTP请求加载远程数据，这是JQuery的底层ajax实现。见$。得到，$。岗位等。易于使用的高级实现。$.ajax()返回它创建的XMLHttpRequest对象。在大多数情况下，您不需要直接操作对象，但是在特殊情况下，可以使用它来手动终止请求。注意：如果您指定了数据类型选项，请确保服务器返回正确的MIME信息(例如，xml返回“文本/xml”)。的错误MIME类型可能会导致不可预测的错误。请参见为Ajax请求指定数据类型。当数据类型设置为“脚本”时，所有远程(不在同一个域中)开机自检请求都会转换回获取模式。$.ajax()只有一个参数：parameter key/value对象，它包含每个配置和回调函数的信息。详细参数选项见下文。在jQuery 1.2中，可以跨域加载JSON数据，使用时需要将数据类型设置为JSONP。以JSONP形式调用函数时，比如myurl？回调=？”jQuery会被自动替换吗？是执行回调函数的正确函数名。当数据类型设置为‘jsonp’时，jQuery会自动调用回调函数。(这个我不太懂)参数列表：参数名称类型描述了发送请求地址的url String(默认为：当前页面地址)。TypeString(默认为：“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开发，您必须熟悉所有这些参数。例如，在Blog Park的主页上获取文章标题：复制代码如下： $。Ajax ({type:' get '，URL 3360 ' http://send 3360函数(xmlhttprequest)之前的www.cnblogs.com/RSS',){//showloading()；}，success:函数(数据，TextStatus){ $(. AJax . AJaxResult ')。html(“”)；$(“项目”，数据)。每个(函数(I，DoMele){ $(. AJax . AJaxResult ')。追加(' li' $(domEle)。儿童('标题')。text()'/Li ')；});}，complete:函数(XMLHttpRequest，textStatus){//hide loading()；}，error: function(){ //请求错误处理} })；首页文章列表将显示在这里。其他jQuery.ajaxSetup(选项):设置全局AJAX默认选项。将AJAX请求的默认地址设置为“/xmlhttp/”，禁止触发全局AJAX事件，用POST替换默认的GET方法。后续的AJAX请求不再设置任何选项参数。jQuery代码：的复制代码如下： $。ajaxsetup ({url:'/xmlhttp/'，global: false，type : ' post ' })；$.Ajax({ data : myData })；Serialize()和serializer ray()serialize():序列表内容是字符串。SerializeArray() :序列化表元素(类似于“”。serialize()'方法)并返回JSON数据结构数据。示例：HTML代码：复制代码如下： p id=' results ' results :/p表单select name=' single ' option single/option single 2/option/select select select name=' multiple ' multiple=' multiple ' option selected=' selected ' multiple 3/option/selectbr/input type=' checkbox ' name=' check ' value=' check 1 '/check1 input type=' checkbox ' name=' check ' value=' check 2 ' check

serializearray()的缩写：