美文网首页
JSONP实践

JSONP实践

作者: 围观工程师 | 来源:发表于2018-06-24 00:32 被阅读0次

跨域一直使用CORS,JSONP大概知道,但没有实践过。这次来实践一下。

前端代码

window.addEventListener('DOMContentLoaded', function() {
  ajax({
    url: '/jsonp',
    params: {
      p: '前端参数'
    },
    callback: function (data) {
      alert(data)
    }
  })
})

function ajax ({url, params, callback}) {
  const script = document.createElement("script");
  script.type = "text/javascript";
  window.callback = callback
  let s = '&'
  for (let [key, val] of Object.entries(params)) {
    if (typeof val === 'object') {
      s += (key + '=' + JSON.stringify(val) + '&')
    } else {
      s += (key + '=' + val + '&')
    }
  }
  s.slice(0, s.length - 1)
  url = url + '?funName=window.callback' + s;
  script.src = url + '?funName=window.callback';
  script.text = '!' + callback.toString() + '()';
  document.body.appendChild(script);
}

后台代码(Express)

router.get('/jsonp', function(req, res, next) {
  let p = req.query.p
  let funName = req.query.funName
  let s = funName + '("' + p + '")'
  res.writeHead(200, {
    'Content-Length': Buffer.byteLength(s),
    'Content-Type': 'application/javascript'
  });
  res.write(s)
  res.end()
});

总结

利用script脚本可以跨域请求的特性,将客户端用于处理结果的函数的函数名传递给服务端,服务端返回一个脚本文件,脚本文件的内容是函数名执行+请求结果作为函数参数。这样客户端在加载完这个脚本后会执行该脚本,调用处理结果的函数。

相关文章

  • jsonp实践

    什么是Jsonp Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从...

  • JSONP实践

    跨域一直使用CORS,JSONP大概知道,但没有实践过。这次来实践一下。 前端代码 后台代码(Express) 总...

  • JSONP、JQuery发送AJAX、JSONP请求

    1.JSONP 2.JQuery发送AJAX、JSONP请求 1.JSONP JSONP利用JavaScript...

  • JS-18day

    1、jsonp公开接口 2、jQuery-jsonp 3、jsonp

  • 2018-12-10

    节点操作 ajax jsonp jQuery-jsonp jsonp公开接口

  • RESTful Service Best Practices:

    基本上,当前的最佳实践是使用以下属性包装常规(非JSONP)响应: code – contains the HTT...

  • jsonp原理

    模拟jsonp原理 servlet 测试 http://localhost/jq/jsonp.jsp JSONP ...

  • 2018-07-30

    一 ajax 二 jsonp 三 jquery-jsonp 四 jsonp公开接口

  • ajax

    1、ajax 2、jsonp 3、jQuery-jsonp 4、jsonp公开接口

  • javasscript - 收藏集 - 掘金

    jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp?为什么要用jsonp?JSONP(JSO...

网友评论

      本文标题:JSONP实践

      本文链接:https://www.haomeiwen.com/subject/asxjyftx.html