AJAX--一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。

時間 2020-01-09

標籤 ajax 種在無需從新加載整個網頁狀況可以更新部分技術欄目 Ajax 简体版

原文原文鏈接

AJAX = 異步 JavaScript 和 XML。

1. AJAX - 建立 XMLHttpRequest 對象

XMLHttpRequest 是 AJAX 的基礎。XMLHttpRequest 對象用於和服務器交換數據。javascript

建立 XMLHttpRequest 對象的語法：php

variable=new XMLHttpRequest();

2. 向服務器發送請求

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

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

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

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

string：僅用於 POST 請求

XMLHttpRequest.setRequestHeader() 是設置HTTP請求頭部的方法。此方法必須在 open() 方法和 send() 之間調用。若是屢次對同一個請求頭賦值，只會生成一個合併了多個值的請求頭。若是沒有設置 Accept 屬性，則此發送出send() 的值爲此屬性的默認值*/* 。服務器

語法：myReq.setRequestHeader(header->屬性的名稱。, value->屬性的值。);app

3. AJAX - 服務器響應

如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText (得到字符串形式的響應數據)或 responseXML(得到 XML 形式的響應數據。) 屬性。異步

3.1 responseText 屬性async

若是來自服務器的響應並不是 XML，請使用 responseText 屬性。函數

responseText 屬性返回字符串形式的響應，所以您能夠這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText

3.2 responseXML屬性

若是來自服務器的響應是 XML，並且須要做爲 XML 對象進行解析，請使用 responseXML 屬性：

請求 books.xml 文件，並解析響應

4. AJAX - onreadystatechange 事件

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

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

（1）onreadystatechange：存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

（2）readyState：存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

0: 請求未初始化
1: 服務器鏈接已創建
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

（3）status：200: "OK"，404: 未找到頁面

在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。

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

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","index.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Let AJAX change the content!</button>

</body>
</html>

index.html頁面顯示爲：

index.php內容以下：

<?php
echo "AJAX is not a programming language.

It is just a technique for creating better and more interactive web applications.";
?>

點擊button按鈕，部分網頁內容動態顯示爲：

註釋：onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每一個變化。

相關標籤/搜索

每日一句

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