Ajax提交底層原型XMLHttpRequest

時間 2020-06-29

標籤 ajax 提交底層原型 xmlhttprequest 欄目 Ajax 简体版

原文原文鏈接

相信接觸過ajax的都以爲其post,get提交很方便,那麼他是怎麼實現的呢?基於此咱們就不得不談到js中的XMLHttpRequest對象.javascript

其中w3c中是這樣解釋的:　html

XMLHttpRequest 對象用於在後臺與服務器交換數據。java

XMLHttpRequest 對象是開發者的夢想，由於您可以：ajax

- 在不從新加載頁面的狀況下更新網頁
- 在頁面已加載後從服務器請求數據
- 在頁面已加載後從服務器接收數據
- 在後臺向服務器發送數據

全部現代的瀏覽器都支持 XMLHttpRequest 對象。瀏覽器

XMLHttpRequest 對象的方法主要有:緩存

abort()方法服務器

request.abort()併發

中斷當前對象的HTTP請求.app

open方法函數

request.open(method,url,sync);

初始化HTTP鏈接請求對象,設置請求方法,地址,認證信息.method能夠定義爲"POST","GET"兩種

send 方法

request.send("args");

向服務器發送一個HTTP請求,並獲取返回結果.

setRequestHeader方法:

request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");

在請求header中設置Header/Value值對併發送到服務器端.

XMLHttpRequest 對象的屬性主要有:

onreadystatechange

設置請求對象狀態readystate改變時要調用的函數對象;

readyState

請求對象的狀態值,含義以下:

0 - 請求對象被建立,但未初始化,即open方法未調用

1 - 裝載中,open方法已調用,send方法未調用

2 - 已裝載,send方法已調用,但還未得到Header信息

3 - 交互中,已獲取了部分信息,這時調用responseText將獲得不完整信息,會返回錯誤

4 - 全部數據已接收完成,可用responseText或responseBody獲得完整數據

responseBody

表示從HTTP響應獲得的返回原始信息,內容的編碼方式決定於請求的服務器端(UTF-8, UCS-2, UCS-4, Shift_JIS等)

responseText

HTTP請求返回數據體的字符串表示，缺省狀況下用utf-8編碼後返回，若是返回內容中有中文，服務器端的數據必須用utf-8編碼，不然就會出現亂碼。

responseStream

HTTP請求返回數據的流對象,該對象實現IStream接口.

responseXML

返回XML格式的數據對象. 服務器端返回數據爲XML格式數據時可用.服務器端用動態語言生成xml時,必須設置content-type爲text/xml，不然客戶端獲得的responseXML爲空

status

HTTP返回代碼.

200 - 成功

404 - 錯誤請求

500 - 服務器內部錯誤,等等. 詳見HTTP協議.

statusText

HTTP返回狀態文本描述.

實例POST代碼:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>XMLHttpRequest測試</title>
        <script type="text/javascript">
        window.onload=function(){
            //監聽a中的click事件
            document.getElementsByTagName("a")[0].onclick=function(){
                //建立XMLHttpRequest對象(注意大小寫)
                //var request =window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
                //考慮兼容性
                //var request=init();
                var request=new XMLHttpRequest();
                　function init(){
                　　if (window.XMLHttpRequest) {
                　　　return new XMLHttpRequest();
                　　}
                　else if (window.ActiveXObject) {
                　　return new ActiveXObject("Microsoft.XMLHTTP");
                　}
                }
                //添加時間戳 起到禁用緩存的效果
                var url=this.href;
                //+"?time="+new Date();
                //請求方式爲GET請求
                //var method='GET';
                //請求方式爲POST請求
                var method="POST";
                //準備發送請求(就像汽車發動機點火同樣)
                request.open(method,url,true);
                //若是是Post請求,須要在此處添加setheader,格式以下:
                request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
                //發送請求(汽車運行..)
                
                //request.accept="text/html";
                //request狀態變化
                request.onreadystatechange=function(){
                    //判斷響應是否完成
                    if (request.readyState==4) {
                        //判斷響應是否可用
                        if(request.status==200){
                            //打印響應信息
                            console.info(request.responseText);
                        }
                    } 
                };
                var age=10;
                request.send("age="+age);
                //禁用a跳轉
                return false;
            };
            
        };
    </script>
    </head>
    
    <body>
        <a href="hw.txt">點擊我</a>
    </body>
        
    </html>