JSONP实现原理-简析-白红宇

使用script标签是如何实现跨域请求的，它是一个新技术，还是一个技巧？下面我们来看看，其中简单的原理：

我们写一个很平常的example.js，文件内容展示如下：

getJson({    results: [        {            name: 'xxx',            code: 1        }    ]});复制代码

接下来，再写一个简单的index.html文件：

      
        jsonp              复制代码

上面的index.html代码，当成功的请求到example.js后，相当于这样：

      
        jsonp              复制代码

相信写到这里，是能看得明白的，下面正式开始说JSONP的实现，我用的是nodejs后台：

前端代码index.html，给"://127.0.0.1:3000/example.js"请求地址加一个get请求参数?callback=getJson，代码示例如下：

      
        jsonp              复制代码

后端server.js代码如下：

const express = require('express');const server = express();server.use('/example.js', (req, res) => {  // req.query.callback是getJson  let methodName = req.query.callback;   let data = {     results: [       {         name: 'xxx',         code: 1       }     ]   };  let dataStr = JSON.stringify(data),      // 相当于sendStr = `getJson(${dataStr})`      sendStr = `${methodName}(${dataStr})`;  res.send(sendStr);});server.listen(3000);console.log('server running at 127.0.0.1:3000');复制代码

当请求成功后，index.html代码解析如下：

      
        jsonp              复制代码

最后声明，为了方便大家理解，我把请求写成了一个example.js，其实接口只要一个字符串就可以了,例如""，其中.js文件格式，完全是为了帮助大家理解。