AJAX的簡介和基礎總結

發布時間：2021-09-28 14:49:53 來源：億速云閱讀：116 作者：iii 欄目：web開發

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

本節簡介（異步鏈接服務器對象）XMLHTTPRequest以及AJAX的簡介。

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML）。 AJAX有四個方面的好處：1.即減輕了服務器的負擔。2帶來了更好的用戶體驗。3.基于標準被廣泛的支持。4.擁有更好的頁面呈現和數據分離。

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

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

1.異步對象連接服務器

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

復制代碼代碼如下:

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

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

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

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

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

請求的狀態

0為尚未初始化

1為正在發送請求

2為請求完成

3為請求成功，正接收數據。

4為接收數據成功

responseText 服務器返回文本
responseXML 服務器返回xml
status
服務器返回的http請求響應值，常用的有

200表示請求成功

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

400表示錯誤的請求

404表示資源未找到

500表示內部服務器錯誤，如aspx代碼錯誤

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

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

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

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

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

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

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

復制代碼代碼如下:

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

復制代碼代碼如下:

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

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

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

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

xmlHttp.setRequestHeader("content-Type","application/x-www-form-urlencoded;")
服務器在收到客戶端請求之后，根據請求返回相應的結果，這個結果通常為兩種形式，一種是文本形式，存儲在responseText中；另一種是XML格式，存儲在responseXML中。客戶端程序可以對前者進行字符串的處理，對后者進行DOM相關的處理，例如可以對服務器返回值做如下的處理：

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

復制代碼代碼如下:

    <body>
        <script type="text/javascript">
            var xmlHttp;
            function createXMLHttpRequest() {
                if (window.ActiveXObject)
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                else if (window.XMLHttpRequest)
                    xmlHttp = new XMLHttpRequest();
            }
            function startRequest() {
                createXMLHttpRequest();
                xmlHttp.open("GET", "http://study.ahthw.com/ajaxresponse/1-1.aspx", true);
                xmlHttp.onreadystatechange = function() {
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                        alert("服務器返回: " + xmlHttp.responseText);
                }
                xmlHttp.send(null);
            }
        </script>
        <input type="button" value="測試異步通訊" onClick="startRequest()">
    </body>

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

復制代碼代碼如下:

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

2.GET和POST模式

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

實例

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

復制代碼代碼如下:

其中用戶填寫的數據統一用函數createQueryString()編寫，需要時予以調運，代碼如下

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

完整代碼如下：

復制代碼代碼如下:

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

復制代碼代碼如下:

<%@ 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都發送了數據異步請求，通常在數據不多的時候使用GET，在數據較多的時候使用POST。

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

復制代碼代碼如下:

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

而且在返回數據responeText時再進行一次解碼，代碼如下

復制代碼代碼如下:

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

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

3.服務器返回xml

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

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

假設服務器返回

復制代碼代碼如下:

<?xml version="1.0" encoding="gb2312"?>
<list>
    <caption>Member List</caption>
    <member>
        <name>isaac</name>
        <class>W13</class>
        <birth>Jun 24th</birth>
        <constell>Cancer</constell>
        <mobile>1118159</mobile>
    </member>
    <member>
        <name>fresheggs</name>
        <class>W610</class>
        <birth>Nov 5th</birth>
        <constell>Scorpio</constell>
        <mobile>1038818</mobile>
    </member>
    <member>
        <name>girlwing</name>
        <class>W210</class>
        <birth>Sep 16th</birth>
        <constell>Virgo</constell>
        <mobile>1307994</mobile>
    </member>
    <member>
        <name>tastestory</name>
        <class>W15</class>
        <birth>Nov 29th</birth>
        <constell>Sagittarius</constell>
        <mobile>1095245</mobile>
    </member>
    <member>
        <name>lovehate</name>
        <class>W47</class>
        <birth>Sep 5th</birth>
        <constell>Virgo</constell>
        <mobile>6098017</mobile>
    </member>
    <member>
        <name>slepox</name>
        <class>W19</class>
        <birth>Nov 18th</birth>
        <constell>Scorpio</constell>
        <mobile>0658635</mobile>
    </member>
    <member>
        <name>smartlau</name>
        <class>W19</class>
        <birth>Dec 30th</birth>
        <constell>Capricorn</constell>
        <mobile>0006621</mobile>
    </member>
    <member>
        <name>tuonene</name>
        <class>W210</class>
        <birth>Nov 26th</birth>
        <constell>Sagittarius</constell>
        <mobile>0091704</mobile>
    </member>
    <member>
        <name>dovecho</name>
        <class>W19</class>
        <birth>Dec 9th</birth>
        <constell>Sagittarius</constell>
        <mobile>1892013</mobile>
    </member>
    <member>
        <name>shanghen</name>
        <class>W42</class>
        <birth>May 24th</birth>
        <constell>Gemini</constell>
        <mobile>1544254</mobile>
    </member>
    <member>
        <name>venessawj</name>
        <class>W45</class>
        <birth>Apr 1st</birth>
        <constell>Aries</constell>
        <mobile>1523753</mobile>
    </member>
    <member>
        <name>lightyear</name>
        <class>W311</class>
        <birth>Mar 23th</birth>
        <constell>Aries</constell>
        <mobile>1002908</mobile>
    </member>
</list>

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

復制代碼代碼如下:

var xmlHttp;

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

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

復制代碼代碼如下:

    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的函數，將服務器返回的XML對象responseXML直接作為參數傳遞,HTML部分如下：

復制代碼代碼如下:

    <input type="button" value="獲取XML" onclick="getXML('1-4.xml');"><br><br>
<table class="datalist" summary="list of members in EE Studay" id="member">
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Class</th>
        <th scope="col">Birthday</th>
        <th scope="col">Constellation</th>
        <th scope="col">Mobile</th>
    </tr>
</table>

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

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

復制代碼代碼如下:

    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()函數將拆分出來的每一組XML數據組裝成表格<table>的一行，添加到頁面中。代碼如下：

復制代碼代碼如下:

    function addTableRow(sName, sClass, sBirth, sConstell, sMobile) {
                //表格添加一行的相關操作
                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]);
                }
            }

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

4.處理多個異步請求

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

頁面內容不做多介紹，我們發現，發送的第一個請求沒有響應，因為它被第二個請求覆蓋了。

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

復制代碼代碼如下:

到此，關于“AJAX的簡介和基礎總結”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

AJAX的簡介和基礎總結

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

AJAX的簡介和基礎總結

猜你喜歡

最新資訊

相關推薦

相關標簽