头条面试官：一文彻底搞懂JSONP

 一个正常的请求: JSON

为企业提供成都网站设计、做网站、网站优化、成都全网营销推广、竞价托管、品牌运营等营销获客服务。成都创新互联拥有网络营销运营团队，以丰富的互联网营销经验助力企业精准获客，真正落地解决中小企业营销获客难题，做到“让获客更简单”。自创立至今，成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题，同时降低了营销成本，提高了有效客户转化率，获得了众多企业客户的高度认可！

正常发请求时，curl 示例:

 
 
 
 
    
  
  
  
  
  1. $ curl https://shanyue.tech/api/user?id=100
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. {
    4. 
  
  
  
  
  4.   "id": 100,
    5. 
  
  
  
  
  5.   "name": "shanyue",
    6. 
  
  
  
  
  6.   "wechat": "xxxxx",
    7. 
  
  
  
  
  7.   "phone": "183xxxxxxxx"
    8. 
  
  
  
  
  8. }
    9.

使用 fetch 发送请求，示例:

 
 
 
 
    
  
  
  
  
  1. const data = await fetch('https://shanyue.tech/api/user?id=100', {
    2. 
  
  
  
  
  2.   headers: {
    3. 
  
  
  
  
  3.     'content-type': 'application/json',
    4. 
  
  
  
  
  4.   },
    5. 
  
  
  
  
  5.   method: 'GET',
    6. 
  
  
  
  
  6. }).then(res => res.json())
    7.

请求数据后，使用一个函数来处理数据

 
 
 
 
    
  
  
  
  
  1. handleData(data)
    2.

一个 JSONP 请求

JSONP，全称 JSON with Padding，为了解决跨域的问题而出现。虽然它只能处理 GET 跨域，虽然现在基本上都使用 CORS 跨域，但仍然要知道它，毕竟面试会问。

curl 示例

 
 
 
 
    
  
  
  
  
  1. $ curl https://shanyue.tech/api/user?id=100&callback=padding
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. padding({
    4. 
  
  
  
  
  4.   "id": 100,
    5. 
  
  
  
  
  5.   "name": "shanyue",
    6. 
  
  
  
  
  6.   "wechat": "xxxxx",
    7. 
  
  
  
  
  7.   "phone": "183xxxxxxxx"
    8. 
  
  
  
  
  8. })
    9.

对于正常的请求有何不同一目了然: 多了一个 callback=padding, 并且响应数据被 padding 包围，这就是 JSONP

那请求数据后，如何处理数据呢?此时的 padding 就是处理数据的函数

 
 
 
 
    
  
  
  
  
  1. window.padding = handleData
    2.

这里实现一个 jsonp 函数

 
 
 
 
    
  
  
  
  
  1. function jsonp_simple ({ url, onData, params }) {
    2. 
  
  
  
  
  2.   const script = document.createElement('script')
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.   // 一、默认 callback 函数为 padding
    5. 
  
  
  
  
  5.   script.src = `${url}?${stringify({ callback: 'padding', ...params })}`
    6. 
  
  
  
  
  6.   // 二、使用 onData 作为 window.padding 函数，接收数据
    7. 
  
  
  
  
  7.   window['padding'] = onData
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.   document.body.appendChild(script)
    10. 
  
  
  
  
  10. }
    11.

此时会有一个问题: window.padding 函数会污染全局，如果有多个请求发送如何处理?

使 jsonp 的回调函数名作为一个随机变量，代码如下

 
 
 
 
    
  
  
  
  
  1. function jsonp ({ url, onData, params }) {
    2. 
  
  
  
  
  2.   const script = document.createElement('script')
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.   // 一、为了避免全局污染，使用一个随机函数名
    5. 
  
  
  
  
  5.   const cbFnName = `JSONP_PADDING_${Math.random().toString().slice(2)}`
    6. 
  
  
  
  
  6.   // 二、默认 callback 函数为 cbFnName
    7. 
  
  
  
  
  7.   script.src = `${url}?${stringify({ callback: cbFnName, ...params })}`
    8. 
  
  
  
  
  8.   // 三、使用 onData 作为 cbFnName 回调函数，接收数据
    9. 
  
  
  
  
  9.   window[cbFnName] = onData;
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.   document.body.appendChild(script)
    12. 
  
  
  
  
  12. }
    13. 
  
  
  
  
  13. 
  
  
  
  
  14. // 发送 JSONP 请求
    15. 
  
  
  
  
  15. jsonp({
    16. 
  
  
  
  
  16.   url: 'http://localhost:10010',
    17. 
  
  
  
  
  17.   params: { id: 10000 },
    18. 
  
  
  
  
  18.   onData (data) {
    19. 
  
  
  
  
  19.     console.log('Data:', data)
    20. 
  
  
  
  
  20.   }
    21. 
  
  
  
  
  21. })
    22.

代码附录

