ajax重新認識：(3)ajax跨域

一、概念

一個域名地址的組成：

http://  www   ·  abc.com  :   8080    /    scripts/jquery.js

協議      子域名        主域名        端口號        請求資源地址

當協議、子域名、主域名、端口號中任意一個不相同時，都算作不同域。

不同域之間相互請求資源，就算跨域

比如：http://www.abc.com/index.html 請求 http://www.efg.com/service.php

javaScript出於安全方面的考慮，不允許跨域調用其他頁面的對象。什麼是跨域呢，簡單的理解就是因爲JavaScript同源策略的限制，

a.com域名下的js無法操作b.com或是c.a.com域名下的對象

二、解決方法

① 代理

當一個域需要訪問另一個域下的數據的時候，這時候會在後臺將另一個域中的數據取到，然後再前端依舊可以使用同域的方式訪問數據，即相當於訪問的就是代理服務器上的數據

② JSONP

解決主流瀏覽器中的get跨域問題,不支持post請求

$.ajax({
    url : 'http://127.0.0.1:8080/service.php',
    type : 'GET',
    <span style="color:#ff0000;">dataType : 'jsonp',</span>
    <span style="color:#ff0000;">jsonp : 'callback',// 這裏的名字任意取</span>
    success : function(data) {
           // do something
    }
});

在後臺需要獲取callback的值

$jsonp = $_GET['callback'];

// 返回的數據格式

$result = $jsonp.'{"success":false,"msg":"返回成功"}';

注：ajax存在跨域請求問題，但是js腳本不存在跨域問題

③ XHR2

HTML5提供的XMLHttpRequest Level2已經實現了跨域訪問以及其他的一些新功能

IE10以下的版本都不支持

在服務器端做一些小小的改造即可：

header('Access-Control-Allow-Origin:*');

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

另外XHR2也帶有更多高級功能，例如progress進度，文件上傳，獲取二進制數據等。詳見 https://dev.opera.com/articles/xhr2/

XDR (IE 8-9 Only)

對於XHR2，IE瀏覽器的支持是IE10以上。但是IE早在IE8時就推出了 XDomainRequest 對象進行跨域操作，一直沿用到IE10才被取代掉。因此在IE8,IE9中應該使用 XDomainRequest (XDR)來實現。

XDR在創建時是通過 new XDomainRequest() 進行創建。其他操作和XHR有細微差別。比如open方法只有method和url兩個參數，XDR只支持異步不支持同步操作。詳細見文檔 XDomainRequest object

1. var xdr = new XDomainRequest();
2. xdr.open("get", "http://www.example.com");
3. xdr.onload = function() {    //success(xdr.responseText);}
4. xdr.send();

另外使用XDR時也需要服務器端設置上面提到的 Access-Control-Allow-Origin 頭信息。