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这是传递过去的参数 。