跨站数据请求哪家强——青出于蓝的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。