AJAX的學習

AJAX 是一種用於創建快速動態網頁的技術。

通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

XMLHttpRequest 是 AJAX 的基礎。

XMLHttpRequest 用於在后台與服務器交換數據。

創建 XMLHttpRequest 對象的語法：

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：

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.open("GET","test1.txt",true);
xmlhttp.send();

 

get和post用哪個好？

與post相比，get更簡單更快，並且在大多數情況下都能用。

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

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

url - 服務器上的文件

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

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

異步 - True 或 False？

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

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

Async = true

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

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

 注意：我們不推薦使用 async=false，但是對於一些小型的請求，也是可以的。

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

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

服務器響應

使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

如果來自服務器的響應並非 XML，請使用 responseText 屬性。

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

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

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

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;

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

onreadystatechange 事件

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

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

使用 Callback 函數

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

如果您的網站上存在多個 AJAX 任務，那么您應該為創建 XMLHttpRequest 對象編寫一個標准的函數，並為每個 AJAX 任務調用該函數。

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

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