原生的js实现jsonp的跨域封装
一、原理
jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的,伪造一个script标签,将请求数据的url赋值给script的src属性,并将该标签添加到html中,浏览器会自动发送请求,返回的一般时一段js代码,即函数的调用代码。
该种跨域的请求方式需要后台配合返回响应的函数执行数据
二、封装代码
function jsonp (url, data, callback) {
let scriptTag = document.createElement('script')
let params = ''
for (key in data) {
params += key + '=' + data[key] + '&'
}
params.length === 0 ? scriptTag.src = url + '?' + 'fn=' + callback : scriptTag.src = url + '?' + params + 'fn=' +callback
document.querySelector('head').appendChild(scriptTag)
}
function myCallback(){
alert('success')
}
jsonp ('123', {name:'lhy'}, 'myCallback')这里需要后台返回的参数名为fn
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!