這篇文章主要介紹“AJAX的簡介和基礎(chǔ)總結(jié)”，在日常操作中，相信很多人在AJAX的簡介和基礎(chǔ)總結(jié)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”AJAX的簡介和基礎(chǔ)總結(jié)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

“專業(yè)、務(wù)實、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、軟件開發(fā)、設(shè)計服務(wù)業(yè)務(wù)。我們始終堅持以客戶需求為導(dǎo)向，結(jié)合用戶體驗與視覺傳達(dá)，提供有針對性的項目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領(lǐng)市場！

本節(jié)簡介（異步鏈接服務(wù)器對象）XMLHTTPRequest以及AJAX的簡介。

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML）。 AJAX有四個方面的好處：1.即減輕了服務(wù)器的負(fù)擔(dān)。2帶來了更好的用戶體驗。3.基于標(biāo)準(zhǔn)被廣泛的支持。4.擁有更好的頁面呈現(xiàn)和數(shù)據(jù)分離。

技術(shù)名稱 技術(shù)說明
javascript javascript是通用的腳本語言，AJAX是用javascript編寫的
css 用戶界面的樣式通過css來修改
DOM DOM通過javascript修改DOM，ajax可以在運(yùn)行時改變用戶界面，或者局部更新頁面中的某個節(jié)點(diǎn)。
XMLHttpRequest XMLHttpRequest對象 XMLHttpRequest對象允許web程序員從web服務(wù)器以后臺的方式獲取數(shù)據(jù)。數(shù)據(jù)的個數(shù)通常是XML或者是文本。

從上面我們看出，javascript就想膠水一樣將各個部分粘貼在一起，例如通過javascript操作BOM改變刷新用戶界面，通過修改className來改變css樣式風(fēng)格

1.異步對象連接服務(wù)器

不嚴(yán)謹(jǐn)?shù)恼f，ajax是一個簡單的多線程，它能夠是用戶在前臺多種操作而不間斷。ajax異步交互在后臺默默的工作著 在web中異步訪問是通過XMLHttpRequest對象來實現(xiàn)的，該對象最早是在ie5被作為activeX控件引入的。隨后各個瀏覽器紛紛支持該異步對象，首先必須創(chuàng)建對象。代碼如下：

復(fù)制代碼 代碼如下:

    var xmlHttp;
            function createXMLHrrpRequest() {
                if (window.ActiveXObject)
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                    xmlHttp = new XMLHttpRequest();
            }

該對象是先創(chuàng)建了一個全局變量xmlHttp，留以后函數(shù)中使用。另外創(chuàng)建異步對象函數(shù)createXMLHrrpRequest()

該過程用到了if語句方法，如果是IE采用window.ActiveXobject方法，如果不是，則用XMLHttpRequest方法創(chuàng)建函數(shù)。

 在創(chuàng)建完異步對象后，自然是使用該對象連接服務(wù)器，該對象有一系列十分有用的屬性和方法。

屬性/方法 說明
abort() 取消請求
getAllResponseHeaders() 獲取指定的Http頭
open(method,url) 創(chuàng)建請求，method指定請求類型，GET POST
send() 發(fā)送請求
setRequestHeader() 指定請求的http頭
onreadystatechange 發(fā)生任何狀態(tài)變化時的事件控制對象
readyState 

請求的狀態(tài)

0為尚未初始化

1為正在發(fā)送請求

2為請求完成

3為請求成功，正接收數(shù)據(jù)。

4為接收數(shù)據(jù)成功

responseText 服務(wù)器返回文本
responseXML 服務(wù)器返回xml
status 
服務(wù)器返回的http請求響應(yīng)值，常用的有

200表示請求成功

202表示請求被接收，但處理未完成

400表示錯誤的請求

404表示資源未找到

500表示內(nèi)部服務(wù)器錯誤，如aspx代碼錯誤

創(chuàng)建完XMLHttpRequest對象后首先利用open()方法建立一個請求，并向服務(wù)器發(fā)送，該方法的完整表示式如下：

open(methond,url,asynchronous,user,password)
其中，method表示請求的類型，通長為GET，POST。

url即請求的地址，可以是絕對地址，也可以是相對地址。

asynchronous是一個布爾值，表示是否為異步請求，默認(rèn)值為異步請求true。

user、password分別為可選的用戶名、密碼。

創(chuàng)建了異步對象后，要建立一個到服務(wù)器的請求可使用如下代碼：

