好程序員Java學習路線分享原生Ajax的使用

好程序員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 形式的響應數據。