跨站数据请求哪家强——青出于蓝底jsonp

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

先哲有出口“青,取之为蓝,而青于蓝;冰,水吗底,而寒于水”大抵人们因此当下句来叙述1.0版本很牛逼2.0本子也非怂。本文所牵连的json与jsonp两者的涉约如此(仅限前端领域)。

使背景

鉴于产品之求而将少单门类之多少开展互,即A站web页面要博取B站的实时数据。当然做个数据接收发送接口文件为堪,但考虑到品种之独立性与保障本控制还是以前端技术来处理这个要求。前端数据交互的格式就那几种植,其中json格式以轻柔的外观,优秀的兼容性为序猿们所喜闻乐见。但av8d都知道Ajax直接呼吁站外数据、文件是跨域的拜访的题目,这即尴尬了。此诚危急存亡之秋也!然忽闻一声炮响,五阵中金鼓乱鸣,旌旗齐展,一各少年纵骑奔出,人似乎虎,马如龙,正是Jsonp!!!

What is the jsonp?

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

JSONP(JSONwithPadding)是JSON的同种“使用模式”,可用来解决主流浏览器的跨域数据访问的题材。由于同源策略,一般的话在server1.example.com之网页无法同匪是server1.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从严格意义上吧并无属于同一栽多少格式,上面代码中的dataType:”jsonp”让人口看这是隶属于ajax的相同种多少格式,其实不然,只是jquery框架把jsonp扩展及了ajax的相关处理逻辑中了。jsonp的着力是动态生成<script>标签来提供数据源,因为script标签是休存在跨域问题之。而ajax的法则XMLHttpRequest。

 

相关文章