xmlHttp.open("GET","1-1.aspx",true);
以上代碼用get方法請求的相對地址為9-1.aspx的頁面，方式是異步的。在發(fā)出了請求后便需要請求的狀態(tài)readyState屬性來判斷請求的情況，如果該屬性變化了，就會觸發(fā)onreadystatechange事件，因此通常的代碼如下:

復(fù)制代碼 代碼如下:

也就是直接編寫onRecorderStateChange的事件函數(shù)，如果readyState的狀態(tài)為4（數(shù)據(jù)接收成功）則繼續(xù)操作。但是通常情況下，不但需要判斷請求的狀態(tài)，還要判斷服務(wù)器返回的狀態(tài)status,因此上述代碼改為

復(fù)制代碼 代碼如下:

以上兩段代碼僅僅只是建立了請求，還需要使用send()方法來發(fā)送請求，該方法的原型如下：

send(body);
改方法僅有一個參數(shù)body，它表示要向服務(wù)器發(fā)送的數(shù)據(jù)，其格式為查詢字符串的形式，例如：

var body = "myName=isaac&age=25";
如果再open中指定的是get方式，則這些參數(shù)作為查詢字符串提交，如果指定的是post方式，則作為HTTP的POST方法提交。對于send()而言。body參數(shù)是必須的，如果不發(fā)送任何數(shù)據(jù)，則可以使用

xmlHttp.send(null)
特別的，如果使用POST方法進(jìn)行提交請求，那么在發(fā)送之前必須使用以下語句來設(shè)置HTTP的頭，語法如下：

xmlHttp.setRequestHeader("content-Type","application/x-www-form-urlencoded;")
服務(wù)器在收到客戶端請求之后，根據(jù)請求返回相應(yīng)的結(jié)果，這個結(jié)果通常為兩種形式，一種是文本形式，存儲在responseText中；另一種是XML格式，存儲在responseXML中?？蛻舳顺绦蚩梢詫η罢哌M(jìn)行字符串的處理，對后者進(jìn)行DOM相關(guān)的處理，例如可以對服務(wù)器返回值做如下的處理：

alert("服務(wù)器返回："+xmlHttp.responseText);
上述整個異步連接服務(wù)器的過程如下：

復(fù)制代碼 代碼如下:

為了解決異步連接ie緩存問題，需要在真實地址加一個與時間毫秒相關(guān)的參數(shù)，使得每次請求的地址都不一樣。而該參數(shù)服務(wù)器確是不需要的。

復(fù)制代碼 代碼如下:

var sUrl = "1-1.aspx?"+new Date().getTime();//地址不斷變化
        XMLHttp.open("GET",sUrl,true);

2.GET和POST模式

上面的實例中，除了請求異步服務(wù)器以外，并沒有向服務(wù)器發(fā)送額外的數(shù)據(jù)，通常在html請求中有g(shù)et和post模式，這兩種模式都可以作為異步請求發(fā)送數(shù)據(jù)的方式。

如果是GET請求，則直接把數(shù)據(jù)放入異步請求的URL地址中，而send方法不發(fā)送任何數(shù)據(jù)，例如：

復(fù)制代碼 代碼如下:

    var queryString = "firstName=isaac&birthday=0226";
            var sUrl = "1-1.aspx?" + queryString + "×tamp" + new Date().getTime();
            xmlHttp.open("GET", sUrl);
            xmlHttp.send(null); //該語句只發(fā)送null

如果是POST模式，則是把數(shù)據(jù)統(tǒng)一在send()方法中送出，請求地址沒有任何信息，并且必須設(shè)置請求的文件頭，例如：

復(fù)制代碼 代碼如下:

實例

為了更清楚地演示GET和POST的區(qū)別，編寫示例代碼，首先創(chuàng)建兩個文本框用于輸入用戶姓名和生日，并建立兩個按鈕分別用于GET和POST兩個方法來發(fā)送異步請求

復(fù)制代碼 代碼如下:

其中用戶填寫的數(shù)據(jù)統(tǒng)一用函數(shù)createQueryString()編寫，需要時予以調(diào)運(yùn)，代碼如下

復(fù)制代碼 代碼如下:

function crrateQueryString() {
                var firstName = document.getElementById("firstName").value;
                var birthday = document.getElementById("birthday").value;
                var queryString = "firstName=" + firstName + "&birthday=" + birthday;
                return queryString;
            }

服務(wù)器接收到請求數(shù)據(jù)后根據(jù)不同的時刻返回相應(yīng)的文本，客戶端接收到文本后顯示在相應(yīng)的div快中，代碼如下

