AJAX的簡介以及跨域通信的實現(xiàn)

本篇內(nèi)容主要講解“AJAX的簡介以及跨域通信的實現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“AJAX的簡介以及跨域通信的實現(xiàn)”吧!

1.Ajax

1.1.Ajax簡介
  Ajax簡介這一部分我們主要是談一下ajax的起源，ajax是什么？因為這些是跟技術(shù)無關的。所以，大多細節(jié)都是一筆帶過。

  Ajax的起源？

　　Ajax一詞源于2005年 Jesse James Garrett發(fā)表的一篇題為"Ajax:A new Approach to Web Applications".他在這篇文章中介紹了一種新技術(shù)，用他的話說，就是Ajax ：Asynchronous JavaScript +XML的縮寫。

  Ajax是什么？

　　這種新技術(shù)的主要目的就是為了使前端網(wǎng)頁能夠向服務器請求額外的數(shù)據(jù)而不需要卸載頁面。自從這種技術(shù)出現(xiàn)以后，微軟率先引入XHRt對象(ajax能夠?qū)崿F(xiàn)的核心對象)，然后其他瀏覽器相繼實現(xiàn)這種技術(shù)?？偠灾?，ajax就是一種能異步通信的技術(shù)。

1.2.Ajax的核心對象---XMLHttpRequest
  因為IE5是最先引入這個XHR對象的，當時并沒有事實上的標準。在IE中有三種不同的XHR對象版本：MSXML2.XMLHttp,MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0;

根據(jù)這三種版本號，在IE中創(chuàng)建一個XHR對象如下：

function createXHR() { //IE7之前的版本通過這種方式
  var versions = [
    'MSXML2.XMLHttp',
    'MSXML2.XMLHttp.3.0',
    'MSXML2.XMLHttp.6.0'
  ];
  var xhr = null;
  for (var item in versions) {
    try {
      xhr = new ActiveXObject(item); //若不存在該版本，可能會出錯
      if (xhr) break;
    } catch (e) {
      //一般對這種錯誤不做處理
    }
  }
  return xhr;
}
在IE引入這個對象之后，其他瀏覽器廠商也相繼跟隨，這時候XHR對象成為事實上的標準！

跨瀏覽器創(chuàng)建XHR對象;

function createXHttpRequest() {
  if (typeof XMLHttpRequest !== 'undefined') { //不要用 if(XMLHttpRequest){}這種形式，
    return new XMLHttpRequest();              //如果是這種形式在找不到XMLHttpRequest函數(shù)的情況下，會報錯。
} else if (typeof ActiveXObject !== 'undefined') {
         return createXHR(); //用到剛才我們創(chuàng)建的函數(shù)
  } else { throw new Error('不能創(chuàng)建XMLHttpRequest對象'); } }

1.2.XMLHttpRequest的用法
XMLHttpRequest對象的函數(shù)有6個：

open("method",url,boolean);
              //該方法的三個參數(shù),分別為----提交方式"get"或者"post"等 
　　　　　　　　　　　　　　　 //&& url是相對于執(zhí)行代碼的當前頁面的路徑（使用絕對路徑是允許的）&&是否異步 
send();    
           //這個方法接收一個參數(shù)，這個參數(shù)是作為請求主體發(fā)送的數(shù)據(jù), 
           //說明： 如果有參數(shù)，請使用post方式提交 使用方式如下，send("user="+username+"&pwd="+password);
           //如果沒有參數(shù)，為了兼容性考慮，必須在參數(shù)中傳入null,即send(null)；該方式使用get方式提交

abort();       //取消當前響應，關閉連接并且結(jié)束任何未決的網(wǎng)絡活動。

          //這個方法把 XMLHttpRequest 對象重置為 readyState 為 0 的狀態(tài)，并且取消所有未決             //的網(wǎng)絡活動。例如，如果請求用了太長時間，而且響應不再必要的時候，可以調(diào)用這個方法。

getResponseHeader()   

          //返回指定的 HTTP 響應頭部的值。其參數(shù)是要返回的 HTTP 響應頭部的名稱?？梢允褂萌?nbsp;            //何大小寫來制定這個頭部名字，和響應頭部的比較是不區(qū)分大小寫的。

          //該方法的返回值是指定的 HTTP 響應頭部的值，如果沒有接收到這個頭部或者 readyStat             //e 小于 3 則為空字符串。如果接收到多個有指定名稱的頭部，這個頭部的值被連接起來并             //返回，使用逗號和空格分隔開各個頭部的值。

