跨站数据请求哪家强——后起之秀超过前辈的jsonp

/*
* 跨站数据请求哪家强——冰寒于水的jsonp数据格式
* @author gj
* @date 2017-09-15
*/

先哲有云“青,取之于蓝,而青于蓝;冰,水为之,而寒于水”大抵人们用那句来讲述一.0本子很牛逼二.0版本也不怂。本文所牵连的json与jsonp两者的涉嫌大致如此(仅限前端领域)。

采取背景

是因为产品的渴求要将四个类型的数据进行交互,即A站web页面要拿走B站的实时数据。当然做个数据接收发送接口文件也可以,但思虑到品种的独立性与维护资金控制恐怕在此以前端技术来拍卖此须要。前端数据交互的格式就那两种,在那之中json格式以轻柔的外观,优异的包容性为顺序猿们所喜闻乐见。但av八d都了然Ajax直接呼吁站外数据、文件存在跨域的走访的标题,那就狼狈了。此诚危急存亡之秋也!然忽闻一声炮响,5阵中金鼓乱鸣,旌旗齐展,一位少年纵骑奔出,人似虎,马如龙,就是Jsonp!!!

What is the jsonp?

以下内容来自百度完善(^_^)。

JSONP(JSONwithPadding)是JSON的1种“使用形式”,可用以缓解主流浏览器的跨域数据访问的题材。由于同源策略,一般的话位于server一.example.com的网页不大概与不是server一.example.com的服务器调换,而HTML的<script>元素是三个分歧。利用<script>成分的这几个开放政策,网页能够博得从任何来源动态产生的JSON资料,而那种使用形式正是所谓的JSONP。用JSONP抓到的材质并不是JSON,而是无度的JavaScript,用JavaScript直译器执行而不是用JSON解析器解析。

How to use the jsonp?

此带码段以jQueryo为背景框架:

jQuery.ajax({
    url:"http://xxx.com/index.php?app=wap&mod=Live&act=LiverListAll",
    type:"GET",
    dataType:"jsonp",//注意这里有个p!!
    jsonp:"jsoncallback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名
    success:function(result){
        if(result.live_status == 1){
            var live_str;
            for(i in result.live_list){
                 alert(result.live_list[i].title) ;
                //alert(result.live_list[i].title);
            }

        }                 
    },
    error:function(){
   }
})

服务端再次回到数据也要开始展览局地改观,那里以PHP 语言为例:

echo $_GET['jsoncallback'] . "(".json_encode($return_data).")";//此用的$_GET['jsoncallback'] 与上面前端代码中的jsonp:"jsoncallback"相对应。

大效益告成,如此就可以形成前端数据的跨域传输难点。

PS:

其实jsonp从严苛意义上来说并不属于1种多少格式,上面代码中的dataType:”jsonp”令人觉着那是专属于ajax的壹种多少格式,其实不然,只是jquery框架把jsonp扩大到了ajax的有关处理逻辑中了。jsonp的主导是动态生成<script>标签来提供数据源,因为script标签是不设有跨域难点的。而ajax的法则XMLHttpRequest。

 

相关文章