Ajax

Arno 發(fā)布于2019-08-20 17:49 / 2699人閱讀

摘要：原理客戶端通過對象向服務器發(fā)送異步請求，從服務器獲取數(shù)據(jù)，通過操作的對象來更新頁面。是，則返回狀態(tài)碼，客戶端從緩存中讀取數(shù)據(jù)。

原理

客戶端通過xmlHttpRequest對象向服務器發(fā)送異步請求，從服務器獲取數(shù)據(jù)，通過操作javascript的DOM對象來更新頁面。

實現(xiàn) 原生實現(xiàn)

function createXmlHttpRequest(){
    var xhr;
    if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
        xhr = new window.XMLHttpRequest();
    }else if(window.ActiveXObject){
       // code for IE6, IE5
        try{
            xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
         }catch(ex){
             xhr = new window.ActiveXObject("msxm12.XMLHTTP");
         }
    }
    return xhr;
}

function doGet(url, successcallback, errorcallback){
    var xhr = createXmlHttpRequest();
    xhr. open("GET", URL, true);
    xhr.onreadystatechange = function (){
        if(xhr.readystate==4){
            if(xhr.status==200){
                successcallback();
            }else{
                errorcallback();
            }
        }
    }
    xhr.send();
}
function doPost(url, successcallback, errorcallback){
    var xhr = createXmlHttpRequest();
    xhr. open("GET", URL, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function (){
        if(xhr.readystate==4){
            if(xhr.status==200){
                successcallback();
            }else{
                errorcallback();
            }
        }
    }
    xhr.send();
}

Jquery封裝實現(xiàn)

var ajaxa = function(){
    //默認參數(shù)
    var _options = {
        type: "GET",
        url: null,
        data: null,
        dataType: "jsopn",
        success: null,
        fail: null,
        async: true,
        contentType: "application/x-www-form-urlencoded"
    };
    
    return function(options){
        if(!options || !options.url){
            throw("參數(shù)異常");
        }
        
        var xhr = new (window.XMLHttpRequest||window.ActionXObject)("Mircosoft.xml);
        
        xhr.open(options.type, options.url, options.async);
        
        xhr.onreadystate.change = function(){
            if(xhr.raadySate = 4){
                if(xhr.status == 200 && xhr.status < 300 || xhr.status == 304){
                    var text = xhr.responseText;
                    if(options.dataType == "json"){
                        text = JSON.parse(text);
                    }
                    if(typeof options.success === "function"){
                        options.success(text, xhr.status);
                    }
                }else{
                    if(typeof options.fail === "function"){
                        options.fail("failed", 500);
                    }    
                }
            }
        }
        xhr.setRequestHeader("content-type",options.contentType);
        xhr.send(options.data);
    }
}

readystate五種狀態(tài)

0 －（未初始化）還沒有調(diào)用send()方法
1 －（載入）已調(diào)用send()方法，正在發(fā)送請求
2 －（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應內(nèi)容
3 －（交互）正在解析響應內(nèi)容
4 －（完成）響應內(nèi)容解析完成，可以在客戶端調(diào)用了

常見的MIME類型

MIME是描述消息內(nèi)容類型的因特網(wǎng)標準，能包含文本、圖像、音頻、視頻以及其他應用程序?qū)Ｓ玫臄?shù)據(jù)。主要有五種，text、application、images、audio、video

響應狀態(tài)碼304原理

客戶端發(fā)送條件驗證請求，服務器端讀取If-Modified-Since和If-None-Match請求頭信息，來判斷客戶端緩存的資源是否是最新的。是，則返回304狀態(tài)碼，客戶端從緩存中讀取數(shù)據(jù)。

GPU云服務器云服務器 ajax() ajax? ajax _AJAX

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83903.html

ajax與jsonp一點基礎整理