完整代码可见山月博客的 github 仓库: https://github.com/shfshanyue/blog/tree/master/code/jsonp/

JSONP 实现完整代码:

 
 
 
 
    
  
  
  
  
  1. function stringify (data) {
    2. 
  
  
  
  
  2.   const pairs = Object.entries(data)
    3. 
  
  
  
  
  3.   const qs = pairs.map(([k, v]) => {
    4. 
  
  
  
  
  4.     let noValue = false
    5. 
  
  
  
  
  5.     if (v === null || v === undefined || typeof v === 'object') {
    6. 
  
  
  
  
  6.       noValue = true
    7. 
  
  
  
  
  7.     }
    8. 
  
  
  
  
  8.     return `${encodeURIComponent(k)}=${noValue ? '' : encodeURIComponent(v)}`
    9. 
  
  
  
  
  9.   }).join('&')
    10. 
  
  
  
  
  10.   return qs
    11. 
  
  
  
  
  11. }
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. function jsonp ({ url, onData, params }) {
    14. 
  
  
  
  
  14.   const script = document.createElement('script')
    15. 
  
  
  
  
  15. 
  
  
  
  
  16.   // 一、为了避免全局污染，使用一个随机函数名
    17. 
  
  
  
  
  17.   const cbFnName = `JSONP_PADDING_${Math.random().toString().slice(2)}`
    18. 
  
  
  
  
  18.   // 二、默认 callback 函数为 cbFnName
    19. 
  
  
  
  
  19.   script.src = `${url}?${stringify({ callback: cbFnName, ...params })}`
    20. 
  
  
  
  
  20.   // 三、使用 onData 作为 cbFnName 回调函数，接收数据
    21. 
  
  
  
  
  21.   window[cbFnName] = onData;
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.   document.body.appendChild(script)
    24. 
  
  
  
  
  24. }
    25.

JSONP 服务端适配相关代码:

 
 
 
 
    
  
  
  
  
  1. const http = require('http')
    2. 
  
  
  
  
  2. const url = require('url')
    3. 
  
  
  
  
  3. const qs = require('querystring')
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. const server = http.createServer((req, res) => {
    6. 
  
  
  
  
  6.   const { pathname, query } = url.parse(req.url)
    7. 
  
  
  
  
  7.   const params = qs.parse(query)
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.   const data = { name: 'shanyue', id: params.id }
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.   if (params.callback) {
    12. 
  
  
  
  
  12.     str = `${params.callback}(${JSON.stringify(data)})`
    13. 
  
  
  
  
  13.     res.end(str)
    14. 
  
  
  
  
  14.   } else {
    15. 
  
  
  
  
  15.     res.end()
    16. 
  
  
  
  
  16.   }
    17. 
  
  
  
  
  17. 
  
  
  
  
  18. })
    19. 
  
  
  
  
  19. 
  
  
  
  
  20. server.listen(10010, () => console.log('Done'))
    21.

JSONP 页面调用相关代码

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5.   
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9.   
    10. 
  
  
  
  
  10.   jsonp({
    11. 
  
  
  
  
  11.     url: 'http://localhost:10010',
    12. 
  
  
  
  
  12.     params: { id: 10000 },
    13. 
  
  
  
  
  13.     onData (data) {
    14. 
  
  
  
  
  14.       console.log('Data:', data)
    15. 
  
  
  
  
  15.     }
    16. 
  
  
  
  
  16.   })
    17. 
  
  
  
  
  17.   
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.

JSONP 实现代码示例演示

从中克隆代码: 山月博客的 github 仓库

文件结构

  • index.js: jsonp 的简单与复杂实现
  • server.js: 服务器接口形式
  • demo.html: 前端如何调用 JSONP

快速演示

 
 
 
 
    
  
  
  
  
  1. // 开启服务端
    2. 
  
  
  
  
  2. $ node server.js
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. // 对 demo.html 起一个服务，并且按照提示在浏览器中打开地址，应该是 http://localhost:5000
    5. 
  
  
  
  
  5. // 观察控制台输出 JSONP 的回调结果
    6. 
  
  
  
  
  6. $ serve .
    7.

本文转载自微信公众号「全栈成长之路」，可以通过以下二维码关注。转载本文请联系全栈成长之路公众号。

当前题目：头条面试官：一文彻底搞懂JSONP
网站链接：http://www.csdahua.cn/qtweb/news31/516531.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

网站改版知识

各行业网站

成都小程序开发　　 　定制级高端网站建设　　 　香港云主机　　 　专业网站设计　　 　雅安移动机房　　 　成都富士康招工　　 　温江网站建设　　 　成都做网站　　 　成都响应式网站建设　　 　成都商务茶叶销售　　 　营山母婴护理中心　　 　成都网站推广　　 　主机租用　　 　香港云主机　　 　成都网站建设　　 　高端网站定制　　 　成都企业网站建设　　 　成都建网站　　 　成都主机托管　　 　网站改版维护