原生js--http請求


1、終止請求和超時

終止請求XMLHttpRequest對象提供abort方法,調用該方法時觸發abort事件

XHR2提供了timeout屬性,當超時發生時觸發timeout事件。但瀏覽器尚不支持自動超時。可以使用setTimeout模擬實現。

例如:

function timedGetText( url, time, callback ){
    var request = new XMLHttpRequest();
    var timeout = false;
    var timer = setTimeout( function(){
        timeout = true;
        request.abort();
    }, time );
    request.open( "GET", url );
    request.onreadystatechange = function(){
        if( request.readyState !== 4 ) return;
        if( timeout ) return;
        clearTimeout( timer );
        if( request.status === 200 ){
            callback( request.responseText );
        }
    }
    request.send( null );
}

2、跨域HTTP請求

XHR2通過在HTTP響應中選擇發送合適的CORS(Cross-Origin Resource Sharing),允許跨域訪問網站,Firefox、Chrome等都已經支持CORS,IE8通過SDomainRequest對象支持。但這種跨域請求不會包含cookie和HTTP身份驗證令牌,可以通過設置withCredentials為true才能實現包含以上信息。

 

3、借助script發送HTTP請求(jsonp)

支持jsonp的服務不會強制指定客戶端必須實現的回調函數名稱

使用script元素發送JSON請求

function getJSONP( url, callback ){
    var cbnum = "cb" + getJSONP.counter++;
    var cbname = "getJSONP." + cbnum;
    if( url.indexOf( "?" ) === -1 ){
        url += "?jsonp=" + cbname;
    }else{
        url += "&jsonp" + cbname
    }
    var script = document.createElement( "script" );
    // 回調函數
    getJSONP[cbnum] = function( response ){
        try{
            callback( response );
        }finally{
            delete getJSONP[num];
            script.parentNode.removeChild( script );
        }
    };
    script.src = url;
    document.body.appendChild( script );
}
getJSONP.counter = 0;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM