好程式設計師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 形式的響應資料。