jQuery-ajax使用详解

<%
String name = request.getParameter("name");
JSONObject jsonObject = new JSONObject();
if (name.equals("test")) {
jsonObject.put("result", "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",
{code}
//不带参数
function callAjax(value) {
$("#test").load("load.html");
}
//带参数
function callAjax(value) {
$("#test").load("load.html", {name:value, isAjax: Math.random()}, function(responseText, textStatus, XMLHttpRequest){
h2. 简介
使用jQuery将使Ajax变得及其简单。jQuery提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。jQuery中给出了多种Ajax方法，在此一一进行详解。
本教程的学习是从简单到复杂的进行详解，示例所用的参数都是以JSON为对象进行传递。
h2. load( url, [data], [callback] )
});
}
{code}
hቤተ መጻሕፍቲ ባይዱ. ajax事件
之前我们总结的是ajax请求，在这一节中我们将对ajax的事件进行说明。ajax的事件一共有六种：ajaxComplete, ajaxError, ajaxSend, ajaxStart, ajax Stop, ajaxSuccess
ajax事件是全局事件。意思就是是每次的Ajax请求都会触发，它会向DOM中的所有元素广播。
},
error: function() {
alert("call failed");
},
complete: function() { //调用ajax之后执行
alert("end")
},
dataType: "json" //预期服务器返回的数据类型。
alert(request.responseText);
});
});
{code}
ajaxError: AJAX 请求发生错误时执行函数。
{code}
//当请求失败时，开始执行此方法
$("#test").ajaxError(function(event, request, responseText) {
data: {name: value, isAjax: Math.random()},
success: function(o) {
if (o.result == "success") {
alert("Ajax call success.");
}
type (String) : (可选)客户端请求的类型(JSON,XML,等等)
{code}
//ajax.html
function callAjax(value) {
$.post("ajax.jsp", {name:value}, function(data, textStatus) {
if (o.result == "success") {
alert("Ajax call success.");
}
}
{code}
ajaxSend: AJAX 请求发送前执行函数。注意：ajaxSend方法必须放在ajax请求之前，不然无法执行。
{code}
//这里捕捉不到ERROR，因为ERROR的时候不会运行回调函数。
}
}, "json");
}
<input type="text" onblur="callAjax(this.value);" />
//ajax.jsp
<%@page import="org.json.simple.JSONObject" %>
callback (Function) : (可选) 载入成功时回调函数。
{code}
function callAjax(value) {
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (data.result == "success") {
$.get("ajax.jsp", {name:value}, function(data, textStatus) {
if (data.result == "success") {
alert("call success");
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. 这里是JSON。
载入远程HTML文件并插入到DOM中。
参数：
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
alert("load success");
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态：success，error
//alert(XMLHttpRequest);//XMLHttpRequest对象
通过 GET 方式请求载入并执行一个 JavaScript 文件。
参数
url (String) : 待载入 JS 文件地址。
callback (Function) : (可选) 成功载入后回调函数。
{code}
function callAjax(value) {
$.getScript("ajax.js", function() {
cache: false, //默认为true。设置为 false 将不会从浏览器缓存中加载请求信息。
beforeSend: function() { //调用ajax之前执行
alert("start");
},
timeout: 1000,
{code}
$.getJSON("ajax.jsp", {name: value}, function(data) {
if (data.result == "success") {
alert("call success");
}
$("#test").ajaxComplete(function(event, request, responseText) {
alert("ajax.js加载完毕")
})
}
<input type="text" onblur="callAjax(this.value);" />
<div id="test">click me!</div>
//ajax.js
$("#test").click(function() {
if (data.result == "success") {
alert("call success");
}
}, "json");
}
{code}
其实GET和POST也就是传递方式不一样，其实都是一样的。
h2. jQuery.getScript( url, [callback] )
alert("加载后才触发吧");
})
{code}
h2. jQuery.getJson(url, [callback])
通过 HTTP GET 请求载入 JSON 数据。
参数
url (String) : 发送请求地址。
data (Map) : (可选) 待发送 Key/value 参数。
$("#test").ajaxSend(function(event, request, responseText) {
alert(responseText.url)
});
$.getJSON("ajax.jsp", {name: value}, function(data) {
alert(responseText.url)
});
$.ajax({
url: "ajax.jsp1", //此处URL错误，必然会请求失败
timeout: 1000,
data: {name: value, isAjax: Math.random()},
success: function(o) {
{code}
小结：这个方法默认使用GET方法来传递，如果有data参数传进去，则会自动转换为POST方式。
h2. jQuery.get( url, [data], [callback] )
使用GET方式来进行异步请求 。
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
} else {
jsonObject.put("result", "false");
}
out.println(jsonObject.toString());
%>
{code}
h2. jQuery.post( url, [data], [callback], [type] )
使用POST方式来进行异步请求。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)客户端请求的类型(JSON,XML,等等)
{code}
//ajax.html
function callAjax(value) {
如果不需要，则需要在添加global属性：
{code}
$.ajax({
global: false, //默认为true
...
})
{code}
由于大部分的代码跟上面一样，所以在此节中给出的较为简洁。
ajaxComplete: AJAX 请求完成时执行函数。注意：即使是请求失败的情况下，依然会执行此方法
//isAjax这个参数是为了防止call ajax时重复提交，在以后的例子不再重复
});
}
<input type="text" onblur="callAjax(this.value);" />
<div id="test"></div>
//load.html
load success.