<a href="/" title="Ubuntu系統(tǒng)_Ubuntu軟件下載_Ubuntu電腦知識(shí)_Ubuntu服務(wù)器_中文網(wǎng)">

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

一.摘要

本系列文章將帶您進(jìn)入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗(yàn)和解決方案, 即使你會(huì)使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

本篇文章講解如何使用jQuery方便快捷的實(shí)現(xiàn)Ajax功能.統(tǒng)一所有開發(fā)人員使用Ajax的方式.

二.前言

Ajax讓用戶頁面豐富起來, 增強(qiáng)了用戶體驗(yàn). 使用Ajax是所有Web開發(fā)的必修課. 雖然Ajax技術(shù)并不復(fù)雜, 但是實(shí)現(xiàn)方式還是會(huì)因?yàn)槊總€(gè)開發(fā)人員的而有所差異.jQuery提供了一系列Ajax函數(shù)來幫助我們統(tǒng)一這種差異, 并且讓調(diào)用Ajax更加簡單.

三.原始Ajax與jQuery中的Ajax

首先通過實(shí)例, 來看一下jQuery實(shí)現(xiàn)Ajax有多簡單. 下面是一個(gè)使用原始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調(diào)用</button><br />
    <br />
    <div id="divResult"></div>
</body>
</html>

系列文章導(dǎo)航：

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

四.jQuery Ajax詳解

jQuery提供了幾個(gè)用于發(fā)送Ajax請求的函數(shù). 其中最核心也是最復(fù)雜的是jQuery.ajax( options ),所有的其他Ajax函數(shù)都是它的一個(gè)簡化調(diào)用. 當(dāng)我們想要完全控制Ajax時(shí)可以使用此結(jié)果, 否則還是使用簡化方法如get, post, load等更加方便. 所以jQuery.ajax( options ) 方法放到最后一個(gè)介紹. 先來介紹最簡單的load方法:

1. load( url, [data], [callback] )

Returns: jQuery包裝集

說明:

load方法能夠載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中。

默認(rèn)使用 GET 方式, 如果傳遞了data參數(shù)則使用Post方式.

- 傳遞附加參數(shù)時(shí)自動(dòng)轉(zhuǎn)換為 POST 方式。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector", 默認(rèn)的選擇器是"body>*".

講解:

load是最簡單的Ajax函數(shù), 但是使用具有局限性:

它主要用于直接返回HTML的Ajax接口
load是一個(gè)jQuery包裝集方法,需要在jQuery包裝集上調(diào)用,并且會(huì)將返回的HTML加載到對象中, 即使設(shè)置了回調(diào)函數(shù)也還是會(huì)加載.

不過不可否認(rèn)load接口設(shè)計(jì)巧妙并且使用簡單.下面通過示例來演示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)
            {
                //發(fā)送Get請求
                $("#divResult").load("../data/AjaxGetMethod.ASPx?param=btnAjaxGet_click" + "&tim
estamp=" + (new Date()).getTime());
            });

            $("#btnAjaxPost").click(function(event)
            {
                //發(fā)送Post請求
                $("#divResult").load("../data/AjaxGetMethod.ASPx", { "param": "btnAjaxPost_click" });
            });

            $("#btnAjaxCallBack").click(function(event)
            {
                //發(fā)送Post請求, 返回后執(zhí)行回調(diào)函數(shù).
                $("#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)
            {
                //發(fā)送Get請求, 從結(jié)果中過濾掉 "鞍山" 這一項(xiàng)
                $("#divResult").load("../data/AjaxGetCityInfo.ASPx?resultType=html" + "&timestamp
=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
            });

        })
    </script>

</head>
<body>    
    <button id="btnAjaxGet">使用Load執(zhí)行Get請求</button><br />
    <button id="btnAjaxPost">使用Load執(zhí)行Post請求</button><br />
    <button id="btnAjaxCallBack">使用帶有回調(diào)函數(shù)的Load方法</button><br />
    <button id="btnAjaxFiltHtml">使用selector過濾返回的HTML內(nèi)容</button>
    <br />
    <div id="divResult"></div>
</body>
</html>

系列文章導(dǎo)航：

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

3. jQuery.getJSON( url, [data], [callback] )

Returns: XMLHttpRequest

相當(dāng)于: jQuery.get(url, [data],[callback], "json")

說明:

通過 HTTP GET 請求載入 JSON 數(shù)據(jù)。

在 jQuery 1.2 中，您可以通過使用JSONP 形式的回調(diào)函數(shù)來加載其他網(wǎng)域的JSON數(shù)據(jù)，如 "myurl?callback=?"。jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。

注意：此行以后的代碼將在這個(gè)回調(diào)函數(shù)執(zhí)行前執(zhí)行。

講解:

getJSON函數(shù)僅僅將get函數(shù)的type參數(shù)設(shè)置為"JSON"而已. 在回調(diào)函數(shù)中獲取的數(shù)據(jù)已經(jīng)是按照J(rèn)SON格式解析后的對象了:

$.getJSON("../data/AjaxGetCityInfo.ASPx", { "resultType": "json" }, function(data, textStatus)
{
      alert(data.length);
      alert(data[0].CityName);
});

系列文章導(dǎo)航：

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!