復(fù)制代碼 代碼如下:

    function handleStateChange() {
                if (xmlHttp.readyState == 4 && xmlHttp.state == 200) {
                    var responseDiv = document.getElementById("serverResponse");
                    responseDiv.innerHTML = xmlHttp.responseText;
                }
            }

GET和POST各建立自己的函數(shù)doRequestUsingGET()和doRequestUsingPOST()。

完整代碼如下：

復(fù)制代碼 代碼如下:

服務(wù)器端主要是根據(jù)用戶輸入以及請求的類型返回不同的字符串

復(fù)制代碼 代碼如下:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    if(Request.HttpMethod == "POST")
        Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
    else if(Request.HttpMethod == "GET")
        Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
%>

從以上代碼看出POST和GET都發(fā)送了數(shù)據(jù)異步請求，通常在數(shù)據(jù)不多的時候使用GET，在數(shù)據(jù)較多的時候使用POST。

在使用PSOT發(fā)送中文字符時，post接收會亂碼，使用GET發(fā)送中文字符正常。這是因為異步對象xmlHttp在處理返回的responseText的時候，是按照UTF-8編碼的。
通常的解決辦法是escape()對發(fā)送的數(shù)據(jù)進(jìn)行編碼，然后在返回的responseText再使用unescape()進(jìn)行解碼。然而在javascript編程中通常不推薦escape()和unescape()。而推薦使用encodeURI()和decodeURI()。這里要正常運(yùn)行，必須對發(fā)送的數(shù)據(jù)進(jìn)行兩次encodeURI()編碼。
代碼如下

復(fù)制代碼 代碼如下:

    function createQueryString(){
        var firstName =document.getElementById("firstName").value;
        var birthday =document.getElementById("birthday").value;
        var queryString = "firstName="+firstName +"&birthday="+birthday;
        return encodeURI(encodeURI(queryString)); //兩次編碼解決中文亂碼問題
    }

而且在返回數(shù)據(jù)responeText時再進(jìn)行一次解碼，代碼如下

復(fù)制代碼 代碼如下:

function handleStateChange(){
            if(xmlHttp.readyState==4&&xmlHttp.status ==200){
                var responeDiv =document.getElementById(serverResponse);
                responeDiv.innerHTML = decodeURI(XMLHttp.responseText);//編碼
            }
        }

這樣POST模式下也能使用中文了。

3.服務(wù)器返回xml

XML是一種可擴(kuò)展標(biāo)記語言(Extensible Markup Language)，它是一種可自定義標(biāo)記的語言，用來克服html局限，按照實際功能來看，xml主要用于數(shù)據(jù)存儲。

在ajax中，服務(wù)器如果返回XML，可通過異步對象的responseXML屬性來獲取，開發(fā)者可以利用DOM的作用方法進(jìn)行處理。

假設(shè)服務(wù)器返回

復(fù)制代碼 代碼如下:

    Member List
   
        isaac
        W13
        Jun 24th
        Cancer
        1118159
   
   
        fresheggs
        W610
        Nov 5th
        Scorpio
        1038818
   
   
        girlwing
        W210
        Sep 16th
        Virgo
        1307994
   
   
        tastestory
        W15
        Nov 29th
        Sagittarius
        1095245
   
   
        lovehate
        W47
        Sep 5th
        Virgo
        6098017
   
   
        slepox
        W19
        Nov 18th
        Scorpio
        0658635
   
   
        smartlau
        W19
        Dec 30th
        Capricorn
        0006621
   
   
        tuonene
        W210
        Nov 26th
        Sagittarius
        0091704
   
   
        dovecho
        W19
        Dec 9th
        Sagittarius
        1892013
   
   
        shanghen
        W42
        May 24th
        Gemini
        1544254
   
   
        venessawj
        W45
        Apr 1st
        Aries
        1523753
   
   
        lightyear
        W311
        Mar 23th
        Aries
        1002908
   

下面利用異步對象獲取該XML，并將所有的項都羅列在表格中，初始化對象的方法與獲取文本完全相同，代碼如下：

復(fù)制代碼 代碼如下:

    var xmlHttp;

            function createXMLHttpRequest() {
                if (window.ActiveXObject)
                    xmlHttp = new ActiveXObject("Mincrosoft,XMLHttp");
                else if (window.XMLHttpRequest)
                    xmlHttp = new XMLHttpRequest();
            }

當(dāng)用戶單擊按鈕時發(fā)生異步請求，并獲取responseXML對象，代碼如下

