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