Ajax基礎(chǔ)的概念和操作

本文介紹了Ajax最基礎(chǔ)的操作和概念，希望能幫助大家初步認(rèn)識Ajax

1.基本概念

AJAX = Asynchronous JavaScript and XML（異步的JavaScript 和 XML）。

AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。

AJAX 最大的優(yōu)點是在不重新加載整個頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容。

AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行。

功能：向服務(wù)器異步發(fā)送和接收數(shù)據(jù)，然后用JavaScript解析。

核心規(guī)范：名稱繼承于用來建立和發(fā)送請求的JavaScript對象：XMLHttpRequest。

規(guī)范的兩個等級：

  • Level1：基礎(chǔ)級別功能，所有主流瀏覽器都實現(xiàn)了。

  • Level2：擴展了最初的功能，讓它更容易與form元素協(xié)作，并支持一些規(guī)范。

Ajax工作原理

</br>

2.創(chuàng)建XMLHttpRequest對象

XMLHttpRequest 是AJAX 的基礎(chǔ)。

所有現(xiàn)代瀏覽器均支持XMLHttpRequest 對象（IE5 和IE6 使用ActiveXObject）。

XMLHttpRequest 用于在后臺與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

創(chuàng)建XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();

老版本的Internet,Explorer （IE5 和IE6）使用 ActiveX 對象：

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

</br>

3.向服務(wù)器發(fā)送請求

XMLHttpRequest 對象用于和服務(wù)器交換數(shù)據(jù)。

向服務(wù)器發(fā)送請求

如需將請求發(fā)送到服務(wù)器，我們使用XMLHttpRequest 對象的 open() 和
send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

open&send

3.1 GET 還是POST？

與POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。

然而，在以下情況中，請使用POST 請求：

· 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）

· 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）

· 發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠

POST適用于每一個請求都會導(dǎo)致服務(wù)器終端發(fā)生某種變化的場合。

3.1.1 GET 請求

一個簡單的GET 請求：

實例

xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send();

在上面的例子中，您可能得到的是緩存的結(jié)果。

為了避免這種情況，請向URL 添加一個唯一的 ID：

實例

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通過GET 方法發(fā)送信息，請向 URL 添加信息：

實例

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

3.1.2 POST 請求

一個簡單POST 請求：

實例

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

如果需要像HTML 表單那樣 POST 數(shù)據(jù)，請使用 setRequestHeader() 來添加HTTP 頭。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：

實例

xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

3.1.3 獲取和設(shè)置標(biāo)頭setRequestHeader(header,value)

作用：可以設(shè)置發(fā)送給服務(wù)器的請求標(biāo)頭Header，和讀取服務(wù)器響應(yīng)中的標(biāo)頭。

XMLHttpRequest對象中與標(biāo)頭有關(guān)的方法：

setRequestHeader(<header>,<value>)——用指定值設(shè)置標(biāo)頭；
getResponseHeader(<header>)——獲取指定標(biāo)頭的值;
getAllResponseHeaders()——以單個字符串形式獲取所有標(biāo)頭；

· header: 規(guī)定頭的名稱· value: 規(guī)定頭的值

適用的地方：

1.覆蓋請求的HTTP方法 X-HTTP-Method-Override
場景：許多主流的Web技術(shù)只支持GET和POST方法，而且不少防火墻只允許GET和POST請求通過。為了讓請求以我們想要的形式處理。
用法：使用X-HTTP-Method-Override標(biāo)頭，值為想要使用的HTTP方法。

httpRequest.setRequestHeader("X-HTTP-Method-Override","DELETE");

注意：這個方法要在調(diào)用open()之后設(shè)置，不然會拋出一個錯誤。

2.禁用內(nèi)容緩存： Cache-Control
場景：一些瀏覽器會緩存通過Ajax請求所獲得的內(nèi)容，導(dǎo)致腳本的改動不能立即反映到瀏覽器中。
用法：使用Cache-Control標(biāo)頭，設(shè)置值為no-cache

httpRequest.setRequestHeader("Cache-Control","no-cache");

3.2 url - 服務(wù)器上的文件

open() 方法的 url 參數(shù)是服務(wù)器上文件的地址：

xmlhttp.open("GET","ajax_test.html",true);

該文件可以是任何類型的文件，比如.txt 和 .xml，或者服務(wù)器腳本文件，比如 .asp 和.php （在傳回響應(yīng)之前，能夠在服務(wù)器上執(zhí)行任務(wù)）。

3.3 異步 -True 或False？

AJAX 指的是異步 JavaScript 和XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 對象如果要用于 AJAX 的話，其open() 方法的 async 參數(shù)必須設(shè)置為 true：

xmlhttp.open("GET","ajax_test.html",true);

對于web 開發(fā)人員來說，發(fā)送異步請求是一個巨大的進步。很多在服務(wù)器執(zhí)行的任務(wù)都相當(dāng)費時。AJAX 出現(xiàn)之前，這可能會引起應(yīng)用程序掛起或停止。

通過AJAX，JavaScript 無需等待服務(wù)器的響應(yīng)，而是：

