9.jsonp的实现原理
1. 由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的数据接口,浏览器认为这种访问不安全;
2. 以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓JSONP只支持Get请求);
3. 具体实现过程:
- 先在客户端定义一个回调方法,预定义对数据的操作;
- 再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;
- 服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行;
- 客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到JSONP的数据了;
4. 带大家通过 Node.js ,来手动实现一个JSONP的请求例子;
客户端:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><script>function showInfo123(data) {console.log(data)}</script><script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script> <!-- <script>show() </script> --></body></html>
View Code
服务端:app.js
// 导入 http 内置模块 const http = require('http') // 这个核心模块,能够帮我们解析 URL地址,从而拿到 pathname query const urlModule = require('url')// 创建一个 http 服务器 const server = http.createServer() // 监听 http 服务器的 request 请求 server.on('request', function (req, res) {// const url = req.urlconst { pathname: url, query } = urlModule.parse(req.url, true)if (url === '/getscript') {// 拼接一个合法的JS脚本,这里拼接的是一个方法的调用// var scriptStr = 'show()'var data = {name: 'xjj',age: 18,gender: '女孩子'}var scriptStr = `${query.callback}(${JSON.stringify(data)})`// res.end 发送给 客户端, 客户端去把 这个 字符串,当作JS代码去解析执行res.end(scriptStr)} else {res.end('404')} })// 指定端口号并启动服务器监听 server.listen(3000, function () {console.log('server listen at http://127.0.0.1:3000') })
View Code
nodemon .\app.js
转载于:https://www.cnblogs.com/yaboya/p/10246653.html
9.jsonp的实现原理相关推荐
- jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
- jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求
推荐一个读者做的不错的编程学习网站: 网站:潜安 域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇 问题由来: 最近一直在优化 ...
- jQuery 调用jsonp实现与原理
为什么80%的码农都做不了架构师?>>> 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使用一种特别的方式来实现跨域,其中的原理是利用 <scr ...
- jsonp跨域原理_Rust 搭建可跨域访问服务器JsonP(一)
最近有一个项目极有可能需要一个可跨域的服务器做一个中转,思来想去决定用Rust来实现这个服务器,因为有如下优点. 1.编译体积小 2.跨平台 3.安全性较高 JsonP(JSON with Paddi ...
- 白话之jsonp跨域原理分析
一.针对跨域请求,我们首先要知道什么是同源策略. 同源策略即是指:域名,协议,端口相同,三者中有一者不一致,为了安全考虑我们所在的服务器是无法获得想要访问资源所在服务器的资源的. 如图: 比如我们在l ...
- jsonp跨域原理及使用
在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. jsonp通过script标 ...
- ajax的jsonp原理,jsonp 跨域原理和用法(上篇)
出于对网站安全性的要求,两个不同域名的网站之间是不能通过前端技术互相发送请求的.但有时我们又需要使用这样的机制.比如:网站需要制作一个天气预报插件,或者需要开发两个网站,一个供外部用户使用,一个供内部 ...
- JSONP的实现原理
<script> window.callback = function (data) {// 这是我们跨域得到信息console.log(data) } </script> & ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
最新文章
- Linux那些事儿 之 戏说USB(31)驱动的生命线(三)
- Java的scjp_java scjp
- 21天mysql_把整个Mysql拆分成21天,轻松掌握,搞定(下)
- swift optionals - 1
- 安防监控系统CIF、D1等格式的解释
- (21)System Verilog设计D触发器
- CDKEY制作:为什么不能使用RSA?
- 使用MagicRecon在挖洞时最大化数据收集量
- C语言程序设计(第五版)-谭浩强著-课后习题
- mdb access2000 中文密码破解
- Eclipse中使用SVN教程
- Foxmail 设置自动落款签名
- HTML鼠标悬停图片的动态效果,4种超酷鼠标滑过图片过渡动画特效
- mysql高效查询_mysql 高效率查询背景
- 顶级白嫖!!!八个python免费自学网站一周搞定python(抓紧收藏)
- 详解CAN总线:CAN总线通信优先级机制
- 校园招聘之Offer、三方协议、两方协议、劳动合同都是什么?怎样避免被坑?...
- UniAPP HBuilderX 运行到各个小程序开发工具
- pandas 常用的数学统计方法 mad()
- TDOA算法综述(An overview of TDOA algorithm)--(1)
热门文章
- python知识点查阅
- vscode+vim使用技巧
- linux 内存泄露 工具,Linux Kernel模块内存泄露分析
- java可以做苹果软件吗_Java应用软件iPhone上运行 苹果没兴趣Sun单干
- bat脚本交互输入_windows 10 如何设定计划任务自动执行 python 脚本?
- eks volumn s3_和平精英:SMG战队无缘总决赛,S3前提退场原因一览
- oracle12c asm 冗余,深入分析:12C ASM Normal冗余中PDB文件块号与AU关系与恢复
- 08 内存分配和程序内存布局
- Bokeh 关键概念
- Pandas set_indexreset_index