JSON 是一种理想的数据传输格式,它能够很好的融合与JavaScript或其他宿主语 言,并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送”裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的 ajax()函数的一个简化版本。
这个函数也是可以跨域使用的,相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成”myurl?callback=X”这种格式,让程序执行回调函数X。
$.getJSON('feed.php',{ request: images, id: 001, size: large }, function(json) { alert(json.images[0].link); //此处json就是远程传回的json对象,假设其格式如下: //{'images' : [ // {link: images/001.jpg, x :100, y : 100}, // {link: images/002.jpg, x : 200, y 200:} //]}; } );
更底层的ajax()函数
虽然get()和post()函数非常简洁易用,但是对于更复杂的一些设计需求还是无法实现,比如在ajax发送的不同时段做出不同的动作等。jQuery提供一个更为具体的函数:ajax()。
ajax( options ) ajax()提供了一大票参数,所以可以实现相当复杂的功能。
你 可以指定xml、script、html、json作为其数据类型,可以为beforeSend、error、sucess、complete等状态设置 处理函数,众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中,我们用ajax()来调用一个XML文档:
$.ajax({ url: 'doc.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function(){ alert('Error loading XML document'); }, success: function(xml){ alert(xml); //此处xml就是XML的jQuery对象了,你可以用find()、next()或XPath等方法在里面寻找节点,和用jQuery操作HTML对象没有区别 }});
进一步了解AJAX事件
前面讨论的一些方法都有自己的事件处理机制,从页面整体来说,都只能说是局部函数。jQuery提供了AJAX全局函数的定义,以满足特殊的需求。下面是jQuery提供的所有函数(按照触发顺序排列如下):
ajaxStart (全局事件) 开始新的Ajax请求,并且此时没有其他ajax请求正在进行 beforeSend (局部事件) 当一个Ajax请求开始时触发。如果需要,你可以在这里设置XMLHttpRequest对象 ajaxSend (全局事件) 请求开始前触发的全局事件 success (局部事件) 请求成功时触发。即服务器没有返回错误,返回的数据也没有错误 ajaxSuccess 全局事件全局的请求成功 error (局部事件) 仅当发生错误时触发。
你无法同时执行success和error两个回调函数 ajaxError 全局事件全局的发生错误时触发 complete (局部事件) 不管你请求成功还是失败,即便是同步请求,你都能在请求完成时触发这个事件 ajaxComplete 全局事件全局的请求完成时触发 ajaxStop (全局事件) 当没有Ajax正在进行中的时候,触发局部事件在之前的函数中都有介绍,我们主要来看看全局事件。对某个对象进行全局事件监听,那么全局中的AJAX动作,都会对其产生影响。比如,当页面在进行AJAX操作时,ID为”loading”的DIV就显示出来:
$("#loading").ajaxStart(function(){ $(this).show(); });
全局事件也可以帮助你编写全局的错误相应和成功相应,而不需要为每个AJAX请求独立设置。有必要指出,全局事件的参数是很有用的。除了 ajaxStart、ajaxOptions,其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事件本身;第二个是XHR对象;第三个是你传递的ajax参数对象。在一个对象里显示全局的AJAX情况:
$("#msg").beforeSend(function(e,xhr,o) { $(this).html("正在请求"+o.url); }).ajaxSuccess(function(e,xhr,o) { $(this).html(o.url+"请求成功"); }).ajaxError(function(e,xhr,o) { $(this).html(o.url+"请求失败");});
很显然,第三个参数也可以帮助你传递你在AJAX事件里加入的自定义参数。
在单个AJAX请求时,你可以将global的值设为false,以将此请求独立于AJAX的全局事件。
$.ajax({ url: "request.php", global: false, // 禁用全局Ajax事件. });
如果你想为全局AJAX设置参数,你会用上ajaxSetup()函数。
例如,将所有AJAX请求都传递到request.php,;禁用全局方法;强制用POST方法传递:
$.ajaxSetup({ url: "request.php", global: false, type: "POST"});
一些你不得不知道的方法
写AJAX肯定离不开从页面获取相应的值。在这里简单列举一些方法:
val() val()函数可以返回表单组建的值,例如任何种类input的值。
配合选择符操作,你可以轻易获取选项组、输入框、按钮等元素的值。