[转帖]jsonp 详解 —— 终于搞懂 jsonp 了
当前位置：点晴教程→知识管理交流
→『 技术文档交流 』
 ：jsonp 详解 —— 终于搞懂 jsonp 了 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 请求时，由于同源策略的影响，不能进行跨域请求，而 <script> 标签的 src 属性却可以加载跨域的 Javascript 脚本，JSONP 就是利用这一特性实现的。与普通的 Ajax 请求不同，在使用 JSONP 进行跨域请求时，服务器不再返回 JSON 格式的数据，而是返回一段调用某个函数的 Javascript 代码，在 src 属性中调用，来实现跨域。 JSONP 的优点是兼容性好，在一些老旧的浏览器种也可以运行，但它的缺点也非常明显，那就是只能进行 GET 请求。 jsonp 的应用 1. 服务端 JSONP 格式数据 var http = require("http") var url = require("url")
http.createServer((req, res) => { var urlobj = url.parse(req.url, true) console.log(urlobj.query.callback); switch (urlobj.pathname) { case "/api/aaa": res.end(`${urlobj.query.callback} (${JSON.stringify({ name: '张三', age: 21 })})`) break; default: res.end("404") } }).listen(3000, () => { console.log("start"); }) 2. 客户端实现 callback 函数 <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <!-- jsonp接口调用 --> <script> var oscript = document.createElement("script") oscript.src = "http://localhost:3000/api/aaa?callback=kerwin" document.body.appendChild(oscript)
function kerwin(obj) { console.log(obj); } </script> </body>
</html> jsonp 总结 通过 jsonp，我们可以避开浏览器的同源策略，从而进行跨域请求。jsonp 是利用 HTML 标签的 src 属性引用资源不受同源策影响的特性来实现的，实现步骤如下： 通过动态创建 script 标签，其 scr 指向非同源的 url，并传递一个 callback 参数给服务端 服务器返回一个以 callback 参数作为函数名的函数的调用和一系列参数 页面接收到响应后执行回调并对数据进行处理 注意：服务器返回的内容，必须是一段可执行的 Javascript 代码，不能是其它内容。 该文章在 2023/12/14 17:24:04 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
