Ajax 跨域難題 - 原生 JS 和 jQuery 的實現對比

• 講解順序：
  • AJAX 的概念及由來
  • JS 和 jQuery 中的 ajax
  • 瀏覽器機制
  • AJAX 跨域

AJAX 的概念

• 在講解 AJAX 的概念以前，我先提一個問題。

這是一個典型的 B/S 模式。

• PS. B/S結構（Browser/Server，瀏覽器/服務器模式），是WEB興起後的一種網絡結構模式，WEB瀏覽器是客戶端最主要的應用軟件。這種模式統一了客戶端，將系統功能實現的核心部分集中到服務器上，簡化了系統的開發、維護和使用。客戶機上只要安裝一個瀏覽器

• B/S 模式

  • 優勢：一個服務器能夠響應多個客戶端
  • 缺點：短連接（與 C/S 相反）
  • 特色：客戶端主動去請求（request），服務器端被迫去響應（response）這一點很重要
  • 好處：大大減小了服務器的資源
  • 結論：服務器永遠沒辦法主動告訴客戶端一些信息

在這張圖中，左側是菜單，很早以前的作法是點擊刷新按鈕會對整個頁面進行刷新，這樣作的弊端是什麼？如何不使用 AJAX 進行局部刷新？

• 弊端
  • I/O 網絡吞吐量過大
  • 網頁加載慢
  • 耗內存及 CPU
• 局部刷新
  • 很 low，可是隻有惟一的方法：iframe
  • 雖然是局部刷新，可是是局部總體刷新

那麼有什麼辦法能進行數據實時推送（例如股票價格）？

因而誕生了這幾個方法。

• 輪詢機制（依舊很佔服務器資源，low）
• 服務器推送（提一下，想了解的下次，不是此次要講的東西）

那麼，iframe 最大的缺點是什麼？

• 外面的 window 和 iframe 的 window 不是一個對象，也就是說，不在一個 DOM 樹中！這樣的話，外面內容和裏面內容交互起來特別繁瑣。
• AJAX 解決了這個問題。

瞭解 AJAX 以前先要了解一下先後端的交互過程。

你們慢慢看……

JS 和 jQuery 中的 ajax

• AJAX 全稱：即「Asynchronous JavaScript And XML」 （表明一種格式，好比：json、HTML、XML、text、jsonp等等）
• AJAX 的核心對象是 XMLHttpRequest 對象
• 查看方法（就是 network 裏的 XHR）
• IE7及其餘瀏覽器：XMLHttpRequest
• IE6及如下：ActiveXObject

// 簡單的ajax請求
var xhr = new XMLHttpRequest();// 建立
xhr.onreadystatechange = function() {// onreadystatechange 不是檢測方法，而是狀態改變後更新的狀態
    if (xhr.status == 200) {
        /* 普及一下經常使用的狀態碼 200：ok，服務器成功返回數據 400：Bad Request，語法錯誤 401：請求須要認證 404：not found，找不到頁面 500：服務器遇到意外錯誤 503：服務器正在維護或者過載沒法完成請求 其餘百度去 */
        if (xhr.readyState == 4) {
        /* xhr.readyState 是 ajax 狀態 普及一下這個4是什麼意思： 0：建立服務 1：打開服務 2：發送服務 3：服務器響應 4：加載成功 */
            var data = JSON.parse(xhr.responseText);// responseText 是返回的文本或對象
        }
    } else {
        // 若是不是正常返回
        console.log("數據返回失敗！狀態碼" + xhr.status + "狀態信息：" + xhr.statusText)
        // xhr.statusText是瀏覽器的錯誤信息，由於跨瀏覽器的時候，可能不太一致，不建議直接使用它
    }
}
xhr.open("post", "list.json?rand="+new Date(), true);// 打開，最後一個 bool 表明是否異步，這一步僅僅只配置了 ajax 的基本信息，而並無對服務器請求
// rand=new Date()是爲了讓每一次請求 url 都不一樣，用來區分緩存
xhr.setRequestHeader("Content-Type","application/www-x-form-urlencoded");
xhr.send(null);// 向服務器發送請求
複製代碼

