Ajax

概念

　　Ajax，即異步的JavaScript和XML（Asynchronous JavaScript and XML），是一種無需從新加載整個網頁的狀況下，更新部分網頁的技術

優勢

1. 經過異步模式，提高用戶體驗
2. 優化瀏覽器和服務器間傳輸，減小沒必要要的數據往返以及帶寬佔用
3. 在客戶端運行時，承擔了一部分服務器承擔的工做，減小了大用戶量下的服務器負載

缺點

1. 不支持瀏覽器的回退（back）按鈕
2. 會暴露和服務器交流的細節，存在安全問題
3. 對搜索引擎支持較弱

 

使用步驟

　　通常包括三步

1. 建立XMLHttpRequest對象（異步調用對象）
2. 建立新的HTTP請求，指定該HTTP請求的方法、URL
3. 設置響應HTTP請求狀態變化的函數

　　須要注意的是，Ajax須要與服務器通訊，所以須要用服務器啓動，而不是直接在瀏覽器中打開頁面

　　這裏使用Wampserver64來訪問，下載地址（提取碼：gixc）和使用說明（提取碼：u3lw）見連接

建立XMLHttpRequest對象

　　XMLHttpRequest是Ajax的核心，一種支持異步請求的技術

　　能夠向服務器提出請求並處理響應，不阻塞用戶，在頁面加載後進行頁面的局部更新

　　這一對象由於在不一樣瀏覽器中支持方式不一樣，因此須要考慮兼容性

 1 //Ajax第一步，建立XMLHttpRequest對象
 2 //封裝通用的xhr，兼容各個版本
 3 function createXHR(){
 4     //判斷瀏覽器是否將XMLHttpRequest做爲本地對象實現，針對firefox、opera等
 5     if(typeof XMLHttpRequest != 'undefined'){
 6         return new XMLHttpRequest();
 7     }
 8     else if(typeof ActiveXObject != 'undefined'){
 9         //將全部可能出現的ActiveXObject版本放在一個數組裏
10         var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
11         //遍歷建立XMLHttpRequest對象
12         var len = xhrArr.length;
13         var xhr;
14         for(var i=0;i<len;i++){
15             try{
16                 //建立XMLHttpRequest對象
17                 xhr = new ActiveXObject(xhrArr[i]);
18                 //遇到支持的版本號就退出
19                 break;
20             }
21             //若是當前循環的版本號不支持，捕獲錯誤可是沒有操做
22             catch(ex){
23 
24             }
25         }
26         return xhr;
27     }
28     else{
29         throw new Error('No XHR object available!');
30     }
31 }

XMLHttpRequest建立

　　也能夠不用考慮過多的版本號，直接分IE和非IE來建立XMLHttpRequest

1 var xmlhttp;
2 if(window.XMLHttpRequest){
3     //針對IE7+、Firefox、Chrome、Opera、Safari
4     xmlhttp = new XMLHttpRequest();
5 }
6 else{
7     //針對IE六、IE5
8     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
9 }

XMLHttpRequest建立2

 

建立HTTP請求

　　用XMLHttpRequest對象的open方法來建立（注意是建立而不是發送）

　　該方法初始化請求，準備發送同一個域中使用相同協議和端口的URL發送請求，不然會由於安全緣由報錯

　　其中包括三個參數

請求類型

　　分get和post兩種

　　get速度快，大部分狀況下均可使用

　　post在如下三種狀況下是get沒法替代的：

1. 沒法使用緩存文件（更新服務器上文件/數據庫時）
2. 向服務器發送大量數據（post方法沒有發送的數據量限制）
3. 發送包含未知字符的用戶輸入

URL

　　文件在服務器上位置，open方法中惟一必須傳入的參數

　　這裏的文件能夠爲任何類型的/服務器腳本文件

async

　　一個布爾值，默認爲true（異步），也可設置false（同步）

 

設置狀態請求變化函數

　　用函數監測XMLHttpRequest的readystatechange屬性變化狀況

　　其中readyState屬性值爲4時，表示異步響應內容解析完成，能夠在客戶端調用

　　status屬性值在[200,300)時，表示異步調用（交易）成功

　　status屬性值爲304時，表示請求資源沒有被修改，能夠用瀏覽器緩存（即以前用過異步相同內容並且成功了，該內容在緩存中）

 1 //響應XMLHttpRequest對象狀態變化的函數
 2 //onreadystatechange在readystatechange屬性變化時觸發
 3 xhr.onreadystatechange = function(){
 4     //異步響應內容解析完成，能夠在客戶端調用
 5     if(xhr.readyState === 4){
 6         //異步調用（交易）成功，或者請求資源沒有被修改，能夠用瀏覽器緩存（即以前用過異步並且成功了）
 7         if((xhr.status >=200 && xhr.status<300) || xhr.status === 304){
 8             //返回服務器數據
 9         }
10     }
11 }

