<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    so true

    心懷未來,開創未來!
    隨筆 - 160, 文章 - 0, 評論 - 40, 引用 - 0
    數據加載中……

    Ajax基本知識

    Ajax全稱是Asynchronous JavaScript XML,這并不是一項新技術,而只是將一些已有的技術進行了整合,從而實現了頁面在不刷新的狀態下也可以連接服務器來更新頁面內容,也即部分刷新技術,或不完全刷新。
    Ajax的核心類是XMLHttpRequest類,從IE5.0開始被支持,Ajax的處理過程大概是這個樣子的:

    1.首先通過JavaScript來建立一個XMLHttpRequest類的實例;
    2.通過屬性onreadystatechange來設定回調函數;
    3.調用該實例的open方法:open(數據傳送方式GET/POST,服務器URL,是否異步,[用戶名],[口令]);
    4.調用該實例的send方法:send(XML數據/字符串/流/無符號整數數組/null),注意如果為null,則表示不傳遞額外的數據,僅用Open方法中指定的服務器URL來進行響應即可;
    5.在回調函數中先通過readyState屬性檢測異步操作的狀態:未初始化(0),正在加載(1),已加載(2),交互(3),已完成(4);
    6.再在回調函數中檢測服務器返回的HTTP狀態碼status,200代表正常;
    7.再在回調函數中,利用返回的數據(responseBody:返回為無符號整數數組/responseStream:返回為IStream流/responseText :返回字符串/responseXML:返回為XML格式數據。),基于DOM,使用JavaScript技術來修改文檔的結構。

    總結一下:
    其實,Ajax就是通過JavaScript創建XMLHttpRequest對象,再由JavaScript調用XMLHttpRequest對象的方法完成異步通信;然后,再由JavaScript通過DOM的屬性和方法,完成頁面的不完全刷新。

    最后再說明一下異步:同步表示send之后需要一直等待服務器完全響應之后才能進行后續的操作,因此需要等待;而異步表示send之后立即返回,可以繼續其他的操作,而服務器一旦返回后可以自行調用回調函數來執行動作。

    在ASP.NET應用中,可以先安裝一個Microsoft ASP.NET 2.0 AJAX Extensions 1.0,然后就可以使用Ajax的一些常用控件了,比如UpdatePanel,以及Timer等,但用之前不要忘記在頁面開始加一個ScriptManager;也可以再安裝AjaxControlToolkit來獲得更多的Ajax控件。

    =========================
    Ajax 應用程序所用到的基本技術
    1.html
        組成web頁面所用到的基本元素
    2.javascript
        javascript代碼是AJAX應用程序核心的代碼,幫助ajax程序改進與服務器通訊以實現不一樣的用戶體驗
    3.Dynamic HTML
        用于動態更新web頁面
    4.DOM(文檔對象模型)
        用于通過javascrip代碼處理HTML或服務器返回的XML

    javascript與服務器端通信的最核心的對象
    xmlHttp對象:傳送XML格式數據的超文本傳輸協議
    實際上XMLHTTP傳輸的數據可以是XML格式數據,也可以是字符串,流,或者一個無符號整數數組。還可以是URL的參數,它下達的結果可以是XML格式數據,也可以是字符串,流,或者一個無符號整數數組。

    調用步驟
    1、創建XMLHTTP對象
    2、打開與服務端的連接,同時定義指令發送方式,服務網頁(URL)和請求權限等。 
    3、發送指令。
    4、等待并接收服務端返回的處理結果。
    5、釋放XMLHTTP對象

    方法
    open(數據傳送方式(GET/POST/HEAD),服務器URL,是否異步執行,[用戶名],[口令])
    如:
    open("GET","http://www.sohu.com",true)

    send(content)
    可以是XML格式數據,也可以是字符串,流,或者一個無符號整數數組。也可以省略,讓指令通過Open方法的URL參數代入。
    如:send(null);

    setRequestHeader(HTTP 頭,HTTP 頭值)
    如:xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

    abort()取消當前 HTTP 請求

    getAllResponseHeaders ()
    從響應信息中檢索所有的HTTP 頭字段

    getResponseHeader(HTTP 頭)
    從響應信息正文中獲得一個 HTTP 標頭值

    屬性
    onreadystatechange:用以狀態改變后所要作的處理的事件句柄。
    readyState 異步操作的狀態:未初始化(0),正在加載(1),已加載(2),交互(3),已完成(4)
    responseBody:返回為無符號整數數組。
    responseStream:返回為IStream流。
    responseText :返回字符串。
    responseXML:返回為XML格式數據。
    status:服務器返回的HTTP狀態碼
    statusText :服務器HTTP響應行狀態

    說明
    1.同步和異步
            同步狀態下發送http請求后,只有當客戶端接收到來自服務端的全部應答數據或協議棧超時返回!反之異步狀態下,直接返回。在異步方式下數據包一旦發送完畢就結束send進程客戶端執行其他的操作,而在同步方式下客戶端要等到服務器返回確認消息后才結束send進程。實際運用中我們根據實際情況使用同步或異步,注意了如果設為同步狀態可能因為服務器返回數據量大或響應慢而導致不必要的長時間等待!

    2.POST和GET
            用"POST"方式發送數據.可以大到4MB "GET"只能256KB
    ========================================================
    一個實例:
    <!--Request.htm----------------------------------------------------------->

    <html>

        <head>

            <title>Ajax應用實例</title>

            <script type="text/javaScript">

                var xmlHttp;

    var requestType="";

    function createXMLHttpRequest(){

        if(window.ActiveXObject){

            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        else if(window.XMLHttpRequest){

            xmlHttp = new XMLHttpRequest();

        }

    }

    function startRequest(theRequestType){

    requestType = theRequestType;

        createXMLHttpRequest();

        xmlHttp.onreadystatechange = myCallback;

        xmlHttp.open("GET","Response.xml",true);

        xmlHttp.send(null);

    }

    function myCallback(){

        if(xmlHttp.readyState==4){

            if(xmlHttp.status==200){

                if(requestType=="all")

                    listAll();

                else if(requestType=="north")

                    listNorth();

            }

        }

    }

    function listAll(){

        var xmlDoc = xmlHttp.responseXML;

        var allProvs = xmlDoc.getElementsByTagName("prov");

        outputList("all",allProvs);

    }

    function listNorth(){

        var xmlDoc = xmlHttp.responseXML;

        var north = xmlDoc.getElementsByTagName("north")[0];

        var northProvs = north.getElementsByTagname("prov");

        outputList("north",northProvs);

    }

    function outputList(title,provs){

        var out=title;

        var currentProv = null;

        for(var i=0;i<provs.length;i++){

        currentProv = provs[i];

        out = out + “<br/>” + currentProv.childNodes[0].nodeValue;

        }

        document.getElementById(title).innerHTML = out;

    }

            </script>

        </head>

        <body>

            <h1> Ajax應用實例</h1>

            <form action="#">

    <input type="button" value="列出所有沿海省市"

    conclick="startRequest('all'); "/>

    <div id="all"></div>

    <input type="button" value="列出江北沿海省市"

            conclick="startRequest('north'); "/>

    <div id="north"></div>

            </form>

        </body>

    </html>

    <!--Response.xml---------------------------------------------------------->

    <?xml version="1.0"encoding="utf-8" ?>

    <provs>

        <north>

                <prov>遼寧</prov><prov>河北</prov><prov>天津</prov>

                <prov>山東</prov><prov>江蘇</prov>

        </north>

        <south>

                <prov>浙江</prov><prov>福建</prov><prov>廣東</prov>

                <prov>廣西</prov><prov>海南</prov><prov>上海</prov>

                <prov>臺灣</prov><prov>香港</prov><prov>澳門</prov>

        </south>

    </provs>
     

    posted on 2008-09-21 01:22 so true 閱讀(472) 評論(0)  編輯  收藏 所屬分類: Others

    主站蜘蛛池模板: 日本高清免费中文在线看 | 亚洲国产香蕉人人爽成AV片久久| 亚洲精品第一国产综合精品| 免费A级毛片av无码| 亚洲狠狠综合久久| 最近中文字幕无免费| 久久综合亚洲色一区二区三区| 99久久国产免费中文无字幕| 亚洲一级二级三级不卡| 亚洲一区二区三区免费观看| 久久精品亚洲中文字幕无码麻豆| 亚洲黄色免费观看| 亚洲入口无毒网址你懂的| 成人免费在线观看网站| 男女作爱免费网站| 亚洲成a人片77777kkkk| 亚洲第一网站免费视频| 亚洲人成日本在线观看| 日韩在线视频免费看| 国产精品偷伦视频免费观看了| 亚洲精品国产精品乱码视色| 久久精品成人免费观看| 2019亚洲午夜无码天堂| 亚洲А∨精品天堂在线| a毛片免费在线观看| 亚洲国产视频一区| 日本19禁啪啪无遮挡免费动图| 免费夜色污私人影院网站电影| 亚洲国产精品无码久久一区二区| 51在线视频免费观看视频| 亚洲人成网站色7799| 亚洲午夜福利精品无码| 亚洲成人在线免费观看| AV激情亚洲男人的天堂国语| 亚洲无av在线中文字幕| 国产一卡二卡3卡四卡免费| 国产精品亚洲小说专区| 亚洲一区二区在线视频| 国产精品免费播放| 99精品视频免费观看| 女bbbbxxxx另类亚洲|