jQuery 的 ajax 實際上就是封裝了上面的代碼

$.ajax({
    type:"get",
    dataType: "json",
    url: url,
    async: true,
    success: function(){},
    error: function(){}
})


下面用 chrome 和 Firefox 來演示跨域問題。

複製代碼

瀏覽器機制

• 用 原生 AJAX 進行跨域請求，會發現報錯了，仔細分析錯誤
• 獲得結論：AJAX 自己是能夠跨域的，可是瀏覽器的同源策略機制，限制了 XMLHttpRequest 請求，致使沒法跨域，因此 AJAX 在瀏覽器中跨域是一個僞命題，而 AJAX 不是沒法跨域的主謀。
• 如下幾種狀況會被瀏覽器視爲不安全，而直接進行攔截
• 同源規則：同域名、端口、協議（只針對 XMLHttpRequest）
• www.a.com 和 a.com實際是配置的兩個域名

編號	url	說明	是否容許通訊
1	http://www.a.com/a.js http://www.a.com/b.js	同一域名下	容許
2	http://www.a.com/a/a.js http://www.a.com/b/b.js	同一域名不一樣文件夾	容許
3	http://www.a.com:8080/a.js http://www.a.com:9090/a.js	同一域名不一樣端口號	不容許
4	http://www.a.com/a.js https://www.a.com/b.js	同一域名不一樣協議	不容許
5	http://www.a.com/a.js http://192.168.4.158/b.js	域名與域名對應的ip地址	不容許
6	http://www.a.com/a.js http://github.a.com/b.js	主域名相同，子域名不一樣	不容許
7	http://www.a.com/a.js http://a.com/b.js	同一域名，不一樣二級域名（同上）	不容許（cookie這種狀況下也不容許訪問）
8	http://www.a.com/a.js http://www.b.com/b.js	不一樣域名	不容許

AJAX 跨域

1. 代理
   • 向服務器發送對應的 url，服務器在後臺作了一個代理，前端只須要訪問A的服務器也就至關與訪問了B的服務器，好比在A（www.a.com/sever.php）和B（www.b.com/sever.php）各有一個服務器，A的後端（www.a.com/sever.php）直接訪問B的服務，而後把獲取的響應值返回給前端。這種代理屬於後臺的技術，因此不展開敘述。
2. JSONP
   • 說白了就是利用同源策略的漏洞，利用建立標籤的形式進行加載。

• JS 中的實現

//建立一個script元素

var  Scr = document.reateElement('script');

//聲明類型

Scr.type='text/javascript';

//添加src屬性，引入跨域訪問的url

Scr.src=url;

//在頁面中添加新建立的script元素

document.getElementsByTagName('body')[0].appendChild(Scr)
複製代碼

• jQuery 中的實現：

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.js', //不一樣的域
    type: 'GET', // jsonp模式只有GET是合法的
    data: {
        'action': 'aaron'
    }, // 預傳參的數組
    dataType: 'jsonp', // 數據類型
    jsonp: 'backfunc', // 指定回調函數名，與服務器端接收的一致，並回傳回來
})
複製代碼

整個流程就是：

客戶端發送一個請求，規定一個可執行的函數名（這裏就是jQuery作了封裝的處理，自動幫你生成回調函數並把數據取出來供success屬性方法來調用,不是傳遞的一個回調句柄），服務端接受了這個backfunc函數名，而後把數據經過實參的形式發送出去

其實就是jquery內部會轉化成http://192.168.1.114/yii/demos/test.js?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron 而後動態加載 <script type="text/javascript" src="http://192.168.1.114/yii/demos/test.js?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron"></script>

3. XHR2

   • 「XHR2」 全稱 「XMLHttpRequest Level2」 是HTML5提供的方法，對跨域訪問提供了很好的支持，而且還有一些新的功能。

   • IE10如下的版本都不支持

   • 只須要在服務器端頭部加上下面兩句代碼：

   • header( "Access-Control-Allow-Origin:*" );

   • header( "Access-Control-Allow-Methods:POST,GET" );