用jquery实现ajax跨域请求_ jsonp

浏览数：54 / 时间：2015年06月09日

用jquery实现ajax跨域请求

示例1：

业务需求：

一台独立的新闻服务器（A），对外提供新闻。客户（B）网页引入A的js，即可请求新闻。 B请求新闻所产生的页面有A的js生成。

A提供<script type="text/javascript" src="http://newsdomain/js/news.js" > </script> 来让B 引入。

一般的ajax无法跨域请求，jquery的 $.ajax 也是如此。均提示访问被拒绝。这是由于浏览器对javascript的安全机制造成的。

请求时服务器可以得到响应并生成数据，但无法跨域返回给B。

Jquery的jsonp可以实现跨域请求和响应。

function requestNews(page,key,from,to,sort,language){
 $.getJSON("http://"+domain+"/requestNews/getNews?mehtod=splitPage&page="+page+"&key="+k+"&from="+from+"&to="+to+"&sort="+sort+"&language="+language+"&jsonpcallback=?"
      ,null
      ,function call(json){ 
            alert(json.info);
        }); 
}

大家有发现这个url有些特别http://******?参数=值jsonpcallback=? 。这种写法是jsonp的写法。

jquery就是通过jsonpcallback=? 这个参数找到回调函数function call(json) 的。所以请求中必须加jsonpcallback=?。

在服务器端会接收jsonpcallback这个值。jquery会把那个？做处理，jsonpcallback=jsonp1287199309053。

$.getJSON这个函数的的参数写法你可以去查一下。

$.getJSON（地址，数据，回调函数）由于我的数据已经与url合并，所以我的第二个参数为null，不写也可。

下面说服务器端对请求的数据如何处理和返回。重点只有两个。

1，json数据格式。2，为了让回调函数可以接受返回值，其写法特被。

第一json数据格式{name：value}.详细的自己去查。

第二。服务端一定要接收

jsonpcallback=? 1 2 3 String callBack = req.getParameter("jsonpcallback"); String  strJson = {"info":"aaaa"}; String result = callBack (strJson);
// 这里很重要。 打印出来的结果就是 jsonp1287199543662({"info":"aaaa"})
 //这里要看清楚。

重点讲完了，

最后一点就是返回 1 2 3 4 5 resp.setContentType("application/json;charset=UTF-8");

//这里的格式是json resp.setHeader("Cache-Control","no-cache"); PrintWriter out = resp.getWriter(); out.print(callBack);

// 这是是print 不是write。 out.close(); 这样就实现了ajax跨域访问。很多事情做出来的时候再回想感觉特简单.

示例2：

在一个不支持PHP的主机上，需要对某些页面做访问统计。方案是在静态的HTML页面上，用JSONP向能够执行PHP的主机进行跨域请求，从而使用PHP解决这个访问量统计问题。

在服务器端，PHP页面返回的JSONP格式应该是这样的：

<?php
    echo $_GET["callback"].‘
    (
    {
        title: "The Principles of Beautiful Web Design, 2nd Edition",
        url: "http://www.sitepoint.com/books/design2/",
        author: "Jason Beaird",
        publisher: "SitePoint",
        price: {
            currency: "USD",
            amount: 39.95
         }
    }
    );
    ‘
?>

//而静态HTML发起请求的代码可以参考下面：

<script language="javascript" src="http://www.nowamagic.net/zt/access_count/js/jquery-1.4.2.min.js"></script>
<script language="javascript" src="http://www.nowamagic.net/zt/access_count/js/jquery.jsonp-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    insert_vote();
})

function insert_vote(){
    var j = null;
    $.ajax({
        type:‘get‘,
        url:‘http://www.nowamagic.net/zt/access_count/jsonp.php‘,
        dataType:‘jsonp‘,
        jsonp:"callback",
        data:{"a":"insert", "type":"aa", "time":"bb", "id":"dd", "allowVote":"cc"},
        async: false,
        success:function(data){ 
            j = data; 
            //alert("1");
            alert(j.title);
        }
    })    
}
    
function init(){
    $.ajax({
          dataType: ‘jsonp‘,
          data: ‘id=10‘,
          jsonp: ‘jsonp_callback‘,
          url: ‘http://www.nowamagic.net/zt/access_count/jsonp.php‘,
          success: function () 
        {
            // do stuff
            alert(jsonp.respond);
          },
    });
}

function init2(){
    $.ajax({    
        async:false,    
         url: ‘http://www.nowamagic.net/zt/access_count/jsonp.php‘,  // 跨域URL   
        type: ‘GET‘,    
         dataType: ‘jsonp‘,    
        jsonp: ‘jsoncallback‘, //默认callback   
        data: ‘id=10‘, //请求数据   
         timeout: 5000,    
           beforeSend: function(){  
            //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了   
         },   
        success: function(json) { 
            //客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数
            alert(json.respond.title);    
             if(json.actionErrors.length!=0)
            {    
                alert(json.actionErrors);    
               }    
        },    
        complete: function(XMLHttpRequest, textStatus){    
                 
        },    
        error: function(xhr){    
               //jsonp 方式此方法不被触发   
               //请求出错处理    
            alert("请求出错(请检查相关度网络状况.)");    
        }    
    });  
}
</script>

通用方法：

// 初始化数据，同一个cookie一分钟的访问量都算一次
function init_count(pageType, id){
    var j = null;
    $.ajax({  
           type: "get",        //使用get方法访问后台  
           dataType: "jsonp",    //返回json格式的数据  
        jsonp:"callback",
           url: "http://app2.zhnews.net/zt/access_count/manage.php",    //要访问的后台地址  
        data:{"opp":"main", "pageType":pageType, "id":id},
        async: false,
           success: function(data){  
               //alert(data.total);
            //$(‘#pc_1‘).html(msg.total);
            $.each(data, function(i, v){
                var tmp = v.record.split(":");
                var month_view = tmp[tmp.length - 1];
                $("label[id=pc_"+v.page_id+"]").html(v.total);
                $("label[id=pcm_"+v.page_id+"]").html(v.week);
            })    
           }  
       })  
}

大概就这样，使用起来也是很简单的。

下面再介绍PHP常用的方法，将数组转换为JSONP格式的输出：

function arrayRecursive(&$array, $function, $apply_to_keys_also = false)
{
    static $recursive_counter = 0;
    if (++$recursive_counter > 1000) {
        die(‘possible deep recursion attack‘);
    }
    foreach ($array as $key => $value) {
        if (is_array($value)) {
            arrayRecursive($array[$key], $function, $apply_to_keys_also);
        } else {
            $array[$key] = $function($value);
        }
 
        if ($apply_to_keys_also && is_string($key)) {
            $new_key = $function($key);
            if ($new_key != $key) {
                $array[$new_key] = $array[$key];
                unset($array[$key]);
            }
        }
    }
    $recursive_counter--;
}

function JSON($array) {
    arrayRecursive($array, ‘urlencode‘, true);
    $json = json_encode($array);
    return urldecode($json);
}

    $array = array
    (
        ‘total‘ => $total,
           ‘current‘ => $current
      );
    
    echo $_GET["callback"].‘(‘.JSON($array).‘)‘;

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

用jquery实现ajax跨域请求_ jsonp