一、概述
jQuery对Ajax操作进行了封装,在jQuery中$.ajax()是属于最底层的方法,第2层是load()、$.get()和$.post()方法,第三层是$.getScript()和$.getJSON()方法。
写法:load(url, [data], [callback])
url: String类型—请求HTML页面的URL地址
data:Object类型—发送至服务器的key/value数据
callback:Function类型—请求完成时的毁掉函数,无论请求成功或失败。
二、load()方法
1.概述
load()方法是jQuery中最常用和简单的Ajax方法。
能载入远程的HTML文件并插入至DOM中。
2.传递方式
load()方法的传递方式根据参数data来自动制定。
默认使用GET方式,传递附加参数时自动转换为POST方法。
3.参数
Object类型—发送至服务器的key/value数据。
4.回调函数
对于必须在加载完成后才能继续的操作,load()方法提供了回调函数,该函数有三个参数。
responseTest:请求返回的内容。
textStatus:请求的状态,有success、error、notmodified、timeout 4种。
XMLHttpRequest:XMLHttpRequest对象。
5.示例
①GET方式
$("#feeds").load("feeds.html");
②POST方式
$("#feeds").load("feeds.php", {limit: 25}, function(responseText, textStatus, XMLHttpRequest){ alert("The last 25 entries in the feed have been loaded"); });
三、GET方法
1.概述
$.get()方法使用GET方式来进行一步请求。
写法:$.get(url, [data], [callback], [type]).
2.参数
url:String类型—请求的HTML页的URL地址。
data:Object类型—发送至服务器的key/value数据会作为QueryString附加到请求URL中。
callback:载入成功时执行回调函数(只有当Response的返回状态时success才调用该方法)自动将请求的结果和状态传递给该方法。如果需要在出错时执行函数,需要使用$.ajax()方法。
3.回调函数
回调函数只有当数据成功返回后才会被调用,这点与load()方法不同。
$.get()方法的回调函数只有两个参数。
data:请求返回的内容。
textStatus:请求的状态。
4.返回内容格式
xml, html, json, script, text _default。
5.示例
①返回HTML片段
$("#send").click(function(){ $.get("get1.asp", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ $("#resText").html(data); // 把返回的数据添加到页面上 } ); })
由于服务器端返回的数据格式是HTML片段,因此并不需要经过处理就可以将新的HTML数据插入到主页面中。
②返回XML文档
$("#send").click(function () { $.get("get2.asp", { username: $("#username").val(), content: $("#content").val() }, function (data, textStatus) { var username = $(data).find("comment").attr("username"); var content = $(data).find("comment content").text(); var txtHtml = "<div class=‘comment‘><h6>" + username + ":</h6><p class=‘para‘>" + content + "</p></div>"; }); })
由于服务器端返回的数据格式是XML文档,因此需要对返回的数据进行处理。
③返回JSON文件
$("#send").click(function () { $.get("get3.asp", { username: $("#username").val(), content: $("#content").val() }, function (data, textStatus) { var username = data.username; var content = data.content; var txtHtml = "<div class=‘comment‘><h6>" + username + ":</h6><p class=‘para‘>" + content + "</p></div>"; $("#resText").html(txtHtml); // 把返回的数据添加到页面上 }, "json"); })
由于服务器端返回的数据格式是JSON文件,因此需要对返回的数据进行处理之后,才可以将新的HTML数据添加到主页面中。
④在不需要与其他应用程序共享数据的时候,使用HTML片段来提供返回数据一般来说是最简单的;如果需要重用,那么JSON文件时不错的选择,它在性能和文件大小方面具有优势;而当远程应用程序未知时,XML文档时明智的选择,它是Web服务领域的“世界语”。
四、$.post()方法
1.概述
该方法的使用类似于$.get()方法。区别在于是通过HTTP POST请求载入信息的。
写法:$.post(url, [data], [callback], [type])
2.与$.get()方法的区别
Request对象功能是从客户端得到数据,常用的三种取得数据的方法是:Request.Form、Request.QueryString,Request。其第三种是前两种的一个缩写,可以取代前两种情况。而前两种主要对应的Form提交时的两种不同的提交方法:分别是Post方法和Get方法。
$.get()方法可以通过 Request.QueryString["a"]和Request["a"]来取得参数;
$.post()方法只可以通过Request["a"]来取得参数。
五、$.ajax()方法
1.概述
jQuery底层AJAX实现,$.ajax()返回其创建的XMLHttpRequest对象。
$.ajax()方法不仅能实现与$.load()、$.get()和$.post()方法同样的功能,而且还可以设定beforeSend(提交前回调函数)、error(请求失败后处理)、success(请求成功后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数可以给用户更多的Ajax提示信息。
写法:$.ajax(options)
2.参数
(1)url:String类型—(默认为当前地址)发送请求的地址
type:String类型—请求方式,默认为GET。
timeout:Number类型—设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置
data:Object或String类型—发送到服务器的数据。如果不是字符串,将自动转换为字符串格式。Get请求中将附加在URL后。例如:{foo1:"bar1", foo2:"bar2"}转换为&fool=bar1&foo2=bar2。
dataType:String类型—预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递。
可用的类型如下:xml、html、script、json、jsonp、text
global:Boolean类型—默认为true。表示是否出发全局Ajax事件。设置false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件。
(2)回调函数:Function类型
如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
- beforeSend: 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。在beforSend中如果返回false可以取消本次Ajax请求
-
function(XMLHttpRequest) { this;//调用本次Ajax请求时传递的options参数 }
-
- error: 在请求出错时调用。3个参数,传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
-
function(XMLHttpRequest, textStatus, errorThrown) { //通常情况下textStatus和errorThown只有其中一个包含信息 this;//调用本次ajax请求时传递的options参数 }
-
- dataFilter: 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
- success: 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
-
function(data, textStatus) { //data由服务器返回,并根据dataType参数进行出后的数据。可能是xmlDoc、 jsonObj、html、text等类型。 this;//调用本次Ajax请求时传递的options参数 }
-
- complete: 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
-
function(XMLHttpRequest, textStatus) { this;//调用本次Ajax请求时传递的options参数 }
-
六、序列化元素
1.serialize()方法
提交表单时,序列化表单内容为字符串。
$("#send").click(function(){ $.get("get1.php", $("#form1").serialize(), functiuon(data, textStatus){ $("#restText").html(data); }); });
2.serializeArray()方法
序列化表格元素 (类似 ‘.serialize()‘ 方法) 返回 JSON 数据结构数据。
注意:此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)
eg:
[
{name: ‘firstname‘, value: ‘Hello‘},
{name: ‘lastname‘, value: ‘World‘}
]
3.$.param()方法
它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。
eg:
var obj = {a:1, b:2, c:3}; var k = $.param(obj); alert(K);//输出a=1&b=2&c=3