getAllResponseHeaders()       

          //把 HTTP 響應頭部作為未解析的字符串返回。

          //如果 readyState 小于 3，這個方法返回 null。否則，它返回服務器發(fā)送的所有 HTTP 響應的

          //頭部。頭部作為單個的字符串返回，一行一個頭部。每行用換行符 "\r\n" 隔開。

setRequestHeader()

         //向一個打開但未發(fā)送的請求設置或添加一個 HTTP 請求。

  XMLHttpRequest對象的屬性有5個：

屬性 描述
responseText 作為響應主題被返回的文本
responseXML 如果相響應的是text/html或者application/xml類型的話，這個屬性將保存著響應的XML文檔
status http的響應狀態(tài)碼
statusText http狀態(tài)的說明
readyState XMLHttpRequest對象的狀態(tài)位 0 1 2 3 4 分別表示5種狀態(tài)
timeout 設置超時時間,單位是ms.目前只有IE8+支持---尚未標準化(不推薦使用)

  XMLHttpRequest對象的事件屬性onReadyStateChange：-----所有瀏覽器兼容

  該屬性監(jiān)聽的是  XMLHttpRequest對象的readyState屬性的變化：

  readyState的變化分別對應如下狀態(tài)：

  0：尚未初始化。未調(diào)用open()之前

  1：啟動。調(diào)用open()之后，但是未調(diào)用send();

  2：發(fā)送。調(diào)用send()但是尚未得到響應。

  3：正在接收數(shù)據(jù)。剛接收到響應數(shù)據(jù)開始到接收完成之前。

  4： 完成。數(shù)據(jù)接收完成。

xhr.onreadystatechange = function () {
 if (xhr.readyState == 4) {
  if (xhr.status >= 200 && xhr.status <== 300 || xhr.status == 304) {
   alert(xhr.responseText);
   //處理接收的數(shù)據(jù)
  } else {
   //請求失敗，未得到響應數(shù)據(jù)
  }
 }
}; //補充說明：注冊事件必須發(fā)生在send()以前

XMLHttpRequest對象的事件屬性ontimeout -----僅限IE8+,不過最新的主流高版本瀏覽器也已經(jīng)實現(xiàn)（不推薦使用）

xhr.timeout=1000;//一秒鐘

xhr.ontimeout=functon(){
  //處理代碼
  ......
}
  這種使用方式有個問題需要注意，就是在超時之后，在接收到數(shù)據(jù)后仍然會觸發(fā)onreadystatechange事件，如果在處理onreadychange事件時訪問xhr.status屬性，會出錯。所以我們在訪問該屬性時需要做一下try{}catch處理。但是，因為這個屬性暫不兼容，所有我們就不重點講了。

XMLHttpRequest對象的事件屬性onload onerror onloadstar onbort onprogress：

                                                                                                   -----非IE瀏覽器和IE 10+已實現(xiàn)

       onload在IE8以上可以實現(xiàn)，大部分事件根據(jù)readySate變化均可以實現(xiàn)，以上事件只不過是方便使用而已。

  onload和onprogress 這兩種事件分別對應著readyState=4和readyState=3的情況，使用方式分別如下：

   xhr.onload= function (event) {
      //event只包含一個屬性 event.target=xhr;使用方式只是在readyState=4時差不多..
    }
   xhr.onprogress=function(event){
     //event除了包含event.target=xhr之外，還包含三種屬性
     //lengthComputale(進度信息是否可用)，position（已接受字節(jié)數(shù)）和totalSize(總字節(jié)數(shù)).
     
   }

補充：有些事件均可以根據(jù)readyState的狀態(tài)進行模擬。只有有的瀏覽器進行了方便化處理而已。  

3.單向跨域技術(shù) ---CORS
 今天我們這里講的是客戶端網(wǎng)頁向不在同一個域的服務器請求數(shù)據(jù)..客戶端在收到返回的數(shù)據(jù)時時,用回調(diào)函數(shù)處理數(shù)據(jù)。

即：

 1. 客戶端向域外服務器請求數(shù)據(jù)

 2.服務器得到響應后向客戶端發(fā)送數(shù)據(jù)。

 3.客戶端根據(jù)返回的數(shù)據(jù)執(zhí)行回調(diào)函數(shù).

 我知道不同域下的iframe也可以進行通信，而且這也是一種跨域通信技術(shù)。但是，這種iframe頁面之間的雙向通信，我們在下一個專題里面講解，今天主要講的是單向通信。

