|
|
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
一.摘要
本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經驗和解決方案, 即使你會使用jQuery也能在閱讀中發現些許秘籍.
本篇文章講解如何使用jQuery方便快捷的實現Ajax功能.統一所有開發人員使用Ajax的方式.
二.前言
Ajax讓用戶頁面豐富起來, 增強了用戶體驗. 使用Ajax是所有Web開發的必修課. 雖然Ajax技術并不復雜, 但是實現方式還是會因為每個開發人員的而有所差異.jQuery提供了一系列Ajax函數來幫助我們統一這種差異, 并且讓調用Ajax更加簡單.
三.原始Ajax與jQuery中的Ajax
首先通過實例, 來看一下jQuery實現Ajax有多簡單. 下面是一個使用原始Ajax的示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht
ml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Ajax</title>
<script type="text/Javascript">
$(function()
{
var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event)
{
var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
document.getElementById("divResult").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "data/AjaxGetCityInfo.ASPx?resultType=html", true);
xhr.send(null);
});
})
//跨瀏覽器獲取XmlHttpRequest對象
function AjaxXmlHttpRequest()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// InterNET Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的瀏覽器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
</script>
</head>
<body>
<button id="btnAjaxOld">原始Ajax調用</button><br />
<br />
<div id="divResult"></div>
</body>
</html>
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
四.jQuery Ajax詳解
jQuery提供了幾個用于發送Ajax請求的函數. 其中最核心也是最復雜的是jQuery.ajax( options ),所有的其他Ajax函數都是它的一個簡化調用. 當我們想要完全控制Ajax時可以使用此結果, 否則還是使用簡化方法如get, post, load等更加方便. 所以jQuery.ajax( options ) 方法放到最后一個介紹. 先來介紹最簡單的load方法:
1. load( url, [data], [callback] )
Returns: jQuery包裝集
說明:
load方法能夠載入遠程 HTML 文件代碼并插入至 DOM 中。
默認使用 GET 方式, 如果傳遞了data參數則使用Post方式.
- 傳遞附加參數時自動轉換為 POST 方式。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector", 默認的選擇器是"body>*".
講解:
load是最簡單的Ajax函數, 但是使用具有局限性:
- 它主要用于直接返回HTML的Ajax接口
- load是一個jQuery包裝集方法,需要在jQuery包裝集上調用,并且會將返回的HTML加載到對象中, 即使設置了回調函數也還是會加載.
不過不可否認load接口設計巧妙并且使用簡單.下面通過示例來演示Load接口的使用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
l1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Ajax - Load</title>
<script type="text/Javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/Javascript">
$(function()
{
$("#btnAjaxGet").click(function(event)
{
//發送Get請求
$("#divResult").load("../data/AjaxGetMethod.ASPx?param=btnAjaxGet_click" + "&tim
estamp=" + (new Date()).getTime());
});
$("#btnAjaxPost").click(function(event)
{
//發送Post請求
$("#divResult").load("../data/AjaxGetMethod.ASPx", { "param": "btnAjaxPost_click" });
});
$("#btnAjaxCallBack").click(function(event)
{
//發送Post請求, 返回后執行回調函數.
$("#divResult").load("../data/AjaxGetMethod.ASPx", { "param": "btnAjaxCallBack_click
" }, function(responseText, textStatus, XMLHttpRequest)
{
responseText = " Add in the CallBack Function! <br/>" + responseText
$("#divResult").html(responseText); //或者: $(this).html(responseText);
});
});
$("#btnAjaxFiltHtml").click(function(event)
{
//發送Get請求, 從結果中過濾掉 "鞍山" 這一項
$("#divResult").load("../data/AjaxGetCityInfo.ASPx?resultType=html" + "×tamp
=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
});
})
</script>
</head>
<body>
<button id="btnAjaxGet">使用Load執行Get請求</button><br />
<button id="btnAjaxPost">使用Load執行Post請求</button><br />
<button id="btnAjaxCallBack">使用帶有回調函數的Load方法</button><br />
<button id="btnAjaxFiltHtml">使用selector過濾返回的HTML內容</button>
<br />
<div id="divResult"></div>
</body>
</html>
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
3. jQuery.getJSON( url, [data], [callback] )
Returns: XMLHttpRequest
相當于: jQuery.get(url, [data],[callback], "json")
說明:
通過 HTTP GET 請求載入 JSON 數據。
在 jQuery 1.2 中，您可以通過使用JSONP 形式的回調函數來加載其他網域的JSON數據，如 "myurl?callback=?"。jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。
注意：此行以后的代碼將在這個回調函數執行前執行。
講解:
getJSON函數僅僅將get函數的type參數設置為"JSON"而已. 在回調函數中獲取的數據已經是按照JSON格式解析后的對象了:
$.getJSON("../data/AjaxGetCityInfo.ASPx", { "resultType": "json" }, function(data, textStatus)
{
alert(data.length);
alert(data[0].CityName);
});
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
五.Ajax相關函數.
jQuery提供了一些相關函數能夠輔助Ajax函數.
1. jQuery.ajaxSetup( options )
無返回值
說明:
設置全局 AJAX 默認options選項。
講解:
有時我們的希望設置頁面上所有Ajax屬性的默認行為.那么就可以使用此函數設置options選項, 此后所有的Ajax請求的默認options將被更改.
比如,設置 AJAX 請求默認地址為 "/xmlhttp/"，禁止觸發全局 AJAX 事件，用 POST 代替默認 GET 方法。其后的 AJAX 請求不再設置任何選項參數:
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
it知識庫：從零開始學習jQuery (六) AJAX快餐，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
