开发者学堂课程【Vue.js 入门与实战：结合 Node 手写 JSONP 服务器剖析 JSONP 原理】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8158
结合 Node 手写 JSONP 服务器剖析 JSONP 原理
目录
一、JSONP的实现原理
二、 代码演示
一、JSONP 的实现原理
- 由于浏览器的安全性限制，不允许 AJAX 访问协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全。因为后端服务器的接口比如运行在33 或44上，但是前端网站运行在80端口。前后端端口不一样，要实现跨域访问，前后端合作开发更多的使用 JSONP。
- 可以通过动态创建 script 标签的形式，把 script 标签的 src 属性，指向数据接口的地址，因为 script 标签不存在跨城限制，这种数据获取方式，称作 JSONP (注意：根据 JSONP 的实现原理，JSONP 只支持 Get 请求)；
具体实现过程：
- 先在客户端定义一个回调方法，预定义对数据的操作。
- 再把这个回调方法的名称，通过 URL 传参的形式，提交到服务器的数据口。
- 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称拼接出一个调用这个方法的字行中，发送给客户端去解析执行。
- 客户端拿到服务器返回的字行串之后，当作 Script 脚本去解折执行，这样就能能拿到 JSONP 的数据了
二、代码演示
模拟手动实现 JSONP 服务器端代码使用 node 编写，客户端也可以请求 node 服务端的 JSONP 地址。
首先新建客户端 JSONP 页面：06客户端 JSONP 页面.html
<script>
function show() {
console.log(ok)//表示调用 show 方法输出 ok,页面一旦被展示出来，浏览器的内存中就会有 show 方法。
}
<script>
<script scr=”http://127.0.0.1:3000/getscript”></script>//请求服务器标签，端口是3000，存在跨域限制。如果不写端口默认为80。Script 标签不受端口限制可以请求。
新建文件 node-server ，新建服务器端 app.js
服务器端:
快速创建一个 node 服务器。
//导入 http 内置模块
const http= zequize('http')
// 创建一个 http 服务器
const server =http.createserver()
//监听 http 服务器的 request 请求
server.on('request',function (req,res) {
const url = req.url
const ( pathname:url,query)=urlModule.parse(req.uzl,true)
if(url=’/getscript') {
//客户端 script 的目的是请求脚本，在这里监听到它的请求，返回一个合法的 js 文件，方法的调用就属于合法的 js ，这里可以调用show 方法，拼接一个合法的 Js 脚本.这里拼接的是一个方法的调用。
这个方法服务器端没有，这只是一个字符串，通过 res.end 发送给客户端，客户端把这个字符串当作 JS 代码解析执行。
相当于客户端的 src 请求回来之后变成了一个 sript 里面包含 show 方法的调用。如果要调用 show 方法也可以进行调用，因为已经定义了 show 方法。
Var scriptstr ='show()’
Res.end{scriptstr}
}else{
Res.end{‘404’ }
}
})
启动服务器
刷新页面，输出 ok，ok 输出是因为请求了脚本，脚本反馈的结果是方法的调用。脚本请求过来以后，浏览器解析执行该脚本。
对代码升级优化：
function show(),show 方法写成了固定的，服务器无法判断 show 。
所以需要客户端把方法的名称通过var script 传递，获取到值以后，把方法的名称动态拼接到 show 。这样可以保证方法的适用性。
<script>function showInfo(data) {console.log(data)//表示调用 show 方法输出 ok}<script><script scr=”http://127.0.0.1:3000/getscript?callback=showinfo”></script>// show 改名后服务器再进行访问就无法执行了。可以通过Callback 把 showinfo 名称传递过去。
服务器端：
Const urlmodule=require(‘url’)//这个核心模块帮助解析 URL 地址，从而拿到 pathname 和 query ，pathname 就是 url Const{ pathname:url,query}= urlmodule.parse(req.url,true)// query 要解析成一个对象，true 代表模块内部的方法会调用querystring 模块解析对象。
内部解析出一个 pathname 对象，重命名为 url 还能解析出 query
if(url===’/getscript) {Var scriptstr ='${qiery.callback} ()’//表示如果请求地址等于 getscript ，则返回方法的调用，但是方法名不能写死。而是通过 query .callback。Res.end{scriptstr} }else{Res.end{‘404’ }}})
结果输出：ok
服务器端返回的脚本会执行本地的已经定义好的方法，现在服务器端只是调用了方法，但是在调用方法时也可以为方法传一个数据对象。即服务器端拼接好的数据。
范例如下：
Var: data={Name:’xjj’,age:18,gender:'女孩子’}var scriptstr =$(query.callback){$(JSON.stringify(data) })res.end(scriptstr)//在调用方法时，可以把数据对象传递进去，但是这里只接收字符串，data 是一个对象。不能直接在 var scriptstr =$(query.callback) 后拼接，如果拼接会调用它的obj.tostring tostring得到的不是真正的字符串。
应该把 data 对象转成字符串拼接在后面，在调用方法时，给它传一个 JSON.字符串的一个数据类型。这样客户端就可以获取到传递的数据。
因为
$(query.callback){$(JSON.stringify(data) }是一个方法调用，和show（）方法调用相同。
} else {res.end('404')
总结 JSONP 的实现原理：
客户端定义一个方法的调用，服务器返回一个具体方法的调用，如果需要获取某些数据，服务器先把数据组织好，在调用方法时传入。
