jQuery實現跨域請求

我們都知道，xhr(XMLHttpRequest)是不允許跨域的。而jQuery的ajax方法是基於xhr的，所以，直接使用它也是無法跨域的。一般的，我們是如下使用$.ajax方法的：

$.ajax({
　　type : "GET",
　　url : "the path of server",
　　dataType : "json",
　　success : function(res) {
   　　 //這里寫獲取相應數據的代碼
　　}
});

我們這樣調用的話，就是xhr請求。如果要實現跨域的話，就必須要使用動態腳本注入的技術。當然了，什么是動態腳本注入技術在這里我就不說了，有興趣的可以自己去搜一下。jQuery已經幫我們封裝好了jsonp的請求方法,我們直接調用它就行了，不必要知道他的底層是怎么實現的。jsonp請求的代碼如下，只需要把dataType: "json"改成dataType: "jsonp"就行了：

$.ajax({
　　type : "GET",
　　url : "http://zhangzhanyu.nfreehost.com/jsonp.php",
　　dataType : "jsonp",
　　success : function(json) {
　　　　alert(json.msg);
　　}
});

但是，直接這樣子還不行的，需要注意的是， 跨域是要前端和后端配合才可以完成的。我們上面只是完成了前端的部分。因此,我們請求的php文件的代碼要寫成如下格式：

<?php
    $callback = $_GET['callback' ];
    echo "{$callback}({'msg':'this is a jquery jsonp test message!'})";
?>

我們會發現，如果我們使用jsonp請求的話，會把一個名為callback的參數也傳過來了，我們后台需要獲取到這個參數值（事實他的值是一個函數名），然后再把需要返回到前端的數據放到這個callback里面當做參數就行了。

ps：由於做前端的本地不一定都有php環境，不方便測試。所以我把這個測試的php文件上傳到了服務器，地址是http://zhangzhanyu.nfreehost.com/jsonp.php。需要測試的，可以直接把ajax方法里的url設置成這個地址就行了。