码迷,mamicode.com
首页 > Web开发 > 详细

原生的js实现jsonp的跨域封装

时间:2018-12-22 01:34:37      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:length   end   一段   tor   pre   select   实现   callback   tee   

一、原理

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

原生的js实现jsonp的跨域封装

标签:length   end   一段   tor   pre   select   实现   callback   tee   

原文地址:https://www.cnblogs.com/lhyhappy365/p/10159294.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!