3.1.CORS跨域請求的原理
在用xhr（XMLHttpRequest）對象或者xdr(XDomainRequest)對象，發(fā)送域外請求時，大概的實現(xiàn)原理如下圖：

 3.2.IE中CORS技術(shù)的實現(xiàn)
 IE8引入了一個XDR類型，這個類型與XHR基本類似，但是其能實現(xiàn)安全可靠地跨域通信。

 XHD的特點：

 1.cookie不會隨請求發(fā)送，也不會隨響應返回。

 2.只能設置請求頭部中的Content-Type片段。

 3.不能訪問響應頭部信息。

 4.只是支持get和post請求。

 XDR支持onload和onerror事件屬性，且其使用方式和XHR基本一致，不過其open()只接收兩個參數(shù)，默認是異步的。

var xdr = new XDomainRequest();
xdr.onload = function () {
 //處理xdr.responseText
}
xdr.onerror = function () {
};
xdr.open('get', '絕對url');
xhr.send(null);

3.3.跨瀏覽器的CORS技術(shù)實現(xiàn)

在標準瀏覽器中XHR對象就已經(jīng)可以自動實現(xiàn)跨域請求，但是XHR和XDR的不同之處：

1.XHR可以在設置 withCredentials =true時，瀏覽器會把cookie發(fā)送給服務器，服務器此時通過設置頭部Access-Control-Allow-Credentials:true時來響應。如果，服務器不設置這個屬性，則瀏覽器會觸發(fā)onerror事件。

2.在回調(diào)函數(shù)中可以訪問status和statusText屬性，而且支持同步請求。

 以下是實現(xiàn)跨域請求的代碼：

function createCrosRequest(method, url) {
 var xhr = new XMLHttpRequest(); //IE7+
 if ('withCredentials' in xhr) { //IE8-IE9瀏覽器沒有這個屬性
  xhr.open(method, url, true);
 } else if (typeof XDomainRequest != 'undefined') {
  xhr = new XDomainRequest();  //IE
  xhr.open(method, url)
 }
 return xhr;
}
var request=CreateCrosRequest("get","url");
if(request){
 request.onload=function(){
 //處理request.responseText;
 }
 request.send(null);
}

4.單向跨域技術(shù) ---JSONP技術(shù)

 JSONP技術(shù)比較簡單，其主要原理主要是利用script標簽的特性。

 script標簽和image標簽一樣，它們都具有src屬性，而且這個屬性是可跨域的。

因為script標簽返回的都是js代碼，且該js代碼會自動執(zhí)行。所以，如果我們請求返回的數(shù)據(jù)也是類似一段js代碼的形式，豈不是就可以實現(xiàn)在腳本加載完畢后自動執(zhí)行。

如果我們的請求，返回的數(shù)據(jù)是 callback + '(' + json + ')'; 這種形式的數(shù)據(jù), 那么在腳本加載完畢之后也就能自動執(zhí)行callback()函數(shù)了.

4.1.客戶端寫法

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
    <button id="button">請求數(shù)據(jù)</button>
</body>
<script>
  window.onload=function(){
    var button=document.getElementById("ibutton");
    function callback(data){
      //處理data
    }
    button.onclick=function(){
      var script=document.createElement("script");
      script="http://www.sasd.com/json/?callbak=callback"; 
      document.body.insertBefore(script,document.body.firstChild);//加載腳本
      
    }
    
  }
</script>
</html>

   1.客戶端將回調(diào)函數(shù)名寫入<Script>腳本的url參數(shù)中。

   2.script加載的時候會發(fā)送跨域請求。

4.2.服務器端

 1.通過url得到函數(shù)名，命名為callback

 2.將請求的數(shù)據(jù)作為函數(shù)的參數(shù)格式轉(zhuǎn)化json格式，命名為。

 3.將返回結(jié)果拼接為 callback+"("+json+")"; --------返回的就是填充式的數(shù)據(jù)，這段數(shù)據(jù)在腳本中會自動執(zhí)行。

 4.返回數(shù)據(jù).

 4.3.JSONP技術(shù)的缺點

 1.因為是通過url傳參數(shù)，所以請求只能是get類型的。

 2.<script>目前只有onload屬性事件，onerror還沒有統(tǒng)一化，如果加載腳本出錯，客戶端很難得到反饋。

 3.所請求數(shù)據(jù)的站點必須是可信任的，如果返回的數(shù)據(jù)段中注入的有惡意的代碼，危害較大，且難以發(fā)現(xiàn)。

到此，相信大家對“AJAX的簡介以及跨域通信的實現(xiàn)”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！