JavaScript原生Ajax

JessYanCoding 發布于2019-08-23 10:37 / 1413人閱讀

摘要：請求終止時會調用事件處理程序，此時為，這就會調用事件。強行讓對象將響應作為處理。在請求發生錯誤時觸發。最終，實現中引入了事件，用以替代事件。事件事件會在瀏覽器接收新數據期間周期性地觸發。

Ajax請求 一、創建XHR 1、在IE7及其更高的版本中：

var xhr = new XMLHttpRequst();

2、在IE7之前的的版本中使用createXHR函數根據IE中可用的MSXML庫創建最新版本的XHR對象：

function createXHR(){
            if (typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined"){
                if (typeof arguments.callee.activeXString != "string"){
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                    "MSXML2.XMLHttp"];
                    var i;
                    var len;
            
                    for (i=0,len=versions.length; i < len; i++){
                        try {
                            new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex){
                            //skip
                        }
                    }
                }
            
                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }
var xhr = createXHR();

二、XHR的用法

xhr包含四個方法：

xhr.open();//接受3個參數：發送請求的類型，請求的地址，是否異步請求
xhr.setRequestHeader();//接受兩個參數：設置htttp頭部的名字，設置http頭部的值
xhr.send();//接受一個參數：作為請求主體的數據
xhr.abort();//取消異步請求

1、xhr.open()以及xhr.send()

xhr.open()注意：發送請求的地址相對執行代碼的當前頁面。
當調用send()之后，請求將發送到后臺并且服務器響應之后xhr對象的屬性將被自動填充：

responseText:獲得字符串形式的響應數據。
responseXML:獲得 XML 形式的響應數據。
status:響應http的狀態。
statusText:響應狀態說明。

2、readyState屬性

說明：這個屬性表示請求或者是響應個過程的當前活動階段。

0: 未初始化。未調用open()方法。
1: 啟動。已調用open()，未調用send()
2: 發送。已調用send(),尚未接收到響應數據
3: 接收。接收到部分響應數據
4: 完成。已經接收到所有數據

readyState每次改變時將會觸發readystatechange事件。
可以在調用open()之前指定onreadystatechange事件處理程序才能確保跨瀏覽器的兼容性。

//例子
var xhr = createXHR();        
xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

三、請求類型 1、GET請求

說明：用于向服務器查詢信息。
通常將查詢的變量加在請求地址之后
比如說：xxx.xxx.xx?id=2  向服務器傳遞了一個參數名字叫name值為1

用下面這個函數實現添加參數

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" +encodeURIComponent(value);
    return url ;
}

2、POST請求

說明：通常向服務器發送應該保存的數據

使用方法：

xhr.open("post","請求地址",true);

post請求消耗的資源比get請求要多。發送相同的數據，get的速度最多可以達到post的兩倍

四、XMLHTTPRequest 2級 1、FormData

說明：序列化表單以及創建與表單格式相同的數據。
之前在文章中提到過，具體點這里

2、超時限定

XHR的timeout屬性，表示請求等待響應多少毫秒之后就會自動終止。
請求終止時會調用ontimeout事件處理程序，此時readyState為4，這就會調用onreadystatechange事件。但是如果超時終止請求之后再訪問status屬性就會報錯。這里可以使用try-catch中去處理檢查status屬性。

3、overrideMimeType()

強行讓XHR對象將響應作為XML處理。

4、進度事件

loadstart：在接收到相應數據的第一個字節時觸發。
progress：在接收相應期間持續不斷觸發。
error：在請求發生錯誤時觸發。
abort：在因為調用abort()方法而終止鏈接時觸發。
load：在接收到完整的相應數據時觸發。
loadend：在通信完成或者觸發error、abort或load事件后觸發。

每個請求不對觸發Loadstart事件開始，接下來是一或多個progress事件，然后觸發error、abort或load事件中的一個，最后以觸發loadend事件結束。

4.1

Firefox在實現XHR對象的某個版本時，曾致力于簡化異步交互模型。最終，Firefox實現中引入了load事件，用以替代readystatechange事件。響應接收完畢后將觸發Load事件，因此也就沒有必要去檢查readyState屬性了。而onload事件處理程序會接收到一個event對象，其target屬性就指向XHR對象實例，因而可以訪問到XHR對象的所有方法和屬性。然而，并非所有瀏覽器都為這個事件實現了適當的事件對象。結果，開發人員還是要像下面這樣被迫使用XHR對象變量。

var xhr = createXHR();
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

只要瀏覽器接收到服務器的響應，不管其狀態如何，都會觸發load事件。而這意味著你必須要檢查status屬性，才能確定數據是否真的已經可用了。Firefox、Operan、Chrome和Safari都支持load事件。

4.2、progress事件

progress事件會在瀏覽器接收新數據期間周期性地觸發。而onprogress事件處理程序會接收到一個event對象，其target屬性是XHR對象，但包含著三個額外的屬性：lengthComputable、loaded和total。其中，lengthComputable是一個表示進度信息是否可用的布爾值，loaded表示已經接收的字節數，loaded表示根據Content-Length響應頭部確定的預期字節數。有了這些信息，我們就可以為用戶創建一個進度指示器了。

云服務器 GPU云服務器原生ajax 原生php ajax ajax原生js實現原生js封裝ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96526.html

原生javaScript實現Ajax 和 jQuery實現Ajax

摘要：作者后臺使用的是語言，所以這里以后臺為例子不影響學習一原生使用方法創建對象兼容處理處理低版本不兼容問題準備發送請求方式接口參數名參數值異步執行發送回調是表示數據解析完成，后臺處理完成了。是表示處理的結果是的。作者后臺使用的是php語言，所以這里以php后臺Api為例子,不影響學習Ajax 一、 javaScript原生使用Ajax 1.get方法 //1.創建對象兼容處理 var ...

ssshooter 2019-08-23 17:03 評論0 收藏0
原生JavaScript實現AJAX、JSONP

摘要：在這里講解一下用原生如何實現。當然，前面也說過，你可以給定固定回調函數名最后我已經將和請求合并在一起了，下載鏈接原文鏈接原生實現如有問題，歡迎在下方留言相信大多數前端開發者在需要與后端進行數據交互時，為了方便快捷，都會選擇JQuery中封裝的AJAX方法，但是有些時候，我們只需要JQuery的AJAX請求方法，而其他的功能用到的很少，這顯然是沒必要的。其實，原生JavaScript...

xcc3641 2019-08-20 14:06 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
原生 JavaScript 發送 Ajax 請求

Ajax Asynchronous JavaScript + XML 作用實現頁面的部分更新寫法 var r = new XMLHttpRequest() r.open(method, path) r.onreadystatechange = function() { if (r.readyState == 4) { r.setRequestHeader(Content-Type,...

趙春朋 2019-08-26 13:41 評論0 收藏0
原生JS與jQuery對AJAX的實現

摘要：原生與對的實現一定義里這么解釋異步的和。二原生實現所有現代瀏覽器以及均內建對象。一般是正常未找到頁面，一般是錯誤，或者后臺沒有創建相應的內部服務錯誤，多為后臺錯誤。基本上通過發送的數據及傳回的數據就能定位問題所在了。原生JS與jQuery對AJAX的實現一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

Chaz 2019-08-21 10:37 評論0 收藏0