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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章