原生Ajax

libxd 發布于2019-08-23 12:19 / 1715人閱讀

摘要：目前原生和已經形式猛如虎。如果原生對象不存在，則檢測對象。此時，可以檢測對象的屬性，該屬性表示請求響應過程的當前活動階段。

目前原生Ajax和.ajax已經形式猛如虎。這一技術能夠向服務器請求額外的數據而無須卸載頁面，會帶來更好的用戶體驗。Ajax技術的核心是XMLHttpRequest對象，這是由微軟首先引入的一種特性，其他瀏覽器供應商后來都提供了相同的實現。在重命名為Ajax之后，大約是2005年底2006年初，這種瀏覽器與服務器的通信技術可謂是紅極一時。人們對Javascript和Web的全新認識，催生了很多使用原有特性的新技術和新模式。就目前來說，熟悉使用XHR對象已經成為所有Web開發人員必須掌握的一種技能。

最早在IE5中,XHR對象是通過MSXML庫中的一個ActiveX對象實現的。要使用MSXML庫中的XHR對象，想支持IE7以及更高版本，需要編寫一個函數：

function createXHR(){
            if (typeof XMLHttpRequest != "undefined") {
                return new XMLHttpRequest();
            }
            IE7及以下
            else if (typeof ActiveXObject!="undefined") {
                if (typeof arguments.callee.activeXString!="string") {
                    var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XNLHttp.3.0","MSXML2.XMLHttp"],i,len;
                    for (i=0,len=versions.length; i
這個函數中新增的代碼首先監測原生XHR對象是否存在，如果存在則返回它的新實例。如果原生對象不存在，則檢測ActiveX對象。如果這兩種對象都不存在，就拋出一個錯誤。然后，就可以使用下面的代碼在所有瀏覽器中創建XHR對象。
var xhr = createXHR();
在使用XHR對象時，要調用的第一個辦法是open()，它接受三個參數：要發送的請求的類型(‘get’、’post’等)、請求的URL和表示是否異步請求的布爾值。下面就是調用這個方法的例子：
xhr.open("get","http://120.78.164.247:9999/user/findAll", false);
這行代碼會啟動一個針對http://120.78.164.247:9999/user/findAll的GET請求。要發送特定的請求，必須像下面這樣調用send()方法：
xhr.open("get","http://120.78.164.247:9999/user/findAll", false);
xhr.send(null);
這里的send()方法接受一個參數，即要作為請求主體發送的數據。如果不需要通過請求主體發送數據，則必須傳入null，因為這個參數對有些瀏覽器來說是必需的。調用send()之后，請求就會被分配到服務器。
在接收到響應后，第一步是檢查status屬性，以確定響應已經成功返回。一般來說，可以將HTTP狀態代碼為200作為成功的標志。此時，responseText屬性的內容已經就緒，而且在內容類型正確的情況下，responseXML也應該能夠訪問了。此外，狀態代碼為304表示請求的資源并沒有被修改，可以直接使用瀏覽器中緩存的版本；當然，也意味著響應是有效的。為確保接收到適當的響應，應該像下面檢查上述這兩種狀態代碼：
 if ((xhr.status>=200&&xhr.status<300)||xhr.status==304) {
            alert(xhr.responseText);
            }else {
            alert("Request was unsuccessful:"+xhr.status);
            }
像前面這樣發送同步請求當然沒有問題，但多數情況下，我們還是要求發送異步請求，才能讓JavaScript繼續執行而不必等待響應。此時，可以檢測XHR對象的readyState屬性，該屬性表示請求/響應過程的當前活動階段。只要readyState屬性的值由一個值變成另一個值，都會觸發一次readystatechange事件。可以利用這個事件來檢測每次狀態變化后readyState的值。通常，我們只對readyState值為4的階段感興趣，因為這時所有數據都已經就緒。不過，必須在調用open()之前指定onreadystatechange事件處理程序才能確保跨瀏覽器兼容性。下面來看一個例子：
var xhr = createXHR();
        xhr.onreadystatechange =function(){
            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","http://120.78.164.247:9999/user/findAll", false);
        xhr.send(null);
以上代碼利用DOM0級方法為XHR對象添加了事件處理程序，原因是并非所有瀏覽器都支持DOM2級方法。與其他事件處理程序不同，這里沒有向onreadystatechange事件處理程序中傳遞event對象；必須通過XHR對象本身來確定下一步怎么做。
祝大家在日富可敵國，bye~

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

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

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

原生JS與jQuery對AJAX的實現

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

Chaz 2019-08-21 10:37 評論0 收藏0
原生JS封裝ajax以及request

摘要：一封裝原生的為類以及用法見之前的文章根據確定請求的頭部以及別的信息。二封裝實用性的類在項目中經常需要將進行封裝，使用類發起請求。請求不帶請求帶請求不帶請求帶請求不帶請求帶這個方法感覺可以再次進行封裝。完整代碼點擊查看以上。一、封裝原生的xhr為ajax類 xhr以及用法見之前的文章 1、根據url確定請求的頭部以及別的信息。 var _headerConfig = {}; ...

james 2019-08-23 13:10 評論0 收藏0
原生javaScript實現Ajax 和 jQuery實現Ajax

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

ssshooter 2019-08-23 17:03 評論0 收藏0
原生JS封裝AJAX請求

摘要：一直在用方法來寫請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現請求，網上看了很多前輩們的關于請求的封裝方法，也借鑒了很多經驗，于是乎就出現了小弟的一個原生封裝的版本，希望大家看了之后能夠明白，下面一直在用jQuery方法來寫ajax請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現ajax請求，網上看...

newsning 2019-08-02 15:56 評論0 收藏0
原生JS封裝AJAX請求

摘要：一直在用方法來寫請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現請求，網上看了很多前輩們的關于請求的封裝方法，也借鑒了很多經驗，于是乎就出現了小弟的一個原生封裝的版本，希望大家看了之后能夠明白，下面一直在用jQuery方法來寫ajax請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現ajax請求，網上看...

hiyang 2019-08-30 13:08 評論0 收藏0