jQuery Ajax全分辨率

JQuery确实是一个很好的轻量级JS框架，可以帮助我们快速开发JS应用，在一定程度上改变我们编写JavaScript代码的习惯。让我们废话少说，言归正传。我们先来看一些简单的方法，为了方便起见，这些方法都是封装jQuery.ajax()的方法。当然，如果要处理复杂的逻辑，还是需要使用jQuery.ajax()(后面会介绍)1.load (URL、[data]、[callback]):加载远程HTML文件代码和。请求的网页的网址。数据(映射):(可选参数)密钥/值数据发送到服务器。回调(回调):(可选参数)请求完成时的回调函数(不需要成功)。默认情况下，该方法在GET模式下传递。如果[数据]参数传入数据，它将自动转换为开机自检模式。在jQuery 1.2中，可以指定选择器来过滤加载的HTML文档，只有过滤后的HTML代码才会被插入到DOM中。表单是“url #some selector”。这种方法可以方便地动态加载一些HTML文件，比如表单。示例：复制的代码如下： $(. Ajax . load ')。load(' http://www . cn blogs.com/qlielulu/archive/2008/03/30/1130270 . html . post '，函数(responsetext，textstatus，xmlhttpt)。//这里指的是当前的DOM对象，即$(. Ajax . load ')[0]//alert(responsetext)；//要返回的内容//alert(textStatus)；//请求状态：成功，错误//alert(XMLHttpRequest)；//XMLHttpRequest对象})；结果将显示在这里。注意：不知道为什么写URL的绝对路径会在FF下出错。如果你知道问题，请告诉我。下面的get()和post()例子使用了绝对路径，所以会出错，在FF下看不到返回的结果。还有就是跨域调用get()和post()例子，发现上传后没有办法得到结果，所以去掉了Run按钮。2.jquery。GET (URL、[数据]、[回调]):通过使用GET方法进行异步请求。参数：发送请求的网址。data (Map) :(可选)要发送到服务器的数据以Key/value的键值对的形式表示，并将作为QueryString附加到请求URL。回调(函数):(可选)加载成功时回调函数(仅当响应的返回状态为成功时才调用此方法)。这是一个简单的GET请求函数，用来替换复杂的$.ajax。请求成功时调用回调函数。如果你需要在出错时执行一个函数，使用$.ajax。get('。/ajax.aspx '，{action:' 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、[数据]、[回调]、[类型]):异步请求由POST发出。参数：发送请求的网址。数据(映射):(可选)要发送到服务器的数据以键/值的键-值对的形式表示。回调(函数):(可选)加载成功时回调函数(仅当响应的返回状态为成功时才调用此方法)。类型(字符串):(可选)官方描述是：要发送的数据类型。实际上，它应该是客户端请求的类型(JSON、XML等)。).这是一个简单的POST请求函数，用来替换复杂的$.ajax。请求成功时调用回调函数。如果出了问题需要执行一个函数，就用$.ajax .示例：Ajax . aspx:response . 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’:(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(全局事件)该全局事件也在请求运行之前触发。成功（本地事件)仅当请求成功时才会调用此事件（服务器没有错误，数据没有错误)。这个事件也只有在请求成功时才会被调用。错误（本地事件)仅当请求出现错误时才会调用此事件（请求永远不会同时出现错误和成功回调)。这个全局事件的行为与本地错误事件相同。完成（本地事件)无论请求是否成功，都会调用此事件。您总是会收到一个完整的回调，即使是同步请求ajaxComplete(全局事件)该事件的行为与完整事件相同，并且将在每次埃阿斯请求完成时触发ajaxStop(全局事件)如果不再有正在处理的埃阿斯请求，则会触发此全局事件。具体的全局事件请参考应用程序接口文档。好了，下面开始说框架里面功能最强的埃阿斯请求方法$.Ajax()；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包的最后修改的头信息来判断。

过程数据布尔值（默认：真)默认情况下，发送的数据将被转换为对象（技术上讲并非字符串)以配合默认内容类型' application/x-www-form-URL编码'。如果要发送数字正射影像图树信息或其它不希望转换的信息，请设置为假的。成功函数请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态函数（数据、textStatus) { //数据可以是xmlDoc、jsonObj、html、文本等.这个；//此创建交互式、快速动态网页应用的网页开发技术请求的选项}这里有几个埃阿斯事件参数：发送前，成功，完成，错误。我们可以定义这些事件来很好的处理我们的每一次的埃阿斯请求。注意一下，这些埃阿斯事件里面的这都是指向埃阿斯请求的选项信息的（请参考说get()方法时的这的图片)。请认真阅读上面的参数列表，如果你要用框架来进行埃阿斯开发，那么这些参数你都必需熟知的。示例代码，获取博客园首页的文章题目： $.ajax({ type: 'get '，URL : ' http://www。cn博客。' com/RSS '，发送前：函数(XMLHttpRequest){//ShowLoading()；}，成功：函数（数据，TextStatus){ $(。AJax。AJaxResult ').html(" ")；$("项目",数据)。每个（函数(I，DoMele){ $(。AJax。AJaxResult ').追加(' li' $(domEle).儿童('标题')。text()'/Li ')；});}，完成：函数(XMLHttpRequest，textStatus){//hide loading()；}，error: function(){ //请求出错处理} });这里将显示首页文章列表。其他jQuery.ajaxSetup(选项):设置全局创建交互式、快速动态网页应用的网页开发技术默认选项。设置创建交互式、快速动态网页应用的网页开发技术请求默认地址为/xmlhttp/'，禁止触发全局创建交互式、快速动态网页应用的网页开发技术事件，用邮政代替默认得到方法。其后的创建交互式、快速动态网页应用的网页开发技术请求不再设置任何选项参数jQuery。代码： $.ajaxSetup({ url: '/xmlhttp/'，global: false，键入： ' POST ' })；$.Ajax({ data : myData })；序列化()与序列化程序ray()序列化程序():序列表表格内容为字符串串行器光线():序列化表格元素（类似“serialize()”方法)返回数据数据结构数据。示例：HTML代码：p id=' results '结果3360/p表单选择名称=' single '选项single/option single 2/option/select select select name=' multiple ' multiple=' multiple ' option selected=' selected ' multiple/option multiply 2/option selected=' selectbr/input type=' checkbox ' name=' check 1 ' input type=' check name=' check ' value=' check 2 ' checked=' checked '/check 2 input type=' radio ' name=' radio '

SerializeArray()的结果为：。

一些资源，一个jQuery Ajax Form表单插件：http://www.malsup.com/jquery/form/,一个专门生成Loading图片的网站：http://ajaxload.info/,大家觉得那些在Loading方面比较耀眼的可以在这里晒晒，方便大家使用，嘎嘎。