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.url const { 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
