Ajax學習體驗之一

時間 2019-11-10

標籤 ajax 學習體驗之一欄目 Ajax 简体版

原文原文鏈接

在沒有使用Ajax以前，總以爲Ajax很神祕，局部刷新、與服務器通訊等，知道學習了Ajax以後，瞭解了Ajax語法以後，知道了其語法至關精簡，扼要。下面就來講一說Ajax的精妙 javascript

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

XMLHttpRequest是Ajax的基礎 java

如今大部分瀏覽器均支持XMLHttpRequest對象（部分IE5 、IE6使用ActiveXObject） ajax

XMLHttpRequest用於在後臺與服務器的數據交換，在不從新加載整個網頁的狀況下，對網頁的部份內容進行加載數據庫

在調用Ajax時，須要先建立XMLHttpRequest對象瀏覽器

variable = new XMLHttpRequest（）；緩存

而在老版本的IE中使用該Acticex對象服務器

variable = new ActiveXobject（「Microsoft.XMLHTTP」）； dom

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");
  }

向服務器發送請求

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

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

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求。 method：請求的類型；GET 或 POST url：文件在服務器上的位置 async：true（異步）或 false（同步）
send(string)	將請求發送到服務器。 string：僅用於 POST 請求

方法

描述

open(method,url,async)

規定請求的類型、URL 以及是否異步處理請求。

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

send(string)

將請求發送到服務器。

string：僅用於 POST 請求

GET 仍是 POST？

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

然而，在如下狀況中，請使用 POST 請求：

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

具體參見：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

經常使用的狀況是：

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

上面的例子，可能會讀取到緩存結果，爲了不這種狀況，能夠向URL中添加一個惟一的ID

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

onreadystatechange 事件

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

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

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

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

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

屬性

描述

onreadystatechange

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

readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

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

status

200: "OK"

404: 未找到頁面

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

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

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

函數回調 callback（），具體參考例子：

<html> <head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url,cfunc) { 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=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/ajax/test1.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="myFunction()">經過 AJAX 改變內容</button> </body> </html>