Ajax的用法

時間 2019-12-11

標籤 ajax 用法欄目 Ajax 简体版

原文原文鏈接

1 Ajax是什麼javascript

1.1 Asynchronous JavaScript and XML（異步的javascript和xml）java

實質爲：使用瀏覽器內置的一個對象（XmlHttpRequest）向服務器發送請求，服務器返回xml數據或文本數據給瀏覽器，而後在瀏覽器端，使用這些數據更新部分頁面，在整個過程當中，頁面無任何刷新。web

1.2 傳統的等待—響應—等待數據庫

在傳統的web應用中，好比註冊，用戶填寫整個註冊表單後提交，此時瀏覽器會將整個註冊頁面拋棄，等待服務器返回一個新的完整的頁面。在等待過程當中，用戶不可以作其餘操做。服務器生成新的頁面發送給瀏覽器，瀏覽器須要從新解析這個頁面生成相應的頁面。編程

1.3 圖示瀏覽器

① Ajax引擎（即XmlHttpRequest對象），首先爲該對象註冊一個監聽器（該監聽器是一個事件處理函數，對狀態改變事件（readyStatechange）進行監聽）緩存

② 當用戶對GUI作了某種操做（將產生對應的事件，如焦點失去事件等）服務器

③ 一旦產生對應的事件，將觸發事件處理代碼app

④ 在執行事件處理代碼時，會調用Ajax引擎（XmlHttpRequest對象）dom

⑤ 發送請求：Ajax引擎被調用後，將獨自向服務器發送請求（獨立於瀏覽器以外）

　繼續其餘操做：在Ajax引擎發送請求的同時，用戶在瀏覽器還能夠對GUI繼續作其餘操做，該請求是異步請求（Ajax引擎發送請求時，沒有打斷用戶的操做）

⑥ 服務器的web組件對請求進行處理

⑦ 服務器可能會調用到數據庫或者處理業務邏輯的Java類

⑧ 服務器將處理結果響應給（只返回部分數據，能夠是xml或者文本）Ajax引擎

⑨ 監聽器經過Ajax引擎獲取響應數據（xml或者文本）

⑩ 監聽器對GUI中的數據進行更新（局部更新，不是整個頁面刷新）

整個過程當中大部分是經過JS實現的，響應數據多是xml，因此Ajax能夠看作是多種技術的融合。

2 Ajax編程

第一步得到XmlHttpRequest對象

該對象由瀏覽器提供，可是該類型並無標準化。

ie和其餘瀏覽器不一樣，其餘瀏覽器都支持該類型，而ie不支持。

    function getXmlHttpRequest(){
        var xhr = null;
        if((typeof XMLHttpRequest) != 'undefined'){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiceXObject(Microsoft.XMLHttp);
        }
        return xhr;
    }

第二步使用XmlHttpRequest向服務器發請求

a. 發送get請求

function change(v1) {
        var xhr = getXmlHttpRequest();
        /*open(請求方式，請求地址，同步/異步)
        請求方式：get/post
        請求地址：若是是get請求，請求參數添加到地址以後
        好比 get_comments.do?name=QQ
        同步/異步：true表示異步
        */
        xhr.open("get", encodeURI("get_comments.do?name=" + v1), true);
        /*註冊一個監聽器（即當xhr的狀態發生改變產生了readystatechange事件，
        該事件會由一個函數f1來進行處理，這個函數裏須要得到服務器返回的數據，
        而後更新頁面）
        */
        xhr.onreadystatechange = f1;
        /*只有調用send方法以後，請求才會真正發送*/
        xhr.send(null);
    }

b. 發送post請求

function change2(v1){
        var xhr = getXmlHttpRequest();
        xhr.open("post","get_comments.do",true);
        //必須添加一個消息頭 content-type
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.onreadystatechange = f1;
        
        xhr.send("name=" + v1);
    }

第三步在服務器端處理請求

第四步在監聽器當中，處理服務器返回的響應

    xhr.onreadystatechange = f1;
    
    function f1(){
        if(xhr.readyState == 4){
            var txt = xhr.responseText;
            document.getElementById("d1").innerHTML = txt;
        }
    }

或者

    xhr.onreadystatechange =function(){
        //編寫相應的處理代碼
        if(xhr.readyState == 4){
            //只有readyState等於4，xhr才完整地接收到了服務器返回的數據
            //得到文本數據
            var txt = xhr.responseText;
            //得到一個xml dom 對象
            var xml = xhr.responseXML;
            //dom操做 更新頁面
            document.getElementById("d1").innerHTML = txt;
        }
    }