JavaScript跨域(2):JSONP跨域

简介:

  祭祖归来,继续细说跨域~

  话说上次我们讲到了啥玩意儿是跨域,至于怎么跨域还没开始动笔。今天就说说JSONP跨域。

  JSONP(JSON with padding)是JSON的一种“使用模式”,它是非官方协议允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

  P.S:

    1.楼主懂一点点php,所以DEMO中的后台语言就用PHP来演示。

    2.为了方便测试,楼主弄了SAE和BAE。

 

Prelude [前奏]

  如果我们请求一个JSON数据:(SAE地址:http://qianduannotes.sinaapp.com/test/testData_1.json

//一个简单的json数据
{
    "name" : "靖鸣君",
    "sex"    : "男",
    "hobby": "女"
}

  报个什么错,大家应该知道了吧~ 

Origin null is not allowed by Access-Control-Allow-Origin

  先解释下这个null是个什么东东。很多人在测试的时候是在没有诸如apache、IIS环境下运行的程序,也就是在本地运行,此时origin就是null,所有Access-Control-Allow-Origin这个东西不允许源null请求数据。当然如果你测试的时候在apache下运行,那这里的null就会变成你的IP了~

 

Then [接着]

  JSONP,我们开始入题吧~ 

  先说说后台返回个什么东西:(SAE地址:http://qianduannotes.sinaapp.com/test/CDS_jsonp.json

<?php
    $fun = $_GET["woo"];  //先假设woo对应的是 trigger ;
    $ctt = "靖鸣君";
    echo $fun . "(" . $ctt . ")";
?>

  后台数据解析之后就是这样的:

trigger(木子Vs立青)

  有人就要开始惊叹了,肿么是 木子Vs立青 ,没有引号包住??是的,没有引号,当$ctt是一个json数据的时候,我们得到的结果就是:

trigger(JSON)

  然后用一些熟知的方法来解析这些JSON(下次会讲解如何解析JSON)。

  说了半天还是没讲客户端的操作,O(∩_∩)O~  不急不急。

<script type="text/javascript" src="http://qianduannotes.sinaapp.com/test/CDS_jsonp.php?woo=trigger"></script>
<script type="text/javascript">
function trigger(obj){
//注:这里只是随便写的一个函数,obj是为解析的。
//obj = parse(obj);
document.getElementById("container").innerHTML = obj;
}
</script>

  习惯上jsonp请求时,会使用jsonp为参数,即jsonp=trigger,我觉得都无所谓啦,只要你用的爽就行。

  如果你想传更多参数,那也是一样的:

<script type="text/javascript" src="http://qianduannotes.sinaapp.com/test/CDS_jsonp.php?woo=trigger&a=va&b=vb&c=vc"></script>

 

Attention [注意事项]

  1.第一也是最重要的:JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。你无法获得一个404的错误,也不能取消这个请求。

  2.另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。

 

Reference [参考资料]

  1.wiki

  2.百度百科

  3.51CTO






本文转自Barret Lee博客园博客,原文链接:http://www.cnblogs.com/hustskyking/archive/2013/04/03/CDS_jsonp.html,如需转载请自行联系原作者

目录
相关文章
|
6月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- jsonp跨域请求
JavaScript学习 -- jsonp跨域请求
28 0
|
4月前
|
JavaScript 索引
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
|
27天前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
22 2
|
3月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- jsonp跨域请求
JavaScript学习 -- jsonp跨域请求
20 0
|
4月前
|
JSON 前端开发 JavaScript
JavaScript高级主题:什么是 JSONP?
JavaScript高级主题:什么是 JSONP?
26 0
|
4月前
|
前端开发 JavaScript 安全
JavaScript高级主题:什么是跨域资源共享(CORS)?
JavaScript高级主题:什么是跨域资源共享(CORS)?
39 0
|
4月前
|
JSON JavaScript 前端开发
JS解决跨域问题
JS解决跨域问题
28 0
|
5月前
|
自然语言处理 JavaScript 前端开发
【Vue.js】使用Element入门搭建登入注册界面&axios中GET请求与POST请求&跨域问题
【Vue.js】使用Element入门搭建登入注册界面&axios中GET请求与POST请求&跨域问题
139 0
|
6月前
|
JavaScript
vue-cli3.0无config,js跨域解决
vue-cli3.0无config,js跨域解决
24 2
|
6月前
|
JSON JavaScript 前端开发
js如何解决跨域问题?
js如何解决跨域问题?
64 0