jsonp获取html代码,跨站请求数据jsonp手写原生js代码实现

JSONP

--来自百度百科

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的

原生js实现jsonp跨站获取数据:

var jsonp = function(url,data,callback){

// 回调函数+时间戳

var cbName = 'callback_' + new Date().getTime();

// 暴露全局函数给window

// 判读查询字符串最后一位是否为?或者是&

var queryString = url.indexOf('?') == -1 ? '?' : '&';

// 遍历传进来的data实参赋值给查询字符串

for(var k in data){

queryString += k + '=' + data[k] + '&';

}

// 查询字符串加上回调函数

queryString += 'callback=' + cbName;

// 创建script标签

var ele = document[0].createElement('script');

// 给script标签添加src属性值

ele.src = url + queryString;

window[cbName] = function(data){

callback(data);

document[0].body.removeChild(ele);

};

// 添加到body尾部

document[0].body.appendChild(ele);

}

使用方法:

$jsonp('http://api.douban.com/v2/movie/in_theaters',{

'count':1

},function(data){

document.getElementsByTagName('body')[0].innerHTML = JSON.stringify(data);

})html结构:

完整代码:

jsonp欢迎大家提意见

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值