重庆SEO, 关注并探索SEO与WEB技术。针对用户体验,提供白帽SEO以及PHP网站建设以及运营服务。

JSONP与ajax相关内容整理

发布于 作者 [重庆SEO]

Markdown版本

维基百科JSONP定义

JSONP(JSON with Padding)是数据格式JSON的一种"使用模式",可以让网页从别的网域要数据。另一个解决这个问题的新方法是跨来源资源共享。

由于同源策略,一般来说位于server1.example.com的网页无法与 server2.example.com的服务器沟通,而HTML的 <script>元素是一个例外。利用 <script>元素的这个开放策略,网页可以得到从其他来源动态产生的JSON数据,而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON,而是任意的JavaScript,用 JavaScript解释器运行而不是用JSON解析器解析。

JSONP原理及简单实现思路

全称 JSON with Padding,用于解决AJAX跨域问题的一种方案。

由于同源策略的限制,浏览器只允许XmlHttpRequest请求当前源(域名、协议、端口)的资源,而对请求script资源没有限制。通过请求script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,这种跨域的数据的方式被称为JSONP。
实现原理

1.首先在客户端注册一个callback方法,放到window对象上,如:

callbackFunction (json) {
console.log(JSON)
}

然后把callback的名字(callbackFunction)传给服务器。

2.服务器先生成 JOSN 数据。

3.将 JOSN 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档(如callbackFunction(JOSN)),返回给客户端。

4.客户端浏览器,将返回的JS标签插入DOM,解析script标签后,会执行callbackFunction(JOSN)。

通过这种方式,即可实现跨域获取数据。

注意

在 jquery 中,JSOP 被封装在 $.ajax() 方法中,但是他的实现原理与 ajax 完全不同。
JSONP的兼容性较好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持。
JSONP只支持GET请求而不支持POST等其它类型的HTTP请求。
JSONP在调用失败的时候不会返回各种HTTP状态码(解决方法:添加timeout参数,虽然JSONP请求本身的错误没有被捕获,但是最终会因为超时而执行error回调)。
在使用JSONP的时候必须要保证使用的JSONP服务必须是安全可信的。万一提供JSONP的服务存在页面注入漏洞,它返回的javascript都将被执行,若被注入这是非常危险的。

ajax与jsonp的异同再做一些补充说明

1、ajax和jsonp这两种技术在调用方式上"看起来"很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点!


分类:Jquery

Tags: 整理, 内容, 相关,

本文标题: JSONP与ajax相关内容整理

本文地址: https://seonoco.com/blog/jsonp-ajax

版权说明: 本站遵循 CC BY-NC-SA 4.0 协议, 未表明转载信息均为原创或整理,转载或引用请注明出处,以便溯本求源。

补充说明: 本文在本站发布于2020-02-06,文中部分内容可能存在过时或不正确,请知晓!如果可以请留言告知。

本文是否有所帮助?
点赞
说一说
打赏