AJAX---JSONP | 易学教程

JSONP

是一种借助于 script 标签发送跨域请求的技巧

其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件）

服务端的这个动态网页返回一 段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。

以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求

总结：

由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以借助于script标签来实现，并称之为 JSONP

（如果不了解原理，先记住怎么用，多用一段时间再来看原理）

1. JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数
2. 只能发送 GET 请求

JSONP客户端

function jsonp(url, params, callback) {
      var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5)
      if (typeof params === 'object') {
        var tempArr = []
        for (var key in params) {
          var value = params[key]
          tempArr.push(key + '=' + value)
        }
        params = tempArr.join('&')
      }

      var script = document.createElement('script')
      script.src = url + '?' + params + '&callback=' + funcName
      document.body.appendChild(script)

      window[funcName] = function (data) {
        callback(data)

        delete window[funcName]
        document.body.removeChild(script)
      }
    }

    jsonp('http://127.0.0.1:5500//jsonp/server.php', { id: 123 }, function (res) {
      console.log(res)
    })
    jsonp('http://127.0.0.1:5500//jsonp/server.php', { id: 123 }, function (res) {
      console.log(res)
    })

JSONP服务端

jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp

    $.ajax({
      url: 'http://localhost/jsonp/server.php',
      dataType: 'jsonp',
      success: function (res) {
        console.log(res)
      }
    })

其他常见的 AJAX 封装库： Axios

来源：https://www.cnblogs.com/jane-panyiyun/p/12287494.html

标签

jsonp

脚本