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