Jsonp理解和简单使用

By
写代码

Ajax帮助我们解决了许多耗时请求以及前端友好展示的问题,但是有时候我们想从不同域名请求资源,或者发送信息,又会遇到层层阻碍,特别是广泛的交互以及不同产品之间互通之后,一些信息的共享就显得尤为重要了。Jsonp就是用来解决跨域问题的一个方案。

同源策略

通常写本地页面不会看到同源策略,在需要动态加载(如ajax)资源的时候,就会时不时碰到这个问题,如提示“No 'Access-Control-Allow-Origin' header is present on the requested resource.”

同源策略简单描述就是,限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。详细信息参考 浏览器的同源策略

为了解决这个问题,程序员们想出了一个迂回的解决办法:Jsonp。

Jsonp原理

1、普通的Ajax请求存在跨域无权限访问的问题。

2、HTML拥有”src”这个属性的标签都拥有跨域的能力,比如script、img、iframe等。

3、纯web端调用跨域数据,只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,并由浏览器放入类似script的标签,获取内容并进行进一步解析。

这里有个例子,简单模拟了这个过程。


    

JSONP test

服务器端用xafarr在github上的一个 例子 ,基于spring boot。直接clone然后放eclipse里编译运行即可。

直接运行以上代码,看请求返回内容为

handler({RegisteredName: "张三"});

同时可以在浏览器看到输出了结果:

name: 张三

Json与Jsonp

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,从名字就可以看出来Json是和Javascript有密切联系的。同时,Json又采用完全独立于语言的文本格式,采用key、value和类似数组的两种数据结构,并由他们组成一个个“对象”,这使得Json成为理想的数据交换语言。由于采用纯文本传输,省去了很多宝贵的带宽资源,同时相比xml而言,Json更加简洁,易读性也不差,所以慢慢就流行起来。

而如前所属,Jsonp是一种跨域数据交互协议,是一种跨域问题的解决方案。这两者的区别显而易见。

jQuery的实现

$.ajax({
	url: "http://192.168.1.xxx:8443/api/name/person1",
	dataType: "jsonp",
	type: "get",
	jsonpCallback: "handler"
}).done(function(data){
	$("#cont").html("name: " + data.RegisteredName);
});

jQuery会根据dataType判断请求,如果是Jsonp,会靠script而不是XmlHttpRequest(XHR对象,使浏览器可以发出HTTP请求与接收HTTP响应)来完成请求过程,

在ajax请求中类型如果是type是get post,其实内部也只会用get,因为其跨域的原理就是用的动态加载script的src,所以我们只能把参数通过url的方式传递。

具体参考 官方文档

可以看出,Jsonp的基本使用方法就是:用户带参数请求一个跨域资源,并附带一个callback的参数给服务端,然后服务端用callback来包装数据并返回给用户。所以Jsonp里重要的就是callback和相关参数。

您已经发表过意见了!

Comments: 12

  1. 来看看

    2016年11月29日
  2. :razz: :sad:

    2016年12月02日
  3. :smile: 非常不错的表情。

    2016年12月02日
  4. :mrgreen: 所有的东西拆到最后,都是简单的东西组成的,这是我对经理了复杂的文章和复杂的代码想说的。

    2016年12月16日
  5. 分享的不错,谢谢

    2016年12月20日
  6. 跨域处理比较少,有几次用到,记得应该是用 curl…模拟什么的

    2016年12月25日
  7. 学习学习

    2016年12月26日
  8. 简单的要命额

    2016年12月27日
  9. 不错的方法。

    2016年12月27日
  10. :mrgreen: 不错,实际上用起来实际上没什么区别~

    2017年01月03日
  11. 好久不来,冒个泡。 你这个api里面有什么

    2017年04月28日

发表评论

您的电子邮箱地址不会被公开。

*

:razz: