jsonp解析

        从学习前端开始，对于跨域就一直听到jsonp这个名词，对于这个技术我其实一直很好奇，因为前端这边的实现代码实在是过于抽象了.......下面我放一下前端部分的代码：

function jsonp(fnName) {
        let script = document.createElement("script")
        script.src = "http://127.0.0.2:8080/index/?call="+fnName;
        document.body.insertBefore(script, document.body.firstChild)
    }
function handleResponse(response) {
        console.log('请求数据', response)
    }
jsonp('handleResponse')

        http://127.0.0.2:8080/index/是我本地我自己开的服务，我用node写的接口，当然一个合格的jsonp方法应该有更好的处理方式，但是在这里我们不去讨论那些东西，我们只是单独讨论原理。

        好的让我们回归正题，细看这段代码发现它只是生成了一个script标签，然后将其添加到了当前的html文档里而已，即使是向后端发送了一个请求，但是也只是传递过去了一个方法名称，一个方法名称有什么意义？直到我后来学了node之后亲自写了一遍前后端的完整逻辑才明白这个技术的天才之处，下面是服务器部分的代码:

var http = require("http"); //发起服务
const url = require('url');
var querystring = require("querystring");
http.createServer((req,res)=>{
  if(req.url == '/favicon.ico'){
    return
  }
  let queryObj = null;
  if(req.url == '/index/?call=handleResponse'){
    let urlObj = url.parse(req.url);
    queryObj = querystring.parse(urlObj.query);
  }
  res.statusCode = 200;
  let data = {id:'11111111111',data:[{a:1}]};
  res.end(queryObj.call+'('+JSON.stringify(data)+')');//传递给前端数据
}).listen(8080,"127.0.0.2",()=>{
  console.log("Successfully");
  console.log("http://127.0.0.2:8080/");
})

        这里我用node拉起了一个本地服务，res.end函数接受的参数是传递给前端的值，也就是别人请求接口的时候返回的数据，换句话说，这个函数接受的参数，就是返回给前端的东西，那我这里需要给前端返回什么东西呢？

        这里需要返回的是一段js代码，别忘了，我们真正请求的是一个script标签的内容，而一个script标签的内容就是一段js代码，res.end() 是 Node.js 中 HTTP 模块中的一个方法，用于结束响应过程并将响应数据发送给客户端。它接受一个可选的参数，表示要发送的响应数据内容，如果没有指定参数，则响应数据为空。 在这段代码中`res.end(queryObj.call+'('+JSON.stringify(data)+')')` 表示将 `queryObj.call+'('+JSON.stringify(data)+')'` 作为响应数据返回给客户端。其中 `JSON.stringify(data)` 将数据对象data转换为 JSON 字符串，`queryObj.call` 是一个回调函数名，这样就会传递给前端一段这样的代码：

 这段代码就会在前端的浏览器里跑起来，而函数外部定义的函数属于全局变量，又因为这里是网络请求来的js代码所以一定在当前本地的js代码执行完之后再执行。这样一来，引入的script标签里就可以引用到该函数，传递来的参数也可以被传递进函数了，就这样绕过了跨域的问题，完成了数据传递。