AJAX的簡(jiǎn)介和基礎(chǔ)總結(jié)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

請(qǐng)求的狀態(tài)

0為尚未初始化

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

2為請(qǐng)求完成

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

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

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

200表示請(qǐng)求成功

202表示請(qǐng)求被接收，但處理未完成

400表示錯(cuò)誤的請(qǐng)求

404表示資源未找到

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

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

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

url即請(qǐng)求的地址，可以是絕對(duì)地址，也可以是相對(duì)地址。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <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("服務(wù)器返回: " + xmlHttp.responseText);
                }
                xmlHttp.send(null);
            }
        </script>
        <input type="button" value="測(cè)試異步通訊" onClick="startRequest()">
    </body>

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

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

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

2.GET和POST模式

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

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

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

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

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

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

實(shí)例

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

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

其中用戶填寫的數(shù)據(jù)統(tǒng)一用函數(shù)createQueryString()編寫，需要時(shí)予以調(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ù)器接收到請(qǐng)求數(shù)據(jù)后根據(jù)不同的時(shí)刻返回相應(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ù)用戶輸入以及請(qǐng)求的類型返回不同的字符串

復(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ù)異步請(qǐng)求，通常在數(shù)據(jù)不多的時(shí)候使用GET，在數(shù)據(jù)較多的時(shí)候使用POST。

在使用PSOT發(fā)送中文字符時(shí)，post接收會(huì)亂碼，使用GET發(fā)送中文字符正常。這是因?yàn)楫惒綄?duì)象xmlHttp在處理返回的responseText的時(shí)候，是按照UTF-8編碼的。
通常的解決辦法是escape()對(duì)發(fā)送的數(shù)據(jù)進(jìn)行編碼，然后在返回的responseText再使用unescape()進(jìn)行解碼。然而在javascript編程中通常不推薦escape()和unescape()。而推薦使用encodeURI()和decodeURI()。這里要正常運(yùn)行，必須對(duì)發(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)); //兩次編碼解決中文亂碼問題
    }

而且在返回?cái)?shù)據(jù)responeText時(shí)再進(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)記語(yǔ)言(Extensible Markup Language)，它是一種可自定義標(biāo)記的語(yǔ)言，用來克服html局限，按照實(shí)際功能來看，xml主要用于數(shù)據(jù)存儲(chǔ)。

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

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

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

<?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>

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

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

var xmlHttp;

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

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

復(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對(duì)象responseXML直接作為參數(shù)傳遞,HTML部分如下：

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

    <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>

當(dāng)用戶單擊按鈕時(shí)出發(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ù)組裝成表格<table>的一行，添加到頁(yè)面中。代碼如下：

復(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)站中實(shí)際返回xml的工作通常是由asp.net jsp php等服務(wù)器腳本動(dòng)態(tài)生成的，換句話說,xmlHttp.open()中的URL地址仍然.aspx等動(dòng)態(tài)頁(yè)面的后綴，它們返回的XML是用戶請(qǐng)求生成的。

4.處理多個(gè)異步請(qǐng)求

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

頁(yè)面內(nèi)容不做多介紹，我們發(fā)現(xiàn)，發(fā)送的第一個(gè)請(qǐng)求沒有響應(yīng)，因?yàn)樗坏诙€(gè)請(qǐng)求覆蓋了。

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

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

到此，關(guān)于“AJAX的簡(jiǎn)介和基礎(chǔ)總結(jié)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

當(dāng)前標(biāo)題：AJAX的簡(jiǎn)介和基礎(chǔ)總結(jié)
標(biāo)題鏈接：http://aaarwkj.com/article24/pdiice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、定制開發(fā)、服務(wù)器托管、網(wǎng)站策劃、面包屑導(dǎo)航、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

AJAX的簡(jiǎn)介和基礎(chǔ)總結(jié)