· 在等待服務(wù)器響應(yīng)時執(zhí)行其他腳本

· 當(dāng)響應(yīng)就緒后對響應(yīng)進行處理

</br>

4. 服務(wù)器 響應(yīng)

4.1 AJAX - onreadystatechange 事件

這里講的就是發(fā)生響應(yīng)的前提條件

當(dāng)請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。

每當(dāng)readyState 改變時，就會觸發(fā) onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

下面是XMLHttpRequest 對象的三個重要的屬性：

XMLHttpRequest對象的屬性
4.1.1 簡單情況

在onreadystatechange 事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時所執(zhí)行的任務(wù)。

當(dāng)**readyState 等于 4 且狀態(tài)為 200 **時，表示響應(yīng)已就緒：

實例

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
4.1.2 使用回調(diào)函數(shù)

回調(diào)函數(shù)是一種以參數(shù)形式傳遞給另一個函數(shù)的函數(shù)。

如果您的網(wǎng)站上存在多個AJAX 任務(wù)，那么您應(yīng)該為創(chuàng)建 XMLHttpRequest 對象編寫一個標(biāo)準(zhǔn)的函數(shù)，并為每個AJAX 任務(wù)調(diào)用該函數(shù)。

該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生 onreadystatechange 事件 時執(zhí)行的任務(wù)（每次調(diào)用可能不盡相同）：

實例

function myFunction() { 
loadXMLDoc("/try/ajax/ajax_info.txt", function() {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) {
       document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   } 
  });
}

var xmlhttp;

function loadXMLDoc(url,cfunc){
  if(window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 代碼
     xmlhttp=new XMLHttpRequest();
  }else{// IE6, IE5 代碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }  //創(chuàng)建對象

xmlhttp.onreadystatechange=cfunc;
//用cfunc調(diào)用響應(yīng)函數(shù)

xmlhttp.open("GET",url,true);
xmlhttp.send();

}

function myFunction()//響應(yīng)執(zhí)行時的操作
{
       loadXMLDoc("/try/ajax/ajax_info.txt",function()
       {
              if (xmlhttp.readyState==4&& xmlhttp.status==200)
              { 
                  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
               }

       });

}
服務(wù)器常見狀態(tài)

4.2 服務(wù)器響應(yīng)對象

如需獲得來自服務(wù)器的響應(yīng)，請使用XMLHttpRequest 對象的 **responseText 或responseXML **屬性。

responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML：獲得 XML 形式的響應(yīng)數(shù)據(jù)。
4.2.1 responseText 屬性

如果來自服務(wù)器的響應(yīng)并非XML，請使用 responseText 屬性。

responseText 屬性返回字符串形式的響應(yīng)，因此您可以這樣使用：

實例

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4.2.2 responseXML 屬性

如果來自服務(wù)器的響應(yīng)是XML，而且需要作為 XML 對象進行解析，請使用responseXML 屬性：

實例

請求 cd_catalog.xml 文件，并解析響應(yīng)：

xmlDoc=xmlhttp.responseXML; 
txt=""; 
x=xmlDoc.getElementsByTagName("ARTIST"); 
for (i=0;i<x.length;i++) { 
    txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 
} 
document.getElementById("myDiv").innerHTML=txt;

</br>

5.綜合實例

<!DOCTYPE html>
<html>
<head>
<script>

var xmlhttp;

function loadXMLDoc(url,cfunc)
{
 //創(chuàng)建對象
------------------------------------------------------
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代碼
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代碼
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  } 

 //用cfunc調(diào)用響應(yīng)函數(shù)
------------------------------------------------------  
xmlhttp.onreadystatechange=cfunc;

// 向服務(wù)器發(fā)送請求
------------------------------------------------------  
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

//服務(wù)器響應(yīng)函數(shù)
------------------------------------------------------
function myFunction()
{
    //傳入URL和響應(yīng)后執(zhí)行方法
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
       //響應(yīng)條件
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //獲得字符串形式的響應(yīng)數(shù)據(jù)
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
        }
    });
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改文本內(nèi)容</h2></div>
<button type="button" onclick="myFunction()">修改內(nèi)容</button>

</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,580評論 0贊 7
  • 本文詳細介紹了 XMLHttpRequest 相關(guān)知識，涉及內(nèi)容： AJAX、XMLHTTP、XMLHttpReq...
    semlinker閱讀 14,005評論 2贊 18
  • 大家好，我是IT修真院深圳分院第3期的學(xué)員，一枚正直純潔善良的前端程序員，今天給大家分享一下，修真院官網(wǎng)前端工程師...
    大大頭大閱讀 8,106評論 1贊 72
  • 什么是Ajax 不刷新頁面的情況下從服務(wù)器獲取、提交數(shù)據(jù)的一種數(shù)據(jù)交互方式。 Ajax使用步驟 1\創(chuàng)建Ajax對...
    LaBaby_閱讀 336評論 0贊 0
  • 1、ajax技術(shù)的背景 不可否認(rèn)，ajax技術(shù)的流行得益于google的大力推廣，正是由于google earth...
    raincoco閱讀 457評論 0贊 4

友情鏈接更多精彩內(nèi)容