ajax02-XMLHttpRequest 對象的使用

時間 2019-11-24

標籤 ajax02 ajax xmlhttprequest 對象使用欄目 Ajax 简体版

原文原文鏈接

XMLHttpRequest 是 AJAX 的基礎，用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。php

XMLHttpRequest 對象

全部現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject），全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 及 Opera）均內建 XMLHttpRequest 對象。XMLHttpRequest在不一樣瀏覽器上的實現是兼容的，因此能夠用一樣的方式訪問XMLHttpRequest實例的屬性和方法，而不論這個實例建立的方法是什麼。html

建立 XMLHttpRequest 對象

爲了每次寫Ajax的時候都節省一點時間，能夠把對象檢測的內容打包成一個可複用的函數：node

function getHTTPObject(){
    var xhr=false;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();            
    }else if(window.ActiveXObject()){
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

對window.XMLHttpRequest的調用會返回一個對象或null，if語句會把調用返回的結果看做是true或false（若是返回對象則爲true，返回null則爲false）。若是XMLHttpRequest對象存在，則把 xhr 的值設爲該對象的新實例。若是不存在，就去檢測 ActiveObject 的實例是否存在，若是答案是確定的，則把微軟 XMLHTTP 的新實例賦給 xhr。ajax

向服務器發送請求

如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：數據庫

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

open(method,url,async) 規定請求的類型、URL 以及是否異步處理請求。瀏覽器

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）

send(string) 將請求發送到服務器。緩存

string：僅用於 POST 請求

在如下狀況中，請使用 POST 請求：服務器

沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

如下是一個簡單的 GET 請求：app

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

可能獲得的是緩存的結果，爲了不這種狀況，請向 URL 添加一個惟一的 ID：dom

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

若要經過 GET 方法發送信息，向 URL 添加信息：

xmlhttp.open("GET","demo_get2.html？fname=Henry&lname=Ford",true);
xmlhttp.send();

如下是一個簡單的 POST 請求：

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

若是須要像 HTML 表單那樣 POST 數據，使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定要發送的數據：

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

setRequestHeader(header,value) 向請求添加 HTTP 頭。

header: 規定頭的名稱
value: 規定頭的值

url - 服務器上的文件的地址，該文件能夠是任何類型的文件，好比 .txt 和 .xml，或者服務器腳本文件，好比 .asp 和 .php （在傳回響應以前，可以在服務器上執行任務）。

XMLHttpRequest 對象若是要用於 AJAX 的話，其 open() 方法的 async 參數必須設置爲 true

經過 AJAX，JavaScript 無需等待服務器的響應，而是：

在等待服務器響應時執行其餘腳本
當響應就緒後對響應進行處理

當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 瀏覽器執行代碼
        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>

JavaScript 會等到服務器響應就緒才繼續執行。若是服務器繁忙或緩慢，應用程序會掛起或中止。

注意：當使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面便可：

function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 瀏覽器執行代碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
  xmlhttp.send();
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}

服務器響應

如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

responseText 得到字符串形式的響應數據。
responseXML 得到 XML 形式的響應數據。

    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();

  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      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;
    }
  }
  xmlhttp.open("GET","cd_catalog.xml",true);
  xmlhttp.send();

onreadystatechange 事件

當請求被髮送到服務器時，須要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每一個變化。

readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 對象的三個重要的屬性：

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

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

    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();

使用 Callback 函數

callback 函數是一種以參數形式傳遞給另外一個函數的函數。

若是您的網站上存在多個 AJAX 任務，那麼您應該爲建立 XMLHttpRequest 對象編寫一個標準的函數，併爲每一個 AJAX 任務調用該函數。

該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('A1').innerHTML=xmlhttp.status;
    document.getElementById('A2').innerHTML=xmlhttp.statusText;
    document.getElementById('A3').innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。