ajax知識點

丶真小白發表於2019-02-20

什麼是AJAX？

AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
AJAX 不是新的程式語言，而是一種使用現有標準的新方法。
AJAX 最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。
AJAX 不需要任何瀏覽器外掛，但需要使用者允許JavaScript在瀏覽器上執行。
 
AJAX 應用
  • 運用XHTML+CSS來表達資訊；
  • 運用JavaScript操作DOM（Document Object Model）來執行動態效果；
  • 運用XML和XSLT操作資料;
  • 運用XMLHttpRequest或新的Fetch API與網頁伺服器進行非同步資料交換；
  • 注意：AJAX與Flash、Silverlight和Java Applet等RIA技術是有區分的。
 
步驟：XHR建立物件，請求，響應，readyState
 
1、建立 XMLHttpRequest 物件
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 物件。
建立 XMLHttpRequest 物件的語法：
xmlhttp=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 物件：
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 物件。如果支援，則建立 XMLHttpRequest 物件。如果不支援，則建立 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行程式碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

 

2、向伺服器傳送請求：
使用XMLHttpRequest 物件的open()和send()；
方法
描述
open(method,url,async)
規定請求的型別、URL 以及是否非同步處理請求。
● method：請求的型別；GET 或 POST
● url：檔案在伺服器上的位置
● async：true（非同步）或 false（同步）
send(string)
將請求傳送到伺服器。
● string：僅用於 POST 請求
 
一個簡單的 GET 請求：
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

 

在上面的例子中，您可能得到的是快取的結果。
為了避免這種情況，請向 URL 新增一個唯一的 ID：
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

 

如果您希望通過 GET 方法傳送資訊，請向 URL 新增資訊：
 
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

 

一個簡單 POST 請求：
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

 

如果需要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來新增 HTTP 頭。然後在 send() 方法中規定您希望傳送的資料：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
 
方法
描述
setRequestHeader(header,value)
向請求新增 HTTP 頭。
● header: 規定頭的名稱
● value: 規定頭的值
 
3、伺服器響應：
需獲得來自伺服器的響應，使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。
屬性
描述
responseText
獲得字串形式的響應資料。
responseXML
獲得 XML 形式的響應資料。
4、onreadystatechange 事件：
當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態資訊。
下面是 XMLHttpRequest 物件的三個重要的屬性：
屬性
描述
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;
    }
}

 

有多個AJAX請求任務時，可將建立 XMLHttpRequest 物件及步驟封裝起來，使用回撥函式，如下：
注：沒將發生 onreadystatechange 事件時執行的任務步驟封裝進去，是因為每次呼叫可能不盡相同。
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 程式碼
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 程式碼
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}
 
xmlhttp.readyState的值及解釋：
0：請求未初始化（還沒有呼叫 open()）。
1：請求已經建立，但是還沒有傳送（還沒有呼叫 send()）。
2：請求已傳送，正在處理中（通常現在可以從響應中獲取內容頭）。
3：請求在處理中；通常響應中已有部分資料可用了，但是伺服器還沒有完成響應的生成。
4：響應已完成；您可以獲取並使用伺服器的響應了。
 
xmlhttp.status的值及解釋：
100——客戶必須繼續發出請求
101——客戶要求伺服器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新檔案的URL
202——接受和處理、但處理未完成
203——返回資訊不確定或不完整
204——請求收到，但返回資訊為空
205——伺服器完成了請求，使用者代理必須復位當前已經瀏覽過的檔案
206——伺服器已經完成了部分使用者的GET請求
300——請求的資源可在多處得到
301——刪除請求資料
302——在其他地址發現了請求資料
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET，但檔案未變化
305——請求的資源必須從伺服器指定的地址得到
306——前一版本HTTP中使用的程式碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現檔案、查詢或URl
405——使用者在Request-Line欄位定義的方法不允許
406——根據使用者傳送的Accept拖，請求資源不可訪問
407——類似401，使用者必須首先在代理伺服器上得到授權
408——客戶端沒有在使用者指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——伺服器上不再有此資源且無進一步的參考地址
411——伺服器拒絕使用者定義的Content-Length屬性請求
412——一個或多個請求頭欄位在當前請求中錯誤
413——請求的資源大於伺服器允許的大小
414——請求的資源URL長於伺服器允許的長度
415——請求資源不支援請求專案格式
416——請求中包含Range請求頭欄位，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭欄位
417——伺服器不滿足請求Expect頭欄位指定的期望值，如果是代理伺服器，可能是下一級伺服器不能滿足請求
500——伺服器產生內部錯誤
501——伺服器不支援請求的函式
502——伺服器暫時不可用，有時是為了防止發生系統過載
503——伺服器過載或暫停維修
504——關口過載，伺服器使用另一個關口或服務來響應使用者，等待時間設定值較長
505——伺服器不支援或拒絕支請求頭中指定的HTTP版本
 
合起來:
1xx:資訊響應類，表示接收到請求並且繼續處理
2xx:處理成功響應類，表示動作被成功接收、理解和接受
3xx:重定向響應類，為了完成指定的動作，必須接受進一步處理
4xx:客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行
5xx:服務端錯誤，伺服器不能正確執行一個正確的請求
xmlhttp.readyState==4 && xmlhttp.status==200的解釋：請求完成並且成功返回
 

相關文章