1、项目初始准备

找一处风水宝地，新建文件夹 01_jsonp
打开终端，进行初始化 npm init -y
下载第三方npm i express@4.17.1
新建文件 app.js 和 index.html

2、搭建简易后端服务器 `app.js`

// 导入
const express = require('express');
// 创建
const app = express();

// 书写接口 - 不需要路由模块化，jsonp 只支持get请求
app.get('/api/jsonp', (req, res) => {
    // res.send('OK');
    // res.send("var str = 'OK'");
    // res.send('alert("OK")');
    // 服务响应给客户端一个执行函数◆
    // res.send('fn("我是要传递给前端的数据")');
    // 服务器响应给客户端的执行函数，从前端获取;
    let aaa = req.query.callback
    setTimeout(function () {
        res.send(aaa + `({name:'zs',age:18})`)
    }, 20000);
});

// 开启服务
app.listen(8888, () => console.log('http://localhost:8888'))

3、前端页面进行测试 `index.html`

法1.导入 jQuery, 尽量使用线上地址，把 ajax 请求数据类型设置为 jsonp 请求

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        // console.log($);
        $.ajax({
            dataType: 'jsonp',
            method: 'GET',
            url: 'http://localhost:8888/api/jsonp',
            success: function (res) {
                console.log(res, '1');
            }
        });
    </script>

法2.定义好一个全局函数 fn ,模拟 jsonp 用 script 标签发起请求

    <script>
        function fn(res) {
            // 随意操作res
            console.log(res, '2');
        }
    </script>
    <!-- 通过script标签发出的请求接收到的字符串数据，会按照js语法执行！ -->
    <script src="http://localhost:8888/api/jsonp?callback=fn"></script>

4、总结

什么是 jsonp

jsonp 并不是一种数据格式，而 json 是一种数据格式，jsonp 是用来解决跨域获取数据的一种解决方案

jsonp 的原理

是通过动态创建 script 标签，利用 script 标签的 src 属性不受同源策略的限制。因为所有的 src 属性和 href 属性都不受同源策略的限制。可以请求第三方服务器数据内容。

步骤

去创建一个 script 标签
script 的 src 属性设置接口地址
接口函数，必须要带一个自定义函数名，要不然后台无法返回数据
通过定义函数名去接收后台返回的数据

6、扩展补充

什么是同源策略

同源策略是客户脚本的重要的安全的度量标准。其目的是为了防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议、域名、端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性

什么是跨域

指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制，防止他人恶意攻击网站。协议、域名、端口有一个不同就会造成跨域

解决跨域的方式

jsonp(前端和后端配合)
proxy（前端）（只适用本地开发环境）
cros（后端）
Nginx（后端）

jsonp工作原理