网页跨域之jsonp的使用,包含jquery和js实现

最新推荐文章于 2024-04-04 01:31:53 发布

Dailoge

最新推荐文章于 2024-04-04 01:31:53 发布

阅读量476

点赞数 1

分类专栏： Javascript 文章标签： jsonp 跨域 jquery js

本文链接：https://blog.csdn.net/Dailoge/article/details/78608161

版权

Javascript 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

这里就不讲原理了,原理可以参考链接:

http://justcoding.iteye.com/blog/1366102

这篇文章写得非常好,非常有参考价值.

jsonp相比其他跨域方法(其他跨域方法有;window.name,iframe,webSocket等),应该是最好用的,也是用的最多的吧.

直接贴源代码了:这里用的是百度提供的搜索接口:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=web前端

其中wd为搜索的关键字,回调函数的接受参数名是cb

<!DOCTYPE html>
<html>
<head>
	<title>测试jsonp</title>
	<meta charset="utf-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script type="text/javascript">
/*jquery  jsonp请求*/
$(function(){
	$.ajax({
		type:'get',
		url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=web前端',
		dataType:'jsonp',
		jsonp:'cb',//根据服务器参数设置的,百度提供的是cb
		success:function(data){
			var content=document.querySelector('[content]');
			var keyword=document.createElement('h3');
			keyword.innerHTML="关键字为:"+data.q;
			content.appendChild(keyword);
			var ul=document.createElement('ul');
			data.s.forEach(function(item,index,array){
				var li=document.createElement('li');
				li.innerHTML=item;
				ul.appendChild(li);
			});
			content.appendChild(ul);

		}
	});
});
/*原生js jsonp请求*/
function cbSuccess(data){
	console.log(data);
}
window.οnlοad=function(){
	var script=document.createElement('script');
	script.type="text/javascript";
	script.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=web前端&cb=cbSuccess';//cbSuccess为回调函数
	var content=document.querySelector('[content]');
	content.appendChild(script);
}
/*通过对比发现明显原生js更容易实现jsonp,也更容易理解原理*/
</script>
</head>
<body>
        <div content></div>
</body>
</html>

代码均实践过,可以直接拷贝到本地,查看效果.