jsonp

说到Ajax，就涉及到跨域访问的问题
解决跨域访问的方法：
1、CORS
2、反向代理
3、jsonp : 纯前端能实现的跨域，前两者不能。

---

jsonp是什么？

利用script的src跨域访问资源，而后台对应的返回一个函数调用，然后把JSON数据放在函数的参数里面返回给前端

所以它是JSON使用的一种模式

如果后台没有写对应jsonp接口，那么就请求不到了。都得通过后台的允许。

---

jsonp作用: 跨域获取数据。

---

jsonp的实现原理

script的src属性具备： 跨域请求资源的能力
那么可以通过 src 跨域请求资源

但是后台不一定是 nodejs，可能是php等，不同语言的函数function fn(){} 不同写法

任何语言基本都支持JSON

src请求过程中，默认使用GET请求方式，
存在问题：
比如后台返回 fy()，那么后台怎么知道前端的函数名就叫fy呢？
所以要想办法跟后台沟通一下，
怎么沟通？ ：通过请求的参数
假如请求的路径是 localhost?callback=liang，那么请求路径的时候怎么知道这个名字？ ：GET方式的 参数都在 ？后面
jsonp必须指定回调函数。callback这个参数的值就是告诉后端 前端的函数名叫什么
？后面的后端能取到，那么就能取到fy字段

所以后端返回什么是由请求的路径的callback的回调来决定的

---

一个简单的jsonp实例

1、打开终端 先初始化：npm init
2、然后安装 koa: npm i -S koa
3、建一个后端入口程序 test.js
4、 然后导入 koa模块
5、拿到koa生成的app 服务器对象

// jsonp.html总代码

<script>
  function liang(obj) {
      console.log("后台传过来的前端数据");
      console.log(obj);
  }

  document.onclick = function () {
      const script = document.createElement('script');
      script.src = "http://localhost:3000?key=value&callback=liang"
      document.body.appendChild(script);
  }
  // 这里就可以跨域请求了
  // 这就是跨域访问了

  /*
    jsonp在跨域请求的时候，通过script的src，而src默认通过GET方式请求，也不能改变。
    所以callback的参数要跟在请求接口的？的后面，指定函数名字
  */

</script>
<script src="http://localhost:3000?key=value&callback=liang"></script>

// 后台 test.js 总代码

// 导入 koa模块
const Koa = require("koa");
// 拿到koa生成的app 服务器对象
const test = new Koa;

// 监听
test.use(async ctx => {
    const callback = ctx.query.callback;
    // 纯文本不会返回，所以要设置类型
    ctx.type = "text/javascript";
    ctx.body = `${callback}({a:'后端传过来的数据'})`
    console.log(ctx.query);
})
// 监听 3000端口
test.listen(3000);