ajax基礎知識

1.   什麼是Ajax ?ajax

a)   無刷新的從服務器上讀取數據;意味着能夠在不從新加載整個網頁的狀況下,對網頁的某部分進行更新;json

2.   關於瀏覽器緩存:瀏覽器

a)   緩存機制:根據地址來緩存,一樣地址只讀一次;能夠經過Math.random()或new Date().getTime()解決。緩存

b)   解決緩存困擾:在文件名後加上一個時間戳參數;保存每次讀取文件的路徑都不同,這樣瀏覽器就不會去緩存中拿而去讀新的;安全

3.   Ajax請求動態數據:服務器

a)   請求JSON文件;網絡

b)   Ajax 從服務器上所讀取的全部東西都是以文本的形式存在的;dom

c)   eval的使用,將返回的string轉換成arr,或json;異步

d)   配合DOM使用;函數

4.   eval(str):

a)   接受一個字符串做爲參數(服務器讀取的數據都是string類型),這個字符串裏面能夠聽任何JS代碼;

b)   eval能夠計算字符串裏的值;對於json要加();

<script>
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                oBtn.onclick=function(){   //無刷新的從服務器中取數據
                    ajax('b.txt?t='+Math.random(),function(str){    //Math.random()解決緩存,success成功以後的回調函數
                        var json=eval('('+str+')');    //str--json
                        console.log(json.a); 
                    },function(){                             //error失敗以後的回調函數
                        alert('失敗了');
                    });
                };
            }
        </script>

 

5.   Ajax的原理:

a)   HTTP 請求:

        i.      GET方式:安全性低、容量小,有緩存,適於分享,適合獲取數據;(如: 瀏覽帖子)

       ii.      POST方法:安全性稍好,容量2G,無緩存,適合上傳數據;(如:用戶註冊)

6.   Ajax請求服務器數據的4個步驟:

a)   建立一個Ajax對象 (買個手機);

        i.      非IE6 : new XMLHttpRequest();

       ii.      IE6 : new ActiveXObject("Microsoft XMLHTTP");

b)   鏈接服務器(撥號);

c)   發送請求,告訴服務器要什麼(說話);

d)   接收返回值(聽);

7.   Ajax對象建立的兼容處理:

a)   用if (window.XMLHttpRequest) 取代if (XMLHttpRequest)  

b)   原理:

        i.      用一個不存在的變量: 出錯;

       ii.      用一個不存在的屬性:undefined;

8.   Ajax鏈接服務器:

a)   oAjax.open(方法,url, 是否爲異步);

b)   方法:大多用」Get」;

c)   同步與異步:

        i.      同步:任何兩件事不能一起作;

       ii.      異步: 多件事兒能夠一塊兒進行;Ajax天生就該工做在異步模式下的;

9.   Ajax發送請求:

a)   oAjax.send();

10.Ajax接收服務器的返回信息:

a)   oAjax.onreadystatechange 事件:

        i.      它相似於window.onload;

       ii.      用來監控請求狀態;

     iii.      是當客戶端和服務器那邊有通訊發生或有狀態變化的時候會來調用;

       iv.      客戶端和服務器的通訊不是一步就完成的;

        v.      oAjax.readyState屬性:告訴咱們客戶端和服務器的通訊發生到哪一步了; 4 表明完成;

       vi.      oAjax.readyState == 4 只表明完成,不表明成功;

     vii.      oAjax.status == 200 表明成功;

    viii.      oAjax.status  , 400可能是客戶端錯誤, 500可能是服務器錯誤, 300可能是重定向;

       ix.      oAjax.responseText , 就是取得服務器返回的內容;

11.完整的ajax.js:

function json2str(json){    //將json轉str
    json.t=Math.random();
    var arr=[];
    for(var name in json){
        arr.push(name+'='+encodeURIComponent(json[name]));  //encodeURIComponent兼容漢字,可把字符串做爲URI組件進行編碼。
    }
    return arr.join('&');
}

function ajax(url,data,success,error){    //data是url?後面的東西
    //success成功以後的回調函數
    //1.建立一個ajax對象
    if(window.XMLHttpRequest){//能夠用undefined做爲判斷條件,但不能用error做爲判斷條件;變量不定義,加window至關於undefinded;
        var oAjax = new XMLHttpRequest();   //用於非ie6
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHttp');//用於ie6;Microsoft公司的插件
    }
    //2.創建鏈接  是否異步
    oAjax.open('GET',url+'?'+json2str(data),true);
    //3.發送
    oAjax.send();
    //4.接收
    oAjax.onreadystatechange = function(){
             //網絡狀態readyState
        if(oAjax.readyState == 4){   //接收完成   0,初始化1,創建鏈接2.發送3.接收4.完成
            //http的狀態status
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status == 304){   //接收成功  200-300接收成功 304未修改 404未找到
                //從服務器返回的文本
                success&&success(oAjax.responseText);    //若是成功,服務器返回的文本內容    
            }else{
                error&&error(oAjax.status);//若是錯誤,服務器返回的錯誤碼
            }
        }
    };
    
}    

 12.ajax的特色:

a.緩存    Math.random,new Date().getTime();b.返回的內容都是string類型        eval json必須加括號c.編碼格式要統一        utf-8         gb2312d.ajax請求數據 與文件後綴名無關

相關文章
相關標籤/搜索