摘要：之所以不能跨域其實是因為受到同源策略的限制，只能讓它訪問同源下的數(shù)據(jù)，不能訪問不同源下的數(shù)據(jù)同源策略每個網(wǎng)站只能讀取同一來源的數(shù)據(jù)，這里的同一來源指的是主機名域名協(xié)議和端口號的組合。一、Ajax的概念 Ajax是一種技術(shù)方案，但并不是一種新技術(shù)。它依賴的是現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象，是這個對象使得瀏...

tomlingtm 2019-08-21 16:57 評論0 收藏0
深入淺出Ajax

摘要：在接收響應期間持續(xù)不斷地觸發(fā)。在請求發(fā)生錯誤時觸發(fā)。在通信完成或者觸發(fā)或事件后觸發(fā)。已經(jīng)接收到部分響應數(shù)據(jù)?；跇藴时粡V泛支持。破壞程序的異常處理機制。原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 學習大綱理解Ajax的工作原理 Ajax核心-XMLHttpRequest對象封裝Aja...

megatron 2019-08-22 18:39 評論0 收藏0
再也不學AJAX了?。ㄒ唬?em>AJAX概述

摘要：需要注意的是，并不是的替代品，兩者各自有其適應的場景。但為了方便交流，我們通常將獲取資源的一方稱為客戶端主要的工具是瀏覽器，而將派發(fā)資源的一方稱為服務端又稱為服務器。它可以幫助我們?yōu)橹蟾拍罴毠?jié)的學習打下良好基礎。再也不學AJAX了是一個與AJAX主題相關的文章系列，包含以下三個部分的內(nèi)容： AJAX概述：主要回答AJAX是什么這個問題；使用AJAX：介紹如何通過JavaSc...

neu 2019-08-21 17:49 評論0 收藏0
ajax入門

摘要：基于標準被廣泛支持。這樣的類最初是在中作為一個名為的對象引入的。請求還沒有被發(fā)送。當為，這個屬性返回目前已經(jīng)接收的響應部分。由服務器返回的狀態(tài)代碼，如表示成功，而表示錯誤。方法取消當前響應，關閉連接并且結(jié)束任何未決的網(wǎng)絡活動。前言總括：本文講解了ajax的歷史，工作原理以及優(yōu)缺點，對XMLHttpRequest對象進行了詳細的講解，并使用原生js實現(xiàn)了一個ajax對象以方便日常開...

Fundebug 2019-08-20 13:51 評論0 收藏0
Web前端-Ajax基礎技術(shù)(下)

摘要：前端基礎技術(shù)下你要明白是什么，怎么使用，程序是將信息放入公共的服務器，讓所有網(wǎng)絡用戶可以通過瀏覽器進行訪問。獲取字符串形式的響應數(shù)據(jù)，獲取形式的響應數(shù)據(jù)?；A回顧原理是借助標簽發(fā)送跨域請求的技巧。 Web前端-Ajax基礎技術(shù)(下) 你要明白ajax是什么，怎么使用？ ajax，web程序是將信息放入公共的服務器，讓所有網(wǎng)絡用戶可以通過瀏覽器進行訪問。瀏覽器發(fā)送請求，獲取服務器的數(shù)據(jù)：...

趙連江 2019-04-23 11:44 評論0 收藏0
AJAX-Cache：一款好用的Ajax緩存插件

摘要：是一款緩存插件，可以為方法擴展緩存功能。緩存清理插件本身會自動清理過期緩存對于不想繼續(xù)使用緩存的接口可以為方法傳入清理當前接口的緩存并返回最新數(shù)據(jù)也可以調(diào)用清理所有插件產(chǎn)生的緩存。原文鏈接 AJAX-Cache是什么 Ajax是前端開發(fā)必不可少的數(shù)據(jù)獲取手段，在頻繁的異步請求業(yè)務中，我們往往需要利用緩存提升界面響應速度，減少網(wǎng)絡資源占用。AJAX-Cache是一款jQuery緩存插件...

didikee 2019-08-22 15:11 評論0 收藏0