AJAX學習筆記

從下面這個簡單的AJAX實例中，一步一步來分析代碼每一部分的作用及功能，并對相關的名詞進行了解釋。

一個簡單的AJAX實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 瀏覽器執(zhí)行代碼
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>

</body>
</html>

1.創(chuàng)建一個XMLHttpRequest對象

XMLHttpRequest是什么？
  • XMLHttpRequest是AJAX技術的核心，用于在后臺與服務器交換數(shù)據(jù)。XHR對象為向服務器發(fā)送請求和解析服務器響應提供了流暢的接口。能夠以異步方式從服務器取得更多信息。
  • 我們可以通過使用XHR對象獲取新數(shù)據(jù)，再通過DOM將新數(shù)據(jù)插入到頁面中。
XMLHttpRequest適用的版本
  • 所有現(xiàn)代瀏覽器均支持XMLHttpRequest對象（IE5和IE6使用ActiveXObject）。
創(chuàng)建XHR
var xmlhttp;
if(window.XMLHttpRequest){  //兼容大部分瀏覽器
    xmlhttp = new XMLHttpRequest();
}else{  //兼容IE5，IE6
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2-1.向服務器發(fā)送請求

  • 在使用XMLHttpRequest對象時，要調用的第一個方法是open()
xmlhttp.open("GET" , "ajax_info.txt" , true);
xmlhttp.send(null);
  • 調用open()方法并不會真正的發(fā)送請求，而只是啟動一個請求以備發(fā)送。要發(fā)送特定的請求，必須調用send()方法。
  • Send()方法接受一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)。如果不需要請求主體發(fā)送數(shù)據(jù)，則必須傳入null，因為這個參數(shù)對有些瀏覽器來說是必須的。
方法 描述
open(method,url,async) 規(guī)定請求的類型、URL 以及是否異步處理請求。
method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）
send(string) 將請求發(fā)送到服務器。


string：僅用于 POST 請求

  • GET和POST的選擇
    與POST相比，GET更簡單更快，并且在大部分情況下都能用。
    然而在以下情況中，請使用POST請求。
    1.無法使用緩存文件（更新服務器上的文件或數(shù)據(jù)庫）
    2.向服務器發(fā)送大量數(shù)據(jù)（POST沒有數(shù)據(jù)量限制）
    3.發(fā)送包含未知字符的用戶輸入時，POST比GET更穩(wěn)定也更可靠

3-1.服務器響應

  • 在收到響應后，響應的數(shù)據(jù)會自動填充XHR對象的以下幾個屬性。

    • responseText：作為響應主體被返回的文本。
    • responseXML：如果來自服務器的響應是XML，則需要作為XML對象進行解析，此屬性中將保存包含著響應數(shù)據(jù)的DOM文檔。
    • status：響應的HTTP狀態(tài)的說明
    • statusText：HTTP狀態(tài)的說明

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

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  • responseXML 屬性
    假設我們要獲取book.xml文件中的artist內容：
var xmlDoc=xmlhttp.responseXML;
var txt="";
var x=xmlDoc.getElementsByTagName("ARTIST");
for (var i=0;i<x.length;i++)
  {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

3-2.onreadystatechange 事件

當請求被發(fā)送到服務器時，我們需要執(zhí)行一些基于響應的任務。每當 readyState 改變時，就會觸發(fā)onreadystatechange 事件。
下面是XMLHttpRequest 對象的三個重要的屬性：

屬性 描述
onreadystatechange 存儲函數(shù)（或函數(shù)名），每當 readyState 屬性改變時，就會調用該函數(shù)。
readyState 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
status 200: "OK"
404: 未找到頁面

在接收到響應后，第一步是檢查status屬性，以確定響應已經(jīng)成功返回。一般來說，可以將HTTP狀態(tài)代碼為200作為成功的標志。
但當我們需要發(fā)送異步請求時，還得檢測XHR對象的readyState屬性，才能讓JavaScript繼續(xù)執(zhí)行而不必等待響應。
在 onreadystatechange 事件中，我們規(guī)定當服務器響應已做好被處理的準備時所執(zhí)行的任務。
當 readyState 等于 4 且狀態(tài)為 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

與服務器進行交互

以上介紹的都是以url為txt文件的情況，當我們需要與服務器交互，通過相應的參數(shù)獲取相關信息時，可以通過以下方式來編寫。

  • 當服務器為ASP/PHP編寫時，我們用以下這個例子來解釋如何與服務器之間通信。
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 瀏覽器執(zhí)行代碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}


當輸入框為空時(str.length==0)，輸入框沒有內容，無任何信息可以返回，該函數(shù)清空 txtHint 占位符的內容，并退出函數(shù)。
如果輸入框不為空，showHint() 函數(shù)執(zhí)行以下任務：
- 創(chuàng)建 XMLHttpRequest 對象
- 當服務器響應就緒時執(zhí)行函數(shù)
- 把請求發(fā)送到服務器上的文件
- 請注意我們向 URL 添加了一個參數(shù) q （帶有輸入框的內容）
發(fā)送的url為/try/ajax/gethint.php?q="+str，q是與服務器端交互的參數(shù)，服務器端可以通過獲取q的值，來得到輸入框中輸入的內容，然后向客戶端返回檢索結果到responseText中。

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

相關閱讀更多精彩內容

友情鏈接更多精彩內容