onReadyStateChange

發送請求

　　用send方法向服務器發送請求

　　其中當建立請求（open方法）的請求方法爲post時，纔可傳入字符串/對象，不然值只可傳入null

　　在post前，須要先用setRequestHeader方法添加HTTP頭（固定寫法，以下），而後才能發送數據

1 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

 

獲取服務器端返回的數據

　　在收到響應後，XMLHttpRequest的四個屬性會被填充，能夠從responseText/responseXML來得到從服務器進程返回的數據

　　其中responseText是字符串形式（使用較多），responseXML是DOM兼容的文檔數據對象

 

渲染數據

　　獲取服務器端返回的數據後，能夠把該數據添加到當前HTML中

　　添加的方法包括DOM操做、字符串拼接等 

 

JSON

概念

　　即JavaScript對象表示法（JavaScript object notation），一種數據交換的文本格式，並非編程語言

語法規則

　　JSON能夠支持JavaScript中的基本類型、數組、對象

　　基本類型中，字符串必須用雙引號表示，數值必須用十進制表示，不能用NaN和Infinity，不支持undefined

　　對象中，鍵名必須放在雙引號中，對象的末尾沒有分號，且同一個對象中不可出現兩個同名屬性

　　數組/對象中最後一個成員後不可加逗號

方法

parse()

　　把JSON字符串轉化成對象

　　語法爲JSON.parse(JSON字符串)

　　JavaScript中的eval方法與其相似，可是也能夠執行不符合JSON格式的代碼，所以儘量少用

stringify()

　　把一個值轉成符合JSON格式的字符串，並能夠被JSON.parse()方法還原

　　語法爲JSON.stringify(原生JavaScript值)

 

Jquery的Ajax方法

　　主要使用的是$.ajax()方法

　　內部包括五個參數：請求地址、請求方式、同步異步、數據格式以及請求成功的回調

 1 $.ajax({
 2     url:"./server/slider.json",
 3     type:"post",
 4     async:true,
 5     dataType:"json",
 6     success:function(imgData){
 7         jQurenderDataToDom(imgData);
 8         //這一步是請求成功以後的渲染數據的函數
 9     }
10 })

jQuery的Ajax

 

跨域

定義

　　從一個域名網頁請求另外一個域名資源，也就是隻要協議、域名、端口三者其一有不一樣，就是跨域

　　其中域名、協議、端口均相同時，被稱做同源

解決方法

　　跨域資源共享（CORS）、JSONP（經常使用）、修改document.domain、使用window.name

JSONP

　　即填充式JSON（JSON with padding），一種跨域解決方案

　　JSONP包括回調函數（響應到來時頁面中調用的函數，由用戶提供）和數據（傳入回調函數中的JSON數據，由服務器返回）

　　JSONP是利用了在頁面上能夠引入不一樣域上的js腳本文件來實現的

 1 //封裝JSONP
 2 function getJSONP(url,callback){
 3     if(!url){
 4         return;
 5     }
 6     //聲明數組用來隨機生成函數名
 7     var a = ['a','b','c','d','e','f','g','h','i','j'],
 8         r1 = Math.floor(Math.random()*a.length),
 9         r2 = Math.floor(Math.random()*a.length),
10         r3 = Math.floor(Math.random()*a.length),
11         name = 'getJSONP'+a[r1]+a[r2]+a[r3],//這裏不用getJSONP打頭也能夠
12         cbname = 'getJSONP.'+name;//這裏是未來服務端傳回的getJSONP的屬性值，必須以getJSONP打頭
13     //判斷url中是否含有？
14     if(url.indexOf('?') === -1){
15         url += '?jsonp=' + cbname;
16     }
17     else{//在url地址的?參數後面再加一個新參數，所以用&隔開
18         url += '&jsonp' + cbname;
19     }
20     //動態建立script標籤
21     var script = document.createElement('script');
22     //定義被腳本文件執行的回調函數（最核心部分）
23     getJSONP[name] = function(data){
24         try{
25             callback && callback();
26         }
27         catch(e){
28          }
29         finally{
30             //不管是否執行成功，刪除getJSONP的屬性以及回調函數，以釋放內存空間
31             delete getJSONP[name];
32             script.parentNode.removeChild(script);
33         }
34     }
35     //定義script的src，把這個新的script添加到head標籤的最後
36     script.src = url;
37     document.getElementsByTagName('head')[0].appendChild(script);
38 }

跨域封裝