好程序員Java學習路線分享原生Ajax的使用,首先我們先來看一下什麼是 AJAX
AJAX 是一種在無需重新加載整個網頁的情況下,能夠更新部分網頁的技術。
AJAX 就是 異步、JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必需重載整個網頁面。
AJAX 工作原理
Browser瀏覽器 Server服務器
發起事件
創建XMLHttpRequest對象
發送請求
接收客戶端發送的對象
回覆一個ResponseText對象
接收ResponseText結果
更新頁面局部數據
XMLHttpRequest 對象
XMLHttpRequest 是 AJAX 的基礎。
所有現代瀏覽器均支持 XMLHttpRequest 對象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用於在後臺與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
創建 XMLHttpRequest 對象
所有現代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內建 XMLHttpRequest 對象。
創建 XMLHttpRequest 對象的語法:
variable=new XMLHttpRequest();
爲了應對所有的現代瀏覽器,包括 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");
}
AJAX - 向服務器發送請求請求
XMLHttpRequest 對象用於和服務器交換數據。
向服務器發送請求
如需將請求發送到服務器,我們使用 XMLHttpRequest 對象的 open() 和 send() 方法:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
open(method,url,async) 規定請求的類型、URL 以及是否異步處理請求。
method:請求的類型;GET 或 POST
url:文件在服務器上的位置
async:true(異步)或 false(同步)
send(string) 將請求發送到服務器。
string:僅用於 POST 請求
GET 還是 POST?
與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能用。
然而,在以下情況中,請使用 POST 請求:
無法使用緩存文件(更新服務器上的文件或數據庫)
向服務器發送大量數據(POST 沒有數據量限制)
發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠
**GET 請求**
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
如果您希望通過 GET 方法發送信息,請向 URL 添加信息:
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
**POST 請求**
一個簡單 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");
AJAX - 服務器 響應
請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數:
服務器響應如需獲得來自服務器的響應,請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
responseText 獲得字符串形式的響應數據。
responseXML 獲得 XML 形式的響應數據。