JS之AJAX-JSONP

JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，常用于服务器与客户端跨域通信，由于其良好的兼容性，在Web服务中非常流行

基础

JSONP的基本思想是向网页中动态的添加一个<script>元素，并设置script元素的src属性为接口地址，利用script元素天生的跨域功能实现跨域请求。当通过script元素调用数据时，响应内容必须用JavaScript函数名包裹起来，这个函数名是可以自定义的，它取决于src地址的callback参数值（callback参数名也是可以自定义的，但通常默认设置为callback）

http://127.0.0.1:3030/api/test?callback=info

JSONP由回调函数和数据两部分组成。回调函数就是响应数据时应该在页面中调用的函数，回调函数的名称是在请求中指定的，而数据就是传入回调函数中的JSON数据

info({name: "wmui", age: 18})

JSONP示例

前端示例

<!DOCTYPE html>
<html lang="en">
<head>
  
  <title>Document</title>
</head>
<body>
  <button id="btn">btn</button>
  <script>
  function loadScript(url){
    if(!loadScript.mark) {
       loadScript.mark = 'load';
       var script = document.createElement("script");
       script.type = "text/javascript";
       script.src = url;
       document.body.appendChild(script);
    }
  }
  function info(response) {
    console.log(response)
  }

  btn.onclick = function() {
    loadScript('http://127.0.0.1:3040/api/test?callback=info')
  }
  </script>
</body>
</html>

后端示例

app.get('/api/test', function(req, res) {
  res.jsonp({name: "wmui", age: 18});
})

结果

三句话解释jsonp:

  1. 前端动态创建带有callback函数的script
  2. 后端返回callback函数包裹的数据
  3. 前端调用这个函数拿到数据
posted @ 2021-09-29 14:19  wmui  阅读(125)  评论(0)  编辑  收藏  举报