AJAX的一些相關知識

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/wq1134302142/article/details/52802664

AJAX的學習

概念:是一種在不需要重新加載整個網頁的情況下,能夠更新部分網頁的技術

ajax=異步JavaScript+XML

意義

通過在後臺與服務器進行少量的數據交換,實現網頁的異步更新,這也就意味這種技術能夠快速地創建動態網頁.

AJAX is not a programming language.
It is just a technique for creating better and more interactive web applications.

XMLHttpRequest 是 AJAX 的基礎。

1.創建XMLHttpRequest對象

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

var xmlhttp;
if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
}
else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

2.AJAX - 向服務器發送請求

使用XMLHttpRequest對象的open()和send()方法.

open(method,url,async);
·method:請求的類型:GET或者是POST
·url:文件在服務器上的位置
·async :true(異步)或者是false(同步)

send(string):將請求發送到服務器
·string:僅用於POST請求

關於異步和同步的關係:

對於web開發人員來說:發送異步請求簡直是一件美事.
因爲在服務器執行過程中,是相當費時的,有可能應用程序就會掛掉.
通過AJAX, JavaScript無需等待服務器的響應.而是:
·在等待服務器響應時執行其他腳本
·當響應就緒後對響應進行處理.
當使用 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 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可：
xmlhttp.open(“GET”,”test1.txt”,false);
xmlhttp.send();
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

3.AJAX - 服務器響應

獲取來自服務器的響應,對應的使用responseText和responseXMl

responseText:獲得字符串形式的響應數據
responseXMl:獲得XML形式的響應數據

4.AJAX - onreadystatechange 事件

當請求被髮送到服務器時,需要執行一些基於響應的任務
每當readyState發生改變,就會觸發onreadystatechange事件
readyState屬性存有XMLHttpRequest的狀態信息;
下面是 XMLHttpRequest 對象的三個重要的屬性：
onreadystatechange:存儲函數,每當readyState屬性改變時,就會調用該函數
readyState:存有XMLHttpRequest的狀態,從0到4發生變化
· 0:請求初始化
· 1:服務器連接已建立
· 2:請求已接收
· 3:請求處理中
· 4:請求已完成,且響應已就緒
status:200:”OK”
404:未找到頁面.