jsonp 详解 —— 终于搞懂 jsonp 了

学习一定要一步一个脚印扎实学，最近跟着 kerwin 老师学习 node.js 时，又遇到了jsonp，当看到这个东西的时候感到既熟悉又陌生，只能说之前学的太过草率了，没有对学过的东西做总结。这次我翻阅很多优秀文章和视频，彻底弄懂了 jsonp 是什么东西，并在这里做好记录，方便自己日后查看。

 什么是 jsonp ？

JSONP 不是一门编程语言，也不是什么特别的技术，它更像一个漏洞，程序员可以利用这个漏洞，实现跨域（可以简单理解为跨域名）传输数据。在介绍 JSONP 之前，先来介绍一下浏览器的同源策略。

「同源策略」

同源策略是由 Netscape（网景） 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

所谓同源是指域名、协议、端口都相同。以 http://www.xxxxx.com:80/ 为例，http:// 为协议，域名是 www.xxxxx.com，端口是80（提示：80 为默认端口，可以省略，若为其它端口则必须显示定义）。

为了安全，浏览器不允许进行跨域请求。当我们通过 Ajax 在网页和服务器之间发送或接收数据时，需要保证网页与所请求的地址是同源的，否则无法请求成功。同源策略可以防止 JavaScript 脚本从您的网站中读取数据，并将数据发送到其它的网站。如果没有同源策略，很有可能会有恶意的程序泄露您网站中的内容。

虽然同源策略在一定程度上提高了网站的安全，但也会给程序员带来一些麻烦，例如在访问一些开发接口时，由于同源策略的存在，会调用失败。要解决这种问题就需要用到跨域，跨域的方法有许多种，其中最经典的就是 JSONP。

「JSONP」

JSONP 全称“JSON with Padding”，译为“带回调的 JSON”，它是 JSON 的一种使用模式。通过 JSONP 可以绕过浏览器的同源策略，进行跨域请求。

在进行 Ajax 请求时，由于同源策略的影响，不能进行跨域请求，而 

jsonp 总结

通过 jsonp，我们可以避开浏览器的同源策略，从而进行跨域请求。jsonp 是利用 HTML 标签的 src 属性引用资源不受同源策影响的特性来实现的，实现步骤如下：

• 通过动态创建 script 标签，其 scr 指向非同源的 url，并传递一个 callback 参数给服务端
• 服务器返回一个以 callback 参数作为函数名的函数的调用和一系列参数
• 页面接收到响应后执行回调并对数据进行处理

注意：服务器返回的内容，必须是一段可执行的 JavaScript 代码，不能是其它内容。

这篇文章的分享就到这里，如果您觉得我的文章有用，欢迎点赞和关注，也欢迎大家提出问题。如果大家想看其他解决跨域的方法，可以看我这一篇：CORS如何实现跨域（前端+后端代码实例讲解）