復(fù)制代碼 代碼如下:

    function getXML(addressXML) {
                var sUrl = addressXML + "?timestamp=" + new Date();
                createXMLHttpRequest();
                xmlHttp.onRecorderStateChange = handleStateChange;
                xmlHttp.open("GET", url);
                xml.send(null);
            }

            function handleStateChange() {
                if (xmHttp, readyState == 4 && xmlHttp.status == 200)
                DrawTable(xmlHttp.responseXML); //responseXML獲取到xml文檔
            }

其中DrawTable()為后勤處理XML的函數(shù)，將服務(wù)器返回的XML對象responseXML直接作為參數(shù)傳遞,HTML部分如下：

復(fù)制代碼 代碼如下:

當(dāng)用戶單擊按鈕時出發(fā)getXML()，并將xml地址1-4.xml作為參數(shù)傳入

而函數(shù)DrawTable()的任務(wù)就是把XML中的數(shù)據(jù)拆分，并重新組裝到表格"member"中，代碼如下：可以看到處理XML的方法與DOM處理HTML完全相同

復(fù)制代碼 代碼如下:

    function DrawTable(myXML) {
                //用DOM方法操作XML文檔
                var oMembers = myXML.getElementsByTagName("member");
                var oMember = "",
                    sName = "",
                    sClass = "",
                    sBirth = "",
                    sConstell = "",
                    sMobile = "";
                for (var i = 0; i < oMembers.length; i++) {
                    oMember = oMembers[i];
                    sName = oMember.getElementsByTagName("name")[0].firstChild.nodeValue;
                    sClass = oMember.getElementsByTagName("class")[0].firstChild.nodeValue;
                    sBirth = oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;
                    sConstell = oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;
                    sMobile = oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;
                    //添加一行
                    addTableRow(sName, sClass, sBirth, sConstell, sMobile);
                }
            }

其中addTableRow()函數(shù)將拆分出來的每一組XML數(shù)據(jù)組裝成表格

復(fù)制代碼 代碼如下:

    function addTableRow(sName, sClass, sBirth, sConstell, sMobile) {
                //表格添加一行的相關(guān)操作
                var oTable = document.getElementById("member");
                var oTr = oTable.insertRow(oTable.rows.length);
                var aText = new Array();
                aText[0] = document.createTextNode(sName);
                aText[1] = document.createTextNode(sClass);
                aText[2] = document.createTextNode(sBirth);
                aText[3] = document.createTextNode(sConstell);
                aText[4] = document.createTextNode(sMobile);
                for (var i = 0; i < aText.length; i++) {
                    var oTd = oTr.insertCell(i);
                    oTd.appendChild(aText[i]);
                }
            }

網(wǎng)站中實際返回xml的工作通常是由asp.net jsp php等服務(wù)器腳本動態(tài)生成的，換句話說,xmlHttp.open()中的URL地址仍然.aspx等動態(tài)頁面的后綴，它們返回的XML是用戶請求生成的。

4.處理多個異步請求

而實際頁面中往往不止一個異步請求，比如在一個表單中，很多單元格都需要發(fā)生異步請求來驗證，再加上網(wǎng)速的影響，第一個異步請求尚未完成，很可能就已經(jīng)被第2個請求覆蓋。

頁面內(nèi)容不做多介紹，我們發(fā)現(xiàn)，發(fā)送的第一個請求沒有響應(yīng)，因為它被第二個請求覆蓋了。

通常解決的辦法是將xmlHttp對象作為局部變量來處理，并且在收到服務(wù)器返回值后手動將其刪除。如下所示：

復(fù)制代碼 代碼如下:

        function getData(oServer, oText, oSpan) {
                var xmlHttp; //處理為局部變量
                if (window.ActiveXObject)
                    xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
                else if (window.XMLHttpRequest)
                    xmlHttp = new XMLHttpRequest();
                var queryString = oServer + "?";
                queryString += createQueryString(oText) + "×tamp=" + new Date().getTime();
                xmlHttp.onreadystatechange = function() {
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        var responseSpan = document.getElementById(oSpan);
                        responseSpan.innerHTML = xmlHttp.responseText;
                        delete xmlHttp; //收到返回結(jié)構(gòu)后手動刪除
                        xmlHttp = null;
                    }
                }
                xmlHttp.open("GET", queryString);
                xmlHttp.send(null);
            }

到此，關(guān)于“AJAX的簡介和基礎(chǔ)總結(jié)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)站題目：AJAX的簡介和基礎(chǔ)總結(jié)
本文路徑：http://m.br277.com/article/pdiice.html