ajax跨域请求

￡神魔★判官ぃ 2023-10-04 13:08 18阅读 0赞

在Ajax应用中，jQuery的Ajax请求是非常容易而且方便的，但是初学者经常会犯一个错误，那就是Ajax请求的url不是本地或者同一个服务器下面的URI，最后导致虽然请求200，但是不会返回任何数据，事实上简单来说请求同一个域名下的url或者说用不带http的绝对路径和相对路径请求是没有任何问题的，如果请求外部资源，那么这就称为跨域请求。

由于安全性的问题，浏览器默认不支持跨域调用，晚上也有很多方法，各有优缺点，但是有一个比较好的解决方法这也是jQuery1.2之后官方推荐的，那就是在客户端和服务端同时加参数，这样双方都是信任的那么浏览器就不会阻止了，举个例子：

先看客户端代码：

$.getJSON("http://domain/home/join/test?jsoncallback=?",{
        "from":$("#homecity_name").val(),"to":$("#getcity_name").val(),"time":$("#time").val()},function(result){
        
                     if(result == "pass"){
        
                         //具体操作
                         return true;
                     }
      });

不必关心参数和回调等细节，主要看请求的URI中，多了个参数jsoncallback=?，就这么简单，其他完全不变

然后看服务端：

public function test(){
        
             $ajax = I('get.jsoncallback');
             echo $ajax."('pass')";
         }

其他的逻辑也不用考虑，主要看先通过get获取jsoncallback参数的值，然后返回jsoncallback值开头的json数据格式，而这个jsoncallback参数的值是变化的，最终正好的服务端返回的一致，所以最终获得回调数据，这里只是简单的例子，实际上返回值还可以写成：$ajax."(‘name’:‘value’…)";这种格式

那么请求地址是：http://domain/home/join/test?jsoncallback=jQuery111107590998236555606\_1445756963910&from=%E4%B8%8A%E6%B5%B7&to=%E5%B9%BF%E5%B7%9E&time=2015-10-25&\_=1445756963911

这里的参数是：jsoncallback=jQuery111107590998236555606\_1445756963910

那么回调结果就是：jQuery111107590998236555606\_1445756963910(‘pass’)

现在原理就清楚了吧，实际上我们并不需要关心jsoncallback的值，我们使用返回值的方法还是不变，这只是浏览器和服务器之间的一种跨域交互方式

继续补充：如果是我们用底层的ajax方法请求后台json数据时，写法可以如下：

$.ajax({
        
        type:"get",    //请求方式
        async:true,    //是否异步
        url:"http://www.domain.net/url",
        dataType:"jsonp",    //跨域json请求一定是jsonp
        jsonp: "callbackparam",    //跨域请求的参数名，默认是callback
            //jsonpCallback:"successCallback",    //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串
        data:{
        "query":"civilnews"},    //请求参数
    
        beforeSend: function() {
        
            //请求前的处理
        },
    
        success: function(data) {
        
            //请求成功处理，和本地回调完全一样
        },
    
        complete: function() {
        
            //请求完成的处理
        },
    
        error: function() {
        
            //请求出错处理
        }
    });

这就是用ajax请求的具体方法，其他的使用都完全一样，服务端返回json数据要用小括号包围，例如本例用php可以这样写：

echo $_GET['callbackparam']."(".json_encode($result_array).")";

这样返回就行了，其余都一样

到这里，高层的get,getJSON和底层的ajax跨域请求，都能很容易的解决了