昨天參加了一個前端的面試，被問到一個跨域請求數據問題，我們之前一直用的是apicloud的api進行請求的，跨域是被apicloud封裝起來的，也就沒有注意跨域請求數據的問題。當被問到用jquery跨域請求數據時，我腦中一片空白，所以面試不順利，也沒有通過，今天我差了些資料，看了些文章，解決的jquery跨域請求數據，總接如下：
一、關於ajax跨域的思考
1、Ajax為什么不能跨域？到底是卡在哪個環節了？(下面項目中具體說，這里先說下結論)。 Ajax其實就是向服務器發送一個GET或POST請求，然后取得服務器響應結果，返回客戶端。理論上這是沒有任何問題的，然而普通ajax跨域請求，在服務器端不會有任何問題，只是服務端響應數據返回給瀏覽器的時候，瀏覽器根據響應頭的Access-Control-Allow-Origin字段的值來判斷是否有權限獲取數據，一般情況下，服務器端如果沒有在這個字段做特殊處理的話，跨域是沒有權限訪問的，所以響應數據被瀏覽器給攔截了，所以在ajax回調函數里是獲取不到數據的(來自園友補充)。所以現在ajax跨域的問題可以轉化為數據怎么拿回客戶端的問題。
2、既然不能直接訪問第三方站點，我們可以在服務器上面做代理，通過ajax向代理發送請求，代理獲得數據后在返回給客戶端，當然這是一種解決辦法，但是一次請求要從客戶端經過代理到第三方站點，然后再原路返回，響應速度是個問題。
3、我們發現我們可以將一些js、css等文件放在第三方的服務器上面，如CDN等來加快網頁的打開速度，這樣是沒有任何問題的，也就是說web頁面可以加載放在任意站點的js、css、圖片等資源，不會受到"跨域"的影響。這個時候，我們會想到：既然我們可以調用第三方站點的js,那么如果我們將數據放到第三方站點的js中不就可以將數據帶到客戶端了嗎？
二，現在總結出兩種方法進行跨域請求：
①用jquery 的$.getJSON進行跨域請求是可以的，后台只要返回一個json格式的數據就可以了
$.getJSON("http://micro.customer.virtuesoft.cn/home/Paged?pageIndex=1&pageSize=1",function(json){
alert(JSON.stringify(json))
});
注：http://micro.customer.virtuesoft.cn/home/Paged?pageIndex=1&pageSize=1是請求數據的地址，？后面跟的就是傳遞后台的參數，然后返回的是一個json對象
②jsonp方法請求數據
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域數據訪問的問題。其核心思想是利用JS標簽里面的跨域特性進行跨域數據訪問，在JS標簽里面存在的是一個跨域的URL，實際執行的時候通過這個URL獲得一段字符串，這段返回的字符串必須是一個合法的JS調用，通過EVAL這個字符串來完成對獲得的數據的處理。
JSONP是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。
如果只是簡單的這樣寫：
$.ajax({
type:"get",
url:"http://www.abc.com/json.php",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"success_jsonpCallback",
success:function(json){
$(".user").html("用戶信息："+json.username+","+json.age+","+json.gender);
},
error:function(){
alert("請求出錯！");
}
});
后台數據為：
<?php
$arr = array ('username'=>'jack','age'=>21,'gender'=>'male');
echo json_encode($arr);
?>
在瀏覽器會報錯，錯誤如下
其實這時數據已經拿到了，只是返回的數據格式不對，所以會報錯
json.php返回的數據確實是json類型的數據 {“username”:”jack”,”age”:21,”gender”:”male”} ，問題處在哪？
翻看了一下Jquery文檔發現jsonp:”callback”, jsonpCallback:”success_jsonpCallback”,傳遞這兩個參數是有原因的，jsonp的返回數據格式應該是: “客戶端傳遞的回調方法名稱(json數據)”，將php文件改為：
<?php
$arr = array ('username'=>'jack','age'=>21,'gender'=>'male');
echo $_GET['callback']."(".json_encode($arr).")";
?>
這樣就不會報錯了，如下
可以看到，php文件返回的結果是 success_jsonpCallback({“username”:”jack”,”age”:21,”gender”:”male”}) ，這才是正確的jsonp返回格式，而 success_jsonpCallback這是傳遞過去的參數 。