h2. 简介
使用jQuery将使Ajax变得及其简单。jQuery提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。jQuery中给出了多种Ajax方法，在此一一进行详解。
本教程的学习是从简单到复杂的进行详解，示例所用的参数都是以JSON为对象进行传递。
h2. load( url, [data], [callback] )
载入远程HTML文件并插入到DOM中。
参数：
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
{code}
//不带参数
function callAjax(value) {
$("#test").load("load.html");
}
//带参数
function callAjax(value) {
$("#test").load("load.html", {name:value, isAjax: Math.random()}, function(responseText, textStatus, XMLHttpRequest){
alert("load success");
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态：success，error
//alert(XMLHttpRequest);//XMLHttpRequest对象
//isAjax这个参数是为了防止call ajax时重复提交，在以后的例子不再重复
});
}
<input type="text" onblur="callAjax(this.value);" />
<div id="test"></div>
//load.html
load success.
{code}
小结：这个方法默认使用GET方法来传递，如果有data参数传进去，则会自动转换为POST方式。
h2. ( url, [data], [callback] )
使用GET方式来进行异步请求 。
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)客户端请求的类型(JSON,XML，等等)
{code}
//ajax.html
function callAjax(value) {
$.get("ajax.jsp", {name:value}, function(data, textStatus) {
if (sult == "success") {
alert("call success");
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. 这里是JSON。
//这里捕捉不到ERROR，因为ERROR的时候不会运行回调函数。
}
}, "json");
}
<input type="text" onblur="callAjax(this.value);" />
//ajax.jsp
<%@page import="org.json.simple.JSONObject" %>
<%
String name = Parameter("name");
JSONObject jsonObject = new JSONObject();
if (name.equals("test")) {
jsonObject.put("result", "success");
} else {
jsonObject.put("result", "false");
}
out.String());
%>
{code}
h2. jQuery.post( url, [data], [callback], [type] )
使用POST方式来进行异步请求。
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用
该方法)。
type (String) : (可选)客户端请求的类型(JSON,XML，等等)
{code}
//ajax.html
function callAjax(value) {
$.post("ajax.jsp", {name:value}, function(data, textStatus) {
if (sult == "success") {
alert("call success");
}
}, "json");
}
{code}
其实GET和POST也就是传递方式不一样，其实都是一样的。
h2. Script( url, [callback] )
通过 GET 方式请求载入并执行一个 JavaScript 文件。
参数
url (String) : 待载入 JS 文件地址。
callback (Function) : (可选) 成功载入后回调函数。
{code}
function callAjax(value) {
$.getScript("ajax.js", function() {
alert("ajax.js加载完毕")
})
}
<input type="text" onblur="callAjax(this.value);" />
<div id="test">click me!</div>
//ajax.js
$("#test").click(function() {
alert("加载后才触发吧");
})
{code}
h2. Json(url, [callback])
通过 HTTP GET 请求载入 JSON 数据。
参数
url (String) : 发送请求地址。
data (Map) : (可选) 待发送 Key/value 参数。
callback (Function) : (可选) 载入成功时回调函数。
{code}
function callAjax(value) {
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (sult == "success") {
alert("call success");
}
});
}
<input type="text" onblur="callAjax(this.value);" />
{code}
getJson方法与其实方法的不同在于它不用在后面加上返回值类型，默认是JSON。
h2. jQuery.ajax(options)
通过 HTTP 请求加载远程数据。此方法不同于之前介绍的方法，ajax这个方法设置了大量的可选参数，在此对常用的几个参数进行说明，如有兴趣了解其它参数，可参照API。
{code}
function callAjax(value) {
$.ajax({
url: "ajax.jsp",
cache: false,  //默认为true。设置为 false 将不会从浏览器缓存中加载请求信息。
beforeSend: function() {  //调用ajax之前执行
alert("start");  jquery学习在线教程
},
timeout: 1000,
data: {name: value, isAjax: Math.random()},
success: function(o) {
if (o.result == "success") {
alert("Ajax call success.");
}
},
error: function() {
alert("call failed");
},
complete: function() {  //调用ajax之后执行
alert("end") 
},
dataType: "json" //预期服务器返回的数据类型。
});
}
{code}
h2. ajax事件
之前我们总结的是ajax请求，在这一节中我们将对ajax的事件进行说明。ajax的事件一共有六种：ajaxComplete, ajaxError, ajaxSend, ajaxStart, ajax Stop, ajaxSuccess
ajax事件是全局事件。意思就是是每次的Ajax请求都会触发，它会向DOM中的所有元素广播。
如果不需要，则需要在添加global属性：
{code}
$.ajax({
global: false,  //默认为true
...
})
{code}
由于大部分的代码跟上面一样，所以在此节中给出的较为简洁。
ajaxComplete: AJAX 请求完成时执行
函数。注意：即使是请求失败的情况下，依然会执行此方法
{code}
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (sult == "success") {
alert("call success");
}
$("#test").ajaxComplete(function(event, request, responseText) {
sponseText);
});
});
{code}
ajaxError: AJAX 请求发生错误时执行函数。
{code}
//当请求失败时，开始执行此方法
$("#test").ajaxError(function(event, request, responseText) {
alert(responseText.url)
});
$.ajax({
url: "ajax.jsp1",  //此处URL错误，必然会请求失败
timeout: 1000,
data: {name: value, isAjax: Math.random()},
success: function(o) {
if (o.result == "success") {
alert("Ajax call success.");
}
}
{code}
ajaxSend: AJAX 请求发送前执行函数。注意：ajaxSend方法必须放在ajax请求之前，不然无法执行。
{code}
$("#test").ajaxSend(function(event, request, responseText) {
alert(responseText.url)
});
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (sult == "success") {
alert("call success");
}
});
{code}
ajaxStart：AJAX 请求开始时执行函数。注意：这个方法也需要放在ajax请求之前，并且此方法是无法得到请求中的参数的。
{code}
$("#test").ajaxStart(function() {
alert("call ajax start!")
});
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (sult == "success") {
alert("call success");
}
});
{code}
ajaxStop: AJAX 请求结束时执行函数。注意：此方法同样无法得到请求中的参数，并且请在使用此方法时请注意，ajax请求了多少次，此方法也会执行多少次。
{code}
$("#test").ajaxStop(function() {
alert("call ajax end!")  //如果ajax方法执行一次，则alert一次，如果再次执行，则会alert二次，依次往后推...刷新页面后将会重置。
});
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (sult == "success") {
alert("call success");
}
});
{code}
ajaxSuccess： AJAX 请求成功时执行函数。
{code}
$("#test").ajaxSuccess(function(event, request, responseText) {
alert(responseText.url)
});
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (sult == "success") {
alert("call success");
}
});
{code}
h2. 其它
jQuery.ajaxSetup(options): 设置全局 AJAX 默认选项。在设置完之后，其后的ajax请求就不再设置任何选项参数。
{code}
$.ajaxSetup({
url: "ajax.jsp"
})
$.ajax({
data: {name:value},
success: function() {
alert("call success")
}
});
{code}
serialize(): 序列表表格内容为字符串。使用ajax时，常常需要拼装input数据为'name=abc&sex=1'这种形式，用JQuery的serialize方法可以轻松的完成这个工作。如：
注意：当表单中value出现空格时，空格会被替换成加号。
{code}
$(document).ready(fu
nction() {
var formValue = $("#form1").serialize();
alert(formValue)
});
<form id="form1">
<input type="text" name="name1" value="te st1"/>  //比如这里的空格，最后会显示为"te+s1"
<input type="text" name="name2" value="test2"/>
<input type="text" name="name3" value="test3"/>
</form>
{code}
serializeArray(): 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
{code}
$(document).ready(function() {
var formValues = $("#form1").serializeArray();
$.each(formValues, function(i, formValue) {
alert(formValue.value)
})
});
<form id="form1">
<input type="text" name="name1" value="test1"/> 
<input type="text" name="name2" value="test2"/>
<input type="text" name="name3" value="test3"/>
</form>
{code}
h2. 总结
以上就是对jQuery的所有ajax请求进行了分析及实例。如果需要详细的配置，则可以采用.ajax()方法，如果用的是json传数据且较为简单时，可以getJson()方法。
jQuery还提供了六种ajax事件，使得ajax的操作变得更为灵活。 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。