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請求數據 與文件後綴名無關