在《AJAX中文參考手冊》中,AJAX 不是新的程式語言,而是使用現(xiàn)有標準的新方法。 AJAX 是與??伺服器交換資料並更新部分網(wǎng)頁的藝術(shù),在不重新載入整個頁面的情況下。
AJAX即「Asynchronous JavaScript and XML」(非同步的JavaScript與XML技術(shù)),指的是一套綜合了多項技術(shù)的瀏覽器端網(wǎng)頁開發(fā)技術(shù)。 Ajax的概念由傑西·詹姆士·賈瑞特所提出。
傳統(tǒng)的Web應(yīng)用程式允許使用者端填寫表單(form),當(dāng)提交表單時就向網(wǎng)頁伺服器發(fā)送一個請求。伺服器接收並處理傳來的表單,然後送回一個新的網(wǎng)頁,但這個做法浪費了許多頻寬,因為在前後兩個頁面中的大部分HTML碼往往是相同的。由於每次應(yīng)用的溝通都需要向伺服器發(fā)送請求,應(yīng)用程式的回應(yīng)時間依賴伺服器的回應(yīng)時間。這導(dǎo)致了用戶介面的回應(yīng)比本機應(yīng)用慢得多。
與此不同,AJAX應(yīng)用程式可以僅向伺服器發(fā)送並取回必須的數(shù)據(jù),並在客戶端採用JavaScript處理來自伺服器的回應(yīng)。因為在伺服器和瀏覽器之間交換的資料大量減少,伺服器回應(yīng)更快了。同時,很多的處理工作可以在發(fā)出請求的客戶端機器上完成,因此Web伺服器的負載也減少了。
提示:在您開始學(xué)習(xí)AJAX之前,您應(yīng)該先對HTML、CSS、javascript知識有基本的了解。
類似於DHTML或LAMP,AJAX不是指單一的技術(shù),而是有機地利用了一系列相關(guān)的技術(shù)。雖然其名稱包含XML,但實際上資料格式可以由JSON代替,進一步減少資料量,形成所謂的AJAJ。而客戶端與伺服器也不需要異步。
AJAX的初步使用
實例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tryrun 1</title> </head> <body> <div id="view"> <p>點擊下面的按鈕,將 Ajax 請求回來的數(shù)據(jù)更新在該文本內(nèi)</p> </div> <button type="button" id="btn">發(fā)起 Ajax 請求</button> <script> document.getElementById("btn").onclick = ajaxRequest; function ajaxRequest () { var xhr = new XMLHttpRequest(); xhr.open("GET", "http://ipnx.cn/statics/demosource/ajax_info.txt", true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("view").innerHTML = xhr.responseText; } } } </script> </body>
運行實例?
點擊"運行實例"按鈕查看線上實例
提示:我們的AJAX教學(xué)將幫助您逐步學(xué)習(xí)如何掌握並應(yīng)用AJAX,如果你有任何疑問,請前往PHP中文網(wǎng)AJAX社群提出你的問題,會有熱心網(wǎng)友為你解答。
AJAX優(yōu)缺點
使用Ajax的最大優(yōu)點,就是能在不更新整個頁面的前提下維護資料。這使得網(wǎng)路應(yīng)用程式更為迅捷地回應(yīng)使用者動作,並避免了在網(wǎng)路上發(fā)送那些沒有改變的訊息。
Ajax不需要任何瀏覽器插件,但需要使用者允許JavaScript在瀏覽器上執(zhí)行。就像DHTML應(yīng)用程式一樣,Ajax應(yīng)用程式必須在眾多不同的瀏覽器和平臺上經(jīng)過嚴格的測試。隨著Ajax的成熟,一些簡化Ajax使用方法的程式庫也相繼問世。同樣,也出現(xiàn)了另一種輔助程式設(shè)計的技術(shù),為那些不支援JavaScript的使用者提供替代功能。
對應(yīng)用Ajax最主要的批評就是,它可能會破壞瀏覽器的後退與加入收藏書籤功能。在動態(tài)更新頁面的情況下,使用者無法回到前一個頁面狀態(tài),這是因為瀏覽器只能記下歷史記錄中的靜態(tài)頁面。一個被完整讀入的頁面與一個已經(jīng)被動態(tài)修改過的頁面之間的可能差別非常微妙;用戶通常都希望單擊後退按鈕,就能夠取消他們的前一次操作,但是在Ajax應(yīng)用程式中,卻無法這樣做。不過開發(fā)者已經(jīng)想出了種種辦法來解決這個問題,HTML5 先前的方法大多是在使用者點擊後退按鈕存取歷史記錄時,透過建立或使用隱藏的IFRAME來重現(xiàn)頁面上的變更。 (例如,當(dāng)用戶在Google Maps中單擊後退時,它在一個隱藏的IFRAME中進行搜索,然後將搜索結(jié)果反映到Ajax元素上,以便將應(yīng)用程式狀態(tài)恢復(fù)到當(dāng)時的狀態(tài))。
關(guān)於無法將狀態(tài)加入收藏或書籤的問題,HTML5之前的一種方式是使用URL片段標識符(通常被稱為錨點,即URL中#後面的部分)來保持追蹤,允許用戶回到指定的某個應(yīng)用程式狀態(tài)。 (許多瀏覽器允許JavaScript動態(tài)更新錨點,這使得Ajax應(yīng)用程式能夠在更新顯示內(nèi)容的同時更新錨點。)HTML5 以後可以直接操作瀏覽歷史,並以字串形式儲存網(wǎng)頁狀態(tài),將網(wǎng)頁加入網(wǎng)頁收藏夾或書籤時狀態(tài)會隱形地保留。上述兩種方法也可以同時解決無法後退的問題。
進行Ajax開發(fā)時,網(wǎng)路延遲-也就是使用者發(fā)出請求到伺服器發(fā)出回應(yīng)之間的間隔-需要慎重考慮。如果不給予用戶明確的回應(yīng),沒有恰當(dāng)?shù)念A(yù)讀數(shù)據(jù),或者對XMLHttpRequest的不恰當(dāng)處理,都會使用戶感到厭煩。通常的解決方案是,使用一個可視化的元件來告訴使用者係統(tǒng)正在進行後臺操作並且正在讀取資料和內(nèi)容。
應(yīng)用程式
運用XHTML CSS來表達訊息;
運用JavaScript操作DOM(Document Object Model)來運行動態(tài)效果;
運用XML和XSLT操作資料;
運用XMLHttpRequest或新的Fetch API與網(wǎng)頁伺服器進行非同步資料交換;
注意:AJAX與Flash、Silverlight和Java?Applet等RIA技術(shù)是有區(qū)分的。
本AJAX教學(xué)手冊涵蓋的內(nèi)容
本AJAX教學(xué)手冊涵蓋所有AJAX基礎(chǔ)使用方法,包含AJAX入門、AJAX簡介、AJAX實例、XHR建立物件、XHR請求、 XHR響應(yīng)、XHR readyState、AJAX ASP/PHP、AJAX資料庫、AJAX XML等知識。
提示:本教學(xué)的每一章都包含了許多AJAX實例,您可以直接點擊?"執(zhí)行實例"?按鈕線上查看結(jié)果。這些例子將幫助您更好地理解和使用AJAX。
最新章節(jié)
- AJAX 實例 2016-10-19
- AJAX XML 2016-10-19
- AJAX 數(shù)據(jù)庫 2016-10-19
- AJAX ASP/PHP 2016-10-19
- XHR readystate 2016-10-19
- XHR 響應(yīng) 2016-10-19
- XHR 請求 2016-10-19
- XHR 創(chuàng)建對象 2016-10-19
相關(guān)課程
- Web前端開發(fā)極速入門 2021-12-10
- 最懂你的大前端課:HTML5/CSS3/ES6/NPM/Vue/...【原文】 2022-09-30
- Gulp入門影片教學(xué) 2022-04-18
- 兄弟連高洛峰CSS3影片教程 2022-04-20
- AngularJS開發(fā)Web應(yīng)用程式基礎(chǔ)實例影片教學(xué) 2022-04-18
- Ajax全接觸 2022-04-13
- MUI框架基礎(chǔ)影片教學(xué) 2022-04-13
- 線上訓(xùn)練班試聽課 2019-01-10