jquery 跨域請求數據問題

昨天參加了一個前端的面試，被問到一個跨域請求數據問題，咱們以前一直用的是apicloud的api進行請求的，跨域是被apicloud封裝起來的，也就沒有注意跨域請求數據的問題。當被問到用jquery跨域請求數據時，我腦中一片空白，因此面試不順利，也沒有經過，今天我差了些資料，看了些文章，解決的jquery跨域請求數據，總接以下：

1、關於ajax跨域的思考

　　一、Ajax爲何不能跨域？究竟是卡在哪一個環節了？(下面項目中具體說，這裏先說下結論)。 Ajax其實就是向服務器發送一個GET或POST請求，而後取得服務器響應結果，返回客戶端。理論上這是沒有任何問題的，然而普通ajax跨域請求，在服務器端不會有任何問題，只是服務端響應數據返回給瀏覽器的時候，瀏覽器根據響應頭的Access-Control-Allow-Origin字段的值來判斷是否有權限獲取數據，通常狀況下，服務器端若是沒有在這個字段作特殊處理的話，跨域是沒有權限訪問的，因此響應數據被瀏覽器給攔截了，因此在ajax回調函數裏是獲取不到數據的(來自園友補充)。因此如今ajax跨域的問題能夠轉化爲數據怎麼拿回客戶端的問題。

　　二、既然不能直接訪問第三方站點，咱們能夠在服務器上面作代理，經過ajax向代理髮送請求，代理得到數據後在返回給客戶端，固然這是一種解決辦法，可是一次請求要從客戶端通過代理到第三方站點，而後再原路返回，響應速度是個問題。

　　三、咱們發現咱們能夠將一些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這是傳遞過去的參數 。