jQuery之ajax技術的詳細介紹
編輯：JQuery特效代碼
1：Ajax技術包含以下幾點：
基於Web標准(XHTML + CSS)的展示
使用DOM進行動態顯示和交互
使用XMLHttpRequest進行數據交換和相關操作
使用javascript將所有內容綁定在一起
Ajax的核心是JavaScript的XMLHttpRequest對象，它是一種支持異步請求的技術。簡而言之，使用JS可以控制XMLHttpRequest對象向服務器提出請求並處理響應，
而不影響用戶對頁面的正常訪問。對於XMLHttpRequest對象，不同的浏覽器提供了不同的支持，IE是將其作為ActiveX控件集成到浏覽器中的，而其他主流的浏覽器直接
作為一般的JS對象來創建。
2：JS中的Ajax
readyState屬性代碼
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax</title>
<script src="JS/ajax.js"></script>
<style type="text/css">
body { padding:20px; }
#browser{ border:solid 1px #666; width:500px; height:300px; overflow:auto; }
#content{ width:500px; height:80px; margin:10px 0; }
</style>
</head>
<body>
<input id="Access" type="button" value="Access" />
<br />
<textarea id="content"></textarea>
<div id="browser"></div>
</body>
</html>
ajax.js的內容：
. 代碼如下:
var xmlRequest;
function CreateRequest()
{
/* 創建XMLHttpRequest對象 */
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
}
function ResponseHandler()
{
if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
{
/* 如果通信成功，並且響應正常，執行以下操作 */
var reqContent = xmlRequest.responseText;
document.getElementById("browser").innerHTML = reqContent;
document.getElementById("content").value = reqContent;
}
}
function AjaxAccess()
{
/* 異步請求百度首頁 */
xmlRequest = CreateRequest(); //創建XMLHttpRequest對象
xmlRequest.onreadystatechange = ResponseHandler; //設置回調函數
xmlRequest.open("GET","http://www.baidu.com"); //初始化請求對象
xmlRequest.send(null); //發送請求信息
/* 觸發事件以後提示正在打開百度首頁 */
var brow = document.getElementById("browser");
brow.innerHTML = "<h1>正在打開百度搜索</h1>";
}
window.onload = function()
{
document.getElementById("Access").onclick = AjaxAccess; //設置按扭單擊事件
}
3：jQuery中的Ajax
$.ajax(options)方法
options是以“鍵/值”對的形式設置的，用於設置Ajax請求的參數，如請求方式、請求URL、回調函數等。
常用屬性如下：
url: 發送請求的地址
type:請求方式，GET和POST，默認為GET
timeout: 設置請求超時時間，該屬性為數值型，單位為毫秒
data: 發送到服務器的數據，“鍵/值”對形式，該屬性可以是對象或者字符串，如果是對象，則自動轉換為字符串
dataType: 預期服務器返回的數據類型，該屬性為字符串類型。可選值如下： xml、html：返回純文本HTML信息，包含的標簽(script標簽或者style標簽)會在
文本插入DOM的時候執行、 script：返回純文本JS代碼、json、jsonp、text
contentType: 發送信息至服務器時內容編碼類型，該屬性為字符串類型，默認值為"application/x-www-form-urlencoded"，一般不用設置，因為默認值適合大多數應用場合
beforeSend: 請求發送前的事件，該屬性為其設置事件處理程序，可用於發送前修改XMLHttpRequest的參數，如頭信息。
. 代碼如下:
function(XMLHttpRequest) {
this; /*這裡this關鍵字用於訪問.ajax()方法的options參數對象*/
}
complete: 請求完成後的事件，無論請求成功與否，都將觸發該事件。
function(XMLHttpRequet, textStatus) {
this; /*這裡this關鍵字用於訪問.ajax()方法的options參數對象*/
}
textStatus參數返回當前請求的執行狀態(succss和error等)
success: 請求執行成功時的事件。
function(data, textStatus) {
this; /*這裡this關鍵字用於訪問.ajax()方法的options參數對象*/
}
error: 請求執行失敗時的事件
function(XMLHttpRequest, textStatus, errorThrown) {
this; /*這裡this關鍵字用於訪問.ajax()方法的options參數對象*/
}
global: 是否觸發全局Ajax事件，該屬性為Boolean類型，默認值為false
. 代碼如下:
$(document).ready(function(){
$("#Access").click(function(){
var xmlReq = $.ajax({
type:'GET',
url:'http://www.sougou.com',
success:function(reqContent)
{
$("#browser").html(reqContent);
$("#content").text(reqContent);
}});
$("#browser").html("<h1>正在打開搜狗搜索</h1>");
});
});
4：load方法
load(url, [data], [callback]);
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Load</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Load.js"></script>
<style type="text/css">
body { padding:20px; }
#commentList{ border:solid 2px #888; width:500px; overflow:auto; }
#commentList p{ border-bottom:solid 1px #ddd; margin-bottom:30px; padding-bottom:15px; font-size:13px; }
#commentList div{ background:#eee; }
#commentList h3{ color:#888; padding:10px 0 0 0; }
</style>
</head>
<body>
<h2>回復列表</h2>
<input type="button" id="refresh" value="刷新列表" />
<div id="commentList"></div>
</body>
</html>
Load.js
. 代碼如下:
$(document).ready(function(){
$("#refresh").click(function(){
/* 要訪問的頁面URL，根據你實際情況做相應修改 */
var url = "http://www.sogou.com";
$("#commentList").load(url); //加載相應內容
});
});
5：$.get()方法
是一個全局方法，該方法使用GET方式來進行異步請求，語法格式如下：
. 代碼如下:
var xmlReq = $.get(url, [data], [callback], [type]);
$.get("www.baidu.com",
{
user: 'zhangsan'
}
);
callback: function(data, textStatus) {}
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Get</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Get.js"></script>
<style type="text/css">
body{ padding:30px 80px; font-size:14px; }
#blogList{ width:240px; height:120px; margin:10px 0; padding:8px; border:solid 1px #777; font-size:13px; }
#blogList span{ display:inline-block; width:50px; text-align:right; margin-right:20px; color:#999; }
</style>
</head>
<body>
分類：
<select id="blogClass">
<option selected="selected" value="">所有</option>
<option>CSS</option>
<option>.NET</option>
</select>
<input type="button" id="Search" value="Search" />
<div id="blogList"></div>
</body>
</html>
Get.js
. 代碼如下:
$(document).ready(function(){
$("#Search").click(function(){
/* 使用Get方式請求指定URL */
$.get("http://localhost:2154/Web/BlogList.aspx",
{
key : $("#blogClass").val()
},
function(data){
$("#blogList").html(data);
});
});
$("#Search").click(); //觸發一次單擊事件
});
BlogList.aspx
. 代碼如下:
<%@ Page Language="C#" %>
<%
/*
* 分別向數組裡添加一些數據，
* 這些數據一般來自數據庫，
* 這裡只是模擬，就靜態添加了
*/
string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET", ".NET" };
string[] blogTitle = { "CSS中的padding", "CSS入門", "C#中的類",
"C#基礎知識", "C#面向對象", "C#設計模式" };
string key = Request["key"]; //獲取請求服務器的關鍵字
/*
* 遍歷數組集合
*/
for (int i = 0; i < blogClass.Length; i++)
{
/*
* 如果關鍵字為空，顯示所有的記錄
* 如果關鍵字等於分類名稱，顯示該分類下的記錄
*/
if (key == null || key == string.Empty || key == blogClass[i])
{
%>
<div>
<span><%= blogClass[i]%></span><%= blogTitle[i]%>
</div>
<%
}
}
%>
6：$.post()方法
var xmlReq = $.post(url, [data], [callback], [type]);
$.get()方法是以GET方式提交的數據，所有的參數信息都將追加到URL後面，而Web請求一般對URL長度有一定限制，所以$.get()方法傳遞的數據長度也有一定的上限，
而$.post()方法是將參數作為消息的實體發送到服務器的，對數據無長度上的影響。
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Post</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Post.js"></script>
<style type="text/css">
body{ padding:20px 80px; font-size:14px; }
#login{ width:240px; height:160px; margin:10px 0; padding:8px; border:solid 1px #777; font-size:13px; }
#login h4{ color:#666; margin:5px 0; font-size:18px; }
#login span{ font-size:15px; line-height:40px; font-weight:700; }
input,button{ margin:15px 0 0 0; line-height:14px; }
input{ height:15px; }
</style>
</head>
<body>
<div id="login">
<h4>用戶登錄</h4>
Username:<input name="username" />
<br />
Password:<input name="password" type="password" />
<br />
<button id="submit">Submit</button>
</div>
</body>
</html>
Post.js
. 代碼如下:
$(document).ready(function(){
$("#submit").click(function(){
$.post("http://localhost:2154/Web/Login.aspx",
{
username : $("input[name='username']").val(),
password : $("input[name='password']").val()
},
function(data){
$("#login").html(data);
});
});
});
Login.aspx
. 代碼如下:
<%@ Page Language="C#" %>
<span>歡迎你 <font color="red"><%= Request.Form["username"] %></font>
<br />
你的身份是 <font color="red">管理員</font>
<br />
<button>修改資料</button>
<button>注銷登錄</button>
</span>
7：$.getJSON()方法
var xmlReq = $.getJSON(url, [data], [callback]);
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/getJSON.js"></script>
<style type="text/css">
body{ padding:20px; }
#peoples{ background:#999; border:solid 2px #333; width:300px; }
#peoples td{ padding:5px; }
#peoples thead{ background:#555; color:#FFF; font-weight:700; font-size:16px; }
#peoples tbody{ font-size:13px;background:#fff; }
</style>
</head>
<body>
<table id="peoples" cellspacing="1">
<thead>
<tr><td>Name</td><td>Age</td><td>Sex</td></tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
getJSON.js
. 代碼如下:
$(document).ready(function(){
/* 異步請求，載入 JSON 數據 */
$.getJSON("http://localhost:2154/Web/PeopleList.aspx",
function(data){
/* 遍歷請求結果 */
$.each(data,
function(index, p){
var html = "<tr><td>" + p.name + "</td><td>" + p.age +
"</td><td>" + (p.isMale ? "male" : "female") + "</td></tr>"
$("#peoples>tbody").append(html);
});
});
});
PeopleList.aspx
. 代碼如下:
<%@ Page Language="C#" %>
[{
"name" : "David li",
"age" : 61,
"isMale" : true
},{
"name" : "Michael Clinton",
"age" : 53,
"isMale" : true
},{
"name" : "Brook Ann",
"age" : 23,
"isMale" : false
},{
"name" : "Mary Johnson",
"age" : 35,
"isMale" : false
},{
"name" : "Elizabeth Jones",
"age" : 33,
"isMale" : false
},{
"name" : "James Smith",
"age" : 25,
"isMale" : true
}]
8：$.getScript()方法
var xmlReq = $.getScript(url, [callback]);
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>getScript</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/getScript.js"></script>
<style type="text/css">
body{ padding:30px; }
</style>
</head>
<body>
<h1>使用getScript()方法異步加載JavaScript文件</h1>
<input type="button" value="Button" id="input" />
</body>
</html>
getScript.js
. 代碼如下:
$(document).ready(function(){
$("#input").click(function(){
$.getScript("Test.js", function(data){
showMsg();
});
});
});
Test.js
. 代碼如下:
function showMsg(){
alert("This is Message");
}
9：序列化表單數據
jQuery為了解決參數很多的問題，提供了序列化的方法簡化對表單數據的收集和格式化。
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>serialize</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/serialize.js"></script>
<style type="text/css">
body{ padding:20px; }
</style>
</head>
<body>
<table>
<tbody>
<form onsubmit="return false;" >
<tr><td>Username:</td><td><input name="username" /></td></tr>
<tr><td>Age:</td><td><input name="age" /></td></tr>
<tr><td>Sex:</td><td>
<select name="isMale">
<option value="true">男</option>
<option value="false">女</option>
</select></td></tr>
<tr><td>Email:</td><td><input name="email" /></td></tr>
<tr><td>Details:</td><td><textarea name="details"></textarea></td></tr>
<tr><td></td><td><button name="btnSubmit">Submit</button></td></tr>
</form>
</tbody>
</table>
</body>
</html>
serialize.js
. 代碼如下:
$(document).ready(function(){
$("button[name='btnSubmit']").click(function(){
$.post("http://localhost:2154/Web/Register.aspx",
$("form").serialize(), //序列化表單數據
function(data){
$("table tbody").append("<tr><td colspan=2>" + data + "</td></tr>");
});
});
});
Register.aspx
. 代碼如下:
<%@ Page Language="C#" %>
Username:<%= Request["username"] %>
<br />
Age:<%= Request["age"] %>
<br />
IsMale:<%= Request["isMale"]%>
<br />
Email:<%= Request["email"]%>
<br />
Details:<%= Request["details"]%>
10：serializeArray()方法
該方法將頁面表單序列化成一個JSON結構的對象，該對象以"鍵/值"對集合的形式封裝了表單裡的所有元素值。
這裡注意的是該方法返回的是一個JSON對象，而不是JSON字符串
該JSON對象結構如下：
. 代碼如下:
[
{"name": "name1" , "value": "value1"},
{"name": "name2" , "value": "value2"},
{"name": "name3" , "value": "value3"}
]
var jsonData = $("form").serializeArray();
var textName = jsonData[0].name;
var textValue = jsonData[0].value;
11：設置全局Ajax默認選項
在應用中，經常編寫大量的Ajax方法來實現各種功能，每次都在$.ajax()方法中設置大量參數，非常不方便，jQuery提供了$.ajaxSetup()方法，可以設置
全局的Ajax默認參數項。
$.ajaxSetup([options]);
. 代碼如下:
$.ajaxSetup({
url: 'Test.html',
type: 'POST',
global: false, //禁止觸發全局事件
dataType: 'json',
error: function(xhr, textStatus, errorThrown) {
alert(textStatus);
}
});
12：jQuery全局事件
ajaxComplete(callback); //請求完成時觸發該事件
ajaxError(callback); //請求出現錯誤時觸發該事件
ajaxSend(callback); //請求發送前觸發該事件
ajaxStart(callback); //請求開始時觸發該事件
ajaxStop(callback); //請求結束時觸發該事件
ajaxSuccess(callback); //請求成功時觸發該事件
ajaxStart()方法和ajaxStop方法的事件處理程序是一個無參的函數，其余都可以有3個參數，語法格式如下：
. 代碼如下:
function(event, XHR, settings) {
event是觸發的事件對象
XHR是XMLHttpRequest對象
settings是Ajax請求配置參數
}
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxGlobalEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/AjaxGlobalEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
textarea{ width:350px; height:120px; }
#loading{ background-color:#eee; border:solid 1px #999; margin:5px 0 10px; padding:5px; font-size:13px; }
</style>
</head>
<body>
<div id="show"></div>
<button name="btnLoad">Load</button>
</body>
</html>
AjaxGlobalEvent.js
. 代碼如下:
$(document).ready(function(){
$("#show").ajaxStart(function(){
$(this).append("<p>Run ajaxStart</p>");
});
$("#show").ajaxStop(function(){
$(this).append("<p>Run ajaxStop</p>");
});
$("#show").ajaxComplete(function(){
$(this).append("<p>Run ajaxComplete</p>");
});
$("#show").ajaxError(function(){
$(this).append("<p>Run ajaxError</p>");
});
$("#show").ajaxSend(function(){
$(this).append("<p>Run ajaxSend</p>");
});
$("#show").ajaxSuccess(function(){
$(this).append("<p>Run ajaxSuccess</p>");
});
$("button[name='btnLoad']").click(function(){
$.get("http://www.sohu.com");
});
});
基於Web標准(XHTML + CSS)的展示
使用DOM進行動態顯示和交互
使用XMLHttpRequest進行數據交換和相關操作
使用javascript將所有內容綁定在一起
Ajax的核心是JavaScript的XMLHttpRequest對象，它是一種支持異步請求的技術。簡而言之，使用JS可以控制XMLHttpRequest對象向服務器提出請求並處理響應，
而不影響用戶對頁面的正常訪問。對於XMLHttpRequest對象，不同的浏覽器提供了不同的支持，IE是將其作為ActiveX控件集成到浏覽器中的，而其他主流的浏覽器直接
作為一般的JS對象來創建。
2：JS中的Ajax
XMLHttpRequest對象的屬性及簡要說明
名稱
說明
readyState
通信的狀態，當XMLHttpRequest對象把一個HTTP請求發送到服務器，到接收到服務器響應信息，整個過程將經歷5種狀態，該屬性取值為為0-4
onreadystatechange
設置回調事件處理程序，當readyState屬性的值改變時，會激發此事件
responseText
服務器返回的text/html格式的文檔
responseXML
服務器返回的text/xml格式的文檔
status
描述了HTTP響應short類型的狀態代碼，100表示Continue, 101表示Switching protocols數據交換，200表示執行正常，404表示未找到頁面，500表示內部程序錯誤
statusText
HTTP響應的狀態代碼對應的文本(OK, not found)
readyState屬性代碼
代碼
說明
0
代表未初始化的狀態。創建了一個XMLHttpRequest對象，尚未初始化
1
代表連接狀態，已經調用了open方法，並且已經准備好發送請求
2
代表發送狀態，已經調用了send方法發出請求，尚未得到響應結果
3
代表正在接收狀態，已經接收了HTTP響應的頭部信息，正在接收響應內容
4
代表已加載狀態，此時響應內容已完全被接收
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax</title>
<script src="JS/ajax.js"></script>
<style type="text/css">
body { padding:20px; }
#browser{ border:solid 1px #666; width:500px; height:300px; overflow:auto; }
#content{ width:500px; height:80px; margin:10px 0; }
</style>
</head>
<body>
<input id="Access" type="button" value="Access" />
<br />
<textarea id="content"></textarea>
<div id="browser"></div>
</body>
</html>
ajax.js的內容：
. 代碼如下:
var xmlRequest;
function CreateRequest()
{
/* 創建XMLHttpRequest對象 */
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
}
function ResponseHandler()
{
if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
{
/* 如果通信成功，並且響應正常，執行以下操作 */
var reqContent = xmlRequest.responseText;
document.getElementById("browser").innerHTML = reqContent;
document.getElementById("content").value = reqContent;
}
}
function AjaxAccess()
{
/* 異步請求百度首頁 */
xmlRequest = CreateRequest(); //創建XMLHttpRequest對象
xmlRequest.onreadystatechange = ResponseHandler; //設置回調函數
xmlRequest.open("GET","http://www.baidu.com"); //初始化請求對象
xmlRequest.send(null); //發送請求信息
/* 觸發事件以後提示正在打開百度首頁 */
var brow = document.getElementById("browser");
brow.innerHTML = "<h1>正在打開百度搜索</h1>";
}
window.onload = function()
{
document.getElementById("Access").onclick = AjaxAccess; //設置按扭單擊事件
}
3：jQuery中的Ajax
$.ajax(options)方法
options是以“鍵/值”對的形式設置的，用於設置Ajax請求的參數，如請求方式、請求URL、回調函數等。
常用屬性如下：
url: 發送請求的地址
type:請求方式，GET和POST，默認為GET
timeout: 設置請求超時時間，該屬性為數值型，單位為毫秒
data: 發送到服務器的數據，“鍵/值”對形式，該屬性可以是對象或者字符串，如果是對象，則自動轉換為字符串
dataType: 預期服務器返回的數據類型，該屬性為字符串類型。可選值如下： xml、html：返回純文本HTML信息，包含的標簽(script標簽或者style標簽)會在
文本插入DOM的時候執行、 script：返回純文本JS代碼、json、jsonp、text
contentType: 發送信息至服務器時內容編碼類型，該屬性為字符串類型，默認值為"application/x-www-form-urlencoded"，一般不用設置，因為默認值適合大多數應用場合
beforeSend: 請求發送前的事件，該屬性為其設置事件處理程序，可用於發送前修改XMLHttpRequest的參數，如頭信息。
. 代碼如下:
function(XMLHttpRequest) {
this; /*這裡this關鍵字用於訪問.ajax()方法的options參數對象*/
}
complete: 請求完成後的事件，無論請求成功與否，都將觸發該事件。
function(XMLHttpRequet, textStatus) {
this; /*這裡this關鍵字用於訪問.ajax()方法的options參數對象*/
}
textStatus參數返回當前請求的執行狀態(succss和error等)
success: 請求執行成功時的事件。
function(data, textStatus) {
this; /*這裡this關鍵字用於訪問.ajax()方法的options參數對象*/
}
error: 請求執行失敗時的事件
function(XMLHttpRequest, textStatus, errorThrown) {
this; /*這裡this關鍵字用於訪問.ajax()方法的options參數對象*/
}
global: 是否觸發全局Ajax事件，該屬性為Boolean類型，默認值為false
. 代碼如下:
$(document).ready(function(){
$("#Access").click(function(){
var xmlReq = $.ajax({
type:'GET',
url:'http://www.sougou.com',
success:function(reqContent)
{
$("#browser").html(reqContent);
$("#content").text(reqContent);
}});
$("#browser").html("<h1>正在打開搜狗搜索</h1>");
});
});
4：load方法
load(url, [data], [callback]);
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Load</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Load.js"></script>
<style type="text/css">
body { padding:20px; }
#commentList{ border:solid 2px #888; width:500px; overflow:auto; }
#commentList p{ border-bottom:solid 1px #ddd; margin-bottom:30px; padding-bottom:15px; font-size:13px; }
#commentList div{ background:#eee; }
#commentList h3{ color:#888; padding:10px 0 0 0; }
</style>
</head>
<body>
<h2>回復列表</h2>
<input type="button" id="refresh" value="刷新列表" />
<div id="commentList"></div>
</body>
</html>
Load.js
. 代碼如下:
$(document).ready(function(){
$("#refresh").click(function(){
/* 要訪問的頁面URL，根據你實際情況做相應修改 */
var url = "http://www.sogou.com";
$("#commentList").load(url); //加載相應內容
});
});
5：$.get()方法
是一個全局方法，該方法使用GET方式來進行異步請求，語法格式如下：
. 代碼如下:
var xmlReq = $.get(url, [data], [callback], [type]);
$.get("www.baidu.com",
{
user: 'zhangsan'
}
);
callback: function(data, textStatus) {}
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Get</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Get.js"></script>
<style type="text/css">
body{ padding:30px 80px; font-size:14px; }
#blogList{ width:240px; height:120px; margin:10px 0; padding:8px; border:solid 1px #777; font-size:13px; }
#blogList span{ display:inline-block; width:50px; text-align:right; margin-right:20px; color:#999; }
</style>
</head>
<body>
分類：
<select id="blogClass">
<option selected="selected" value="">所有</option>
<option>CSS</option>
<option>.NET</option>
</select>
<input type="button" id="Search" value="Search" />
<div id="blogList"></div>
</body>
</html>
Get.js
. 代碼如下:
$(document).ready(function(){
$("#Search").click(function(){
/* 使用Get方式請求指定URL */
$.get("http://localhost:2154/Web/BlogList.aspx",
{
key : $("#blogClass").val()
},
function(data){
$("#blogList").html(data);
});
});
$("#Search").click(); //觸發一次單擊事件
});
BlogList.aspx
. 代碼如下:
<%@ Page Language="C#" %>
<%
/*
* 分別向數組裡添加一些數據，
* 這些數據一般來自數據庫，
* 這裡只是模擬，就靜態添加了
*/
string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET", ".NET" };
string[] blogTitle = { "CSS中的padding", "CSS入門", "C#中的類",
"C#基礎知識", "C#面向對象", "C#設計模式" };
string key = Request["key"]; //獲取請求服務器的關鍵字
/*
* 遍歷數組集合
*/
for (int i = 0; i < blogClass.Length; i++)
{
/*
* 如果關鍵字為空，顯示所有的記錄
* 如果關鍵字等於分類名稱，顯示該分類下的記錄
*/
if (key == null || key == string.Empty || key == blogClass[i])
{
%>
<div>
<span><%= blogClass[i]%></span><%= blogTitle[i]%>
</div>
<%
}
}
%>
6：$.post()方法
var xmlReq = $.post(url, [data], [callback], [type]);
$.get()方法是以GET方式提交的數據，所有的參數信息都將追加到URL後面，而Web請求一般對URL長度有一定限制，所以$.get()方法傳遞的數據長度也有一定的上限，
而$.post()方法是將參數作為消息的實體發送到服務器的，對數據無長度上的影響。
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Post</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/Post.js"></script>
<style type="text/css">
body{ padding:20px 80px; font-size:14px; }
#login{ width:240px; height:160px; margin:10px 0; padding:8px; border:solid 1px #777; font-size:13px; }
#login h4{ color:#666; margin:5px 0; font-size:18px; }
#login span{ font-size:15px; line-height:40px; font-weight:700; }
input,button{ margin:15px 0 0 0; line-height:14px; }
input{ height:15px; }
</style>
</head>
<body>
<div id="login">
<h4>用戶登錄</h4>
Username:<input name="username" />
<br />
Password:<input name="password" type="password" />
<br />
<button id="submit">Submit</button>
</div>
</body>
</html>
Post.js
. 代碼如下:
$(document).ready(function(){
$("#submit").click(function(){
$.post("http://localhost:2154/Web/Login.aspx",
{
username : $("input[name='username']").val(),
password : $("input[name='password']").val()
},
function(data){
$("#login").html(data);
});
});
});
Login.aspx
. 代碼如下:
<%@ Page Language="C#" %>
<span>歡迎你 <font color="red"><%= Request.Form["username"] %></font>
<br />
你的身份是 <font color="red">管理員</font>
<br />
<button>修改資料</button>
<button>注銷登錄</button>
</span>
7：$.getJSON()方法
var xmlReq = $.getJSON(url, [data], [callback]);
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/getJSON.js"></script>
<style type="text/css">
body{ padding:20px; }
#peoples{ background:#999; border:solid 2px #333; width:300px; }
#peoples td{ padding:5px; }
#peoples thead{ background:#555; color:#FFF; font-weight:700; font-size:16px; }
#peoples tbody{ font-size:13px;background:#fff; }
</style>
</head>
<body>
<table id="peoples" cellspacing="1">
<thead>
<tr><td>Name</td><td>Age</td><td>Sex</td></tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
getJSON.js
. 代碼如下:
$(document).ready(function(){
/* 異步請求，載入 JSON 數據 */
$.getJSON("http://localhost:2154/Web/PeopleList.aspx",
function(data){
/* 遍歷請求結果 */
$.each(data,
function(index, p){
var html = "<tr><td>" + p.name + "</td><td>" + p.age +
"</td><td>" + (p.isMale ? "male" : "female") + "</td></tr>"
$("#peoples>tbody").append(html);
});
});
});
PeopleList.aspx
. 代碼如下:
<%@ Page Language="C#" %>
[{
"name" : "David li",
"age" : 61,
"isMale" : true
},{
"name" : "Michael Clinton",
"age" : 53,
"isMale" : true
},{
"name" : "Brook Ann",
"age" : 23,
"isMale" : false
},{
"name" : "Mary Johnson",
"age" : 35,
"isMale" : false
},{
"name" : "Elizabeth Jones",
"age" : 33,
"isMale" : false
},{
"name" : "James Smith",
"age" : 25,
"isMale" : true
}]
8：$.getScript()方法
var xmlReq = $.getScript(url, [callback]);
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>getScript</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/getScript.js"></script>
<style type="text/css">
body{ padding:30px; }
</style>
</head>
<body>
<h1>使用getScript()方法異步加載JavaScript文件</h1>
<input type="button" value="Button" id="input" />
</body>
</html>
getScript.js
. 代碼如下:
$(document).ready(function(){
$("#input").click(function(){
$.getScript("Test.js", function(data){
showMsg();
});
});
});
Test.js
. 代碼如下:
function showMsg(){
alert("This is Message");
}
9：序列化表單數據
jQuery為了解決參數很多的問題，提供了序列化的方法簡化對表單數據的收集和格式化。
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>serialize</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/serialize.js"></script>
<style type="text/css">
body{ padding:20px; }
</style>
</head>
<body>
<table>
<tbody>
<form onsubmit="return false;" >
<tr><td>Username:</td><td><input name="username" /></td></tr>
<tr><td>Age:</td><td><input name="age" /></td></tr>
<tr><td>Sex:</td><td>
<select name="isMale">
<option value="true">男</option>
<option value="false">女</option>
</select></td></tr>
<tr><td>Email:</td><td><input name="email" /></td></tr>
<tr><td>Details:</td><td><textarea name="details"></textarea></td></tr>
<tr><td></td><td><button name="btnSubmit">Submit</button></td></tr>
</form>
</tbody>
</table>
</body>
</html>
serialize.js
. 代碼如下:
$(document).ready(function(){
$("button[name='btnSubmit']").click(function(){
$.post("http://localhost:2154/Web/Register.aspx",
$("form").serialize(), //序列化表單數據
function(data){
$("table tbody").append("<tr><td colspan=2>" + data + "</td></tr>");
});
});
});
Register.aspx
. 代碼如下:
<%@ Page Language="C#" %>
Username:<%= Request["username"] %>
<br />
Age:<%= Request["age"] %>
<br />
IsMale:<%= Request["isMale"]%>
<br />
Email:<%= Request["email"]%>
<br />
Details:<%= Request["details"]%>
10：serializeArray()方法
該方法將頁面表單序列化成一個JSON結構的對象，該對象以"鍵/值"對集合的形式封裝了表單裡的所有元素值。
這裡注意的是該方法返回的是一個JSON對象，而不是JSON字符串
該JSON對象結構如下：
. 代碼如下:
[
{"name": "name1" , "value": "value1"},
{"name": "name2" , "value": "value2"},
{"name": "name3" , "value": "value3"}
]
var jsonData = $("form").serializeArray();
var textName = jsonData[0].name;
var textValue = jsonData[0].value;
11：設置全局Ajax默認選項
在應用中，經常編寫大量的Ajax方法來實現各種功能，每次都在$.ajax()方法中設置大量參數，非常不方便，jQuery提供了$.ajaxSetup()方法，可以設置
全局的Ajax默認參數項。
$.ajaxSetup([options]);
. 代碼如下:
$.ajaxSetup({
url: 'Test.html',
type: 'POST',
global: false, //禁止觸發全局事件
dataType: 'json',
error: function(xhr, textStatus, errorThrown) {
alert(textStatus);
}
});
12：jQuery全局事件
ajaxComplete(callback); //請求完成時觸發該事件
ajaxError(callback); //請求出現錯誤時觸發該事件
ajaxSend(callback); //請求發送前觸發該事件
ajaxStart(callback); //請求開始時觸發該事件
ajaxStop(callback); //請求結束時觸發該事件
ajaxSuccess(callback); //請求成功時觸發該事件
ajaxStart()方法和ajaxStop方法的事件處理程序是一個無參的函數，其余都可以有3個參數，語法格式如下：
. 代碼如下:
function(event, XHR, settings) {
event是觸發的事件對象
XHR是XMLHttpRequest對象
settings是Ajax請求配置參數
}
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxGlobalEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/AjaxGlobalEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
textarea{ width:350px; height:120px; }
#loading{ background-color:#eee; border:solid 1px #999; margin:5px 0 10px; padding:5px; font-size:13px; }
</style>
</head>
<body>
<div id="show"></div>
<button name="btnLoad">Load</button>
</body>
</html>
AjaxGlobalEvent.js
. 代碼如下:
$(document).ready(function(){
$("#show").ajaxStart(function(){
$(this).append("<p>Run ajaxStart</p>");
});
$("#show").ajaxStop(function(){
$(this).append("<p>Run ajaxStop</p>");
});
$("#show").ajaxComplete(function(){
$(this).append("<p>Run ajaxComplete</p>");
});
$("#show").ajaxError(function(){
$(this).append("<p>Run ajaxError</p>");
});
$("#show").ajaxSend(function(){
$(this).append("<p>Run ajaxSend</p>");
});
$("#show").ajaxSuccess(function(){
$(this).append("<p>Run ajaxSuccess</p>");
});
$("button[name='btnLoad']").click(function(){
$.get("http://www.sohu.com");
});
});
小編推薦
熱門推薦