淺析ajax

objc94 發布于2019-08-19 17:57 / 1494人閱讀

摘要：如果響應的內容類型是或，這個屬性將保存包含著響應數據的文檔。響應的狀態狀態的說明當對象把一個請求發送到服務器的過程中會經歷幾個狀態，直到請求被處理，然后才接收一個回應。

1.什么是Ajax

Ajax：是Asynchronous Javascript And XML的簡寫，即異步JavaScript和XML
用途：動態刷新局部數據，無需卸載整個頁面，從而帶來更好的用戶體驗
Ajax核心：XMLHttpRequest對象(簡稱XHR)

2.如何創建XHR對象

以下是一個跨瀏覽器創建XHR對象的函數:

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

XMLHttpRequest這個對象的屬性：

responseText 作為響應主體返回的文本。

responseXML 如果響應的內容類型是"text/xml"或"application/xml"，這個屬性將保存包含著響應數據的xml DOM文檔。

status 響應的http狀態

statusText http狀態的說明

當XHR對象把一個HTTP請求發送到服務器的過程中會經歷幾個狀態，直到請求被處理，然后才接收一個回應。readyState是XHR請求的狀態屬性，它本身有5個屬性值：

0（未初始化）還沒有調用open()方法

1（啟動）已調用send()方法，正在發送請求

2(發送)send()方法完成，已收到全部響應內容

3(接收)已經接收到部分響應內容

4（完成）響應內容解析完成，可以再客戶端使用了

3.實現Ajax的步驟

A.創建一個XHR對象

var xhr= createXHR();

B.設置響應HTTP請求狀態變化的函數

xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;//刷新了xxx中的數據
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};

C.創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及表示是否異步發送請求的布爾值

xhr.open("get","getAjaxData.php",true);//true表示異步發送請求

D.設置自定義請求頭部(可選)

xhr.setRequestHeader("myHeader","myValue");//jsonp跨域請求時會用到自定義的頭部

E.發送http請求

xhr.send(null);//作為請求主體發送的數據，無數據必須傳入null，post請求時經常會發送數據

完整代碼如下：

var xhr= createXHR();
xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};
xhr.open("get","getAjaxData.php",true);
xhr.setRequestHeader("myHeader","myValue");
xhr.send(null);

GPU云服務器云服務器源碼淺析 cdn淺析 jdbc連接mysql數據庫的方法淺析 ajax()

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

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

切圖崽的自我修養－[HTTP] Http Proxy淺析

摘要：前言它是一個中介代理服務器是網絡的中間實體。代理位于客戶端和服務器之間，扮演中間人的角色。前言它是一個中介 Web代理(proxy)服務器是網絡的中間實體。代理位于Web客戶端和Web服務器之間，扮演中間人的角色。HTTP的代理服務器即是Web服務器又是Web客戶端 Proxy代理軟件 mac常用的proxy軟件有Charles proxy軟件只能映射你瀏覽器的請求的host ...

heartFollower 2019-08-20 11:27 評論0 收藏0
切圖崽的自我修養－[HTTP] Http Proxy淺析

摘要：前言它是一個中介代理服務器是網絡的中間實體。代理位于客戶端和服務器之間，扮演中間人的角色。前言它是一個中介 Web代理(proxy)服務器是網絡的中間實體。代理位于Web客戶端和Web服務器之間，扮演中間人的角色。HTTP的代理服務器即是Web服務器又是Web客戶端 Proxy代理軟件 mac常用的proxy軟件有Charles proxy軟件只能映射你瀏覽器的請求的host ...

RayKr 2019-08-01 15:48 評論0 收藏0
淺析jQuery整體框架與實現（上）

摘要：通常的做法是，為它們指定回調函數。請求返回請求返回請求返回異步隊列解耦異步任務和回調函數為模塊隊列模塊事件提供基礎功能。前言 jQuery整體框架甚是復雜，也不易讀懂，這幾日一直在研究這個笨重而強大的框架。jQuery的總體架構可以分為：入口模塊、底層模塊和功能模塊。這里，我們以jquery-1.7.1為例進行分析。 jquery的總體架構 16 (function( window,...

VEIGHTZ 2019-08-21 10:20 評論0 收藏0
CAS 5.2.x 單點登錄 - 實現原理及源碼淺析

摘要：上一篇文章簡單介紹了在本地開發環境中搭建服務端和客戶端，對單點登錄過程有了一個直觀的認識之后，本篇將探討單點登錄的實現原理。因此引入服務端作為用戶信息鑒別和傳遞中介，達到單點登錄的效果。為該流程的實現類。表示對返回結果的處理。上一篇文章簡單介紹了 CAS 5.2.2 在本地開發環境中搭建服務端和客戶端，對單點登錄過程有了一個直觀的認識之后，本篇將探討 CAS 單點登錄的實現原理。一...

elisa.yang 2019-08-16 11:07 評論0 收藏0
淺析 web 前端 MVVM

摘要：它由微軟架構師和開發，通過利用微軟圖形系統和的互聯網應用派生品的特性來簡化用戶界面的事件驅動程序設計。微軟的和架構師之一于年在他的博客上發表了。更改時會得到提醒這個情況是一個單向流。前言記得四個月前有一次面試，面試官問我 MVVM 是什么，MVVM 的本質是什么。我大腦一片混亂，那時我對 MVVM 的認知就只是雙向綁定和Vue，以這個關鍵字簡單回答了幾句，我反問 MVVM 的本質是...

VincentFF 2019-08-23 14:35 評論0 收藏0