【轉載】Ajax入門介紹
AJAX入門介紹
在我們平時的開發過程中，經常使用到Ajax資料互動，相信有很大一部分人會使用，可能沒太詳細瞭解過Ajax的工作原理。下面我們一起看一下吧！
( 一 ) 什麼是Ajax
Ajax 即“AsynchronousJavascriptAndXML”（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。 Ajax = 非同步JavaScript和XML（標準通用標記語言的子集）。 Ajax 是一種用於建立快速動態網頁的技術。 Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。 ( 二 ) Ajax包含技術
2. 使用DOM模型來互動和動態顯示。
3. 使用XMLHttpRequest來和伺服器進行非同步通訊。
4. 使用javascript來繫結和呼叫。 (三 ) Ajax原理和XmlHttpRequest物件 一張圖解釋其原理...... XMLHttpRequest物件，它扮演的角色相當於小明，使得瀏覽器可以發出HTTP請求與接收HTTP響應。瀏覽器接著做其他事情，等收到XHR返回來的資料再渲染頁面。 詳細如下圖： XMLHttpRequest這個物件的屬性和方法： ( 四 ) Ajax使用 1. 建立XMLHttpRequest物件 ?
| 1 2 3 4 5 6 7 8 9 10 11 |
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() 方法：
?| 1 2 |
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
|
請求型別：與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
: 無法使用快取檔案（更新伺服器上的檔案或資料庫）
: 向伺服器傳送大量資料（POST 沒有資料量限制）
:傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠
3. 伺服器相應
使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。
( a )responseText 屬性(獲得字串形式的響應資料。)
例項：
?| 1 |
document.getElementById("Divs").innerHTML=xmlhttp.responseText;
|
( b )responseXML 屬性(獲得 XML 形式的響應資料)
例項：
?| 1 2 3 4 5 6 7 8 |
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("Divs").innerHTML=txt;
|
4.XMLHttpRequestreadyState狀態
XMLHttpRequest 物件的三個重要的屬性：
例項：
?| 1 2 3 4 5 6 7 |
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Divs").innerHTML=xmlhttp.responseText;
}
}
|
注意：onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應著 readyState 的每個變化。
日常筆記：⚠️⚠️⚠️
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的解釋：請求完成並且成功返回
( 五 ) Ajax優缺點 優點：
1. 無重新整理更新資料。
AJAX最大優點就是能在不重新整理整個頁面的前提下與伺服器通訊維護資料。這使得Web應用程式更為迅捷地響應使用者互動，並避免了在網路上傳送那些沒有改變的資訊，減少使用者等待時間，帶來非常好的使用者體驗。
2. 非同步與伺服器通訊。
AJAX使用非同步方式與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。優化了Browser和Server之間的溝通，減少不必要的資料傳輸、時間及降低網路上資料流量。
3. 前端和後端負載平衡。
AJAX可以把以前一些伺服器負擔的工作轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬頻租用成本。並且減輕伺服器的負擔，AJAX的原則是“按需取資料”，可以最大程度的減少冗餘請求和響應對伺服器造成的負擔，提升站點效能。
4. 基於標準被廣泛支援。
AJAX基於標準化的並被廣泛支援的技術，不需要下載瀏覽器外掛或者小程式，但需要客戶允許JavaScript在瀏覽器上執行。隨著Ajax的成熟，一些簡化Ajax使用方法的程式庫也相繼問世。同樣，也出現了另一種輔助程式設計的技術，為那些不支援JavaScript的使用者提供替代功能。
5. 介面與應用分離。
Ajax使WEB中的介面與應用分離（也可以說是資料與呈現分離），有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程式錯誤、提高效率、也更加適用於現在的釋出系統。
缺點：
1. AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞。
在動態更新頁面的情況下，使用者無法回到前一個頁面狀態，因為瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；使用者通常會希望單擊後退按鈕能夠取消他們的前一次操作，但是在Ajax應用程式中，這將無法實現。
2. AJAX的安全問題。
AJAX技術給使用者帶來很好的使用者體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業資料建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。Ajax的邏輯可以對客戶端的安全掃描技術隱藏起來，允許黑客從遠端伺服器上建立新的攻擊。還有Ajax也難以避免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於Credentials的安全漏洞等等。
3. 對搜尋引擎支援較弱。
對搜尋引擎的支援比較弱。如果使用不當，AJAX會增大網路資料的流量，從而降低整個系統的效能。
4. 破壞程式的異常處理機制。
至少從目前看來，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程式的異常機制的。關於這個問題，曾在開發過程中遇到過，但是查了一下網上幾乎沒有相關的介紹。後來做了一次試驗，分別採用Ajax和傳統的form提交的模式來刪除一條資料……給我們的除錯帶來了很大的困難。
5. 違背URL和資源定位的初衷。
例如，我給你一個URL地址，如果採用了Ajax技術，也許你在該URL地址下面看到的和我在這個URL地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。
6. AJAX不能很好支援移動裝置。
一些手持裝置（如手機、PDA等）現在還不能很好的支援Ajax，比如說我們在手機的瀏覽器上打開採用Ajax技術的網站時，它目前是不支援的。
7. 客戶端過肥，太多客戶端程式碼造成開發上的成本。
編寫複雜、容易出錯 ；冗餘程式碼比較多（層層包含js檔案是AJAX的通病，再加上以往的很多服務端程式碼現在放到了客戶端）；破壞了Web的原有標準。