AJAX 使用XMLHttpRequest對象發送和接受數據


 XMLHttpRequest是XMLHttp組件的對象,通過這個對象,Ajax可以像桌面應用程序一樣只與服務器進行數據層的交換,而不必每次都刷 新界面,也不必每次將數據處理的工作都交給服務器來做;這樣既減輕了服務器負擔又回憶了響應速度,縮短了用戶的等待時間。
 XMLHttpRequest對象與Ajax
       在Ajax應用程序中,XMLHttpRequest對象負責將用戶信息以異步通信地發送到服務器端,並接收服務器響應信息和數據。
       需要注意的是JavaScript本身並不具有向服務器發送請求的能力,要么使用window.open()方法重新打開一個頁面,要么使用XMLHttpRequest對象發送請求,不同的是,前者是普通的即同步交互模式,而后者是異步交互模式。
       XMLHttpRequest對象的屬性和方法。
       IE5.0 開始,開發人員就可以在WEB頁面內部使用XMLHTTP ActiveX組件擴展自身的功能,而Mozilla1.0及NetScape7則是創建繼承XML的代理類XMLHttpRequest;對於大多情況 XMLHttpRequest和XMLHttp組件很相似,方法和屬性類似,只是部份屬性不同。以下代碼演示了如果在IE以及NetScape等瀏覽器中 創建XMLHttpRequest對象。

<script language="javascript">
        //定義一個變量
        var http_request = false;
        //IE瀏覽器中創建
        http_request = new ActiveXObject("Msxml2.XMLHTTP");//新版本IE
        http_request = new ActiveXObject("Microsoft.XMLHTTP");//舊版本IE
        //Netscope瀏覽器
        http_request = new XMLHttpRequest();
    </script>

 需要注意的是 在微軟最新的 IE7.0版本瀏覽器中也已經支持了XMLHttpRequest,也就是說在IE7.0中同時支持以及上二種創建方式。在我們開發AJAX應用程序時一定要注意要兼容瀏覽器類型。

創建方式可以如下:

 var http_request = false;
    function createXMLHttpRequest()
    {        
        http_request = false;
        //開始初始化XMLHTTPRequest對象
        if(window.XMLHttpRequest)//如果是window.XMLHttpRequest對象
        {
            //Mozilla,netscape 瀏覽器
            http_request = new XMLHttpRequest();    
            if (http_request.overrideMimeType) {//設置MiME類別
            //有些版本的瀏覽器在處理服務器返回的未包含XML mime-type頭部信息的內容時會報錯,因此,要確保返回的內容包含text/xml信息。
            http_request.overrideMimeType("text/xml");
        }
        }
        else if(window.ActiveXObject)//如果是window.ActiveXObject
        {
            //IE瀏覽器
            try
            {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");//IE較新版本
            }
            catch (e)
            {
                try
                {
                    http_request = new ActiveXObiect("Microsoft.XMLHTTP"); //ie舊版本
                }
                catch (e){}
            }
        }
        if(!http_request)
        {
            //異常,創建對象實例失敗
            window.alert("不能創建XMLHttpRequest對象實例。");
            return false;
        }
    }

 這樣就是一個簡單的跨瀏覽器的創建方法。

      另外XMLHttpRequest對象提供了一系列屬性和方法,來向服務器端發起異步HTTP請求,監聽服務器狀態,並在服務器完成數據響應處理之后接收服務器端返回的信息數據。下面是對其的說明:
onreadystatechange:指定當readyState屬性改變時的事件處理句柄,屬性只寫。
    XMLHttpRequest 對象屬性onreadystatechange是readyState狀態改變的事件觸發器,用來指定當readyState屬性發生改變時的處理事件。 在使用過程中,通常通過將事件處理函數名稱賦予onreadystatechange的方式,來為XMLHttpRequest指定事件觸發器,而在事件 處理函數中判斷readyState狀態值並做相應的處理。
    如上:http_request.onreadystatechange = processRequest;processRequest作為事件處理函數,並在processRequest函數體內在readyState狀態為 4 時開始執行。
 responseBody:將回應信息正文以unsigned byte 數組形式返回,屬性只讀。
 responseXML:將響應信息格式化為XML Document對象返回,屬性只讀。
   
    abort:取消當前請求;
        語法:http_request.abort();調用此方法,當前請求返回uninitialized狀態。
    getAllResourceHeaders:獲取相應的全部http頭信息;像JSP中的HttpServletRequest對象一樣,獲取http請求的     請求頭信息,語法:headers = http_request.getAllResourceHeaders();
    getResourceHeader:從響應信息中獲取指定的http頭信息。
        語法:head = http_request.getResourceHeader("header-name");
    open:創建一個新的http請求,並指定此請求的方法,URL,以及驗證信息(用戶名/密碼)。
        語法:http_request.open(method,url,async,user,password);
        async為布爾值,指定請求是否異步方式,默認為true;如果為真,當state狀態改變時會調用onreadystatechange屬性指向的回調函數。如果服務器需要驗證,則應該指定用戶名和密碼 。
    send:發送請求到http服務器並接收回應。創建http請求后,就可以向服務器發送http請求,send方法被調用
       語法:http_request.send(varBody);
      參 數varBody為要發送給服務器的內容。如果沒有內容要發送,varBody參數可以省略,但最好寫為null,因為如果省略不寫在Firfox中會報 錯,所以就為http_request.send(null);。此方法的同步或異步方式取決於open方法中的async參數。
    setRequestHeader:單獨設定請求的某個頭。
 status:返回當前HTTP請求的狀態碼,屬性只讀。如:404=“文件未找到”,200=“成功”
 statusText:返回當前HTTP請求的狀態行,屬性只讀。

  總結,五個步驟:

        1.創建XMLHttpRequest對象。

        2.注冊回調函數 xmlhttp.oncreadystatechange = 函數名 ;       //注意:該函數名后面不需要加括號。

        3.設置連接信息 xmlhttp.open();

          xmlhttp.open(請求方式,url,是否同步.);           //第一個參數,請求方式,一般get or post,第二個參數,請求url,get請求參數也在里面,第三個參數,true or false ,true表示異步.

        4.發送數據。xmphttp.send(data);


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM