JSONP

最新推荐文章于 2024-08-22 11:40:28 发布

徐普通

最新推荐文章于 2024-08-22 11:40:28 发布

阅读量352

点赞数

分类专栏： biji 文章标签： JS JSONP

本文链接：https://blog.csdn.net/weixin_44602489/article/details/88725489

版权

biji 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

上一篇我们讲到AJAX，我们先复习下 AJAX

来帮助我们更好的认识什么是 JSON P

AJAX复习下

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script>
			window.onload = function(){
				var oBtn = document.getElementById("btn1");//拿到按钮
				oBtn.onclick = function(){//点击事件
					var xhr = new XMLHttpRequest();//声明，不兼容了，代码还简单。
					xhr.open("get", "1.txt", true);//方式，url，布尔
					xhr.send();
					xhr.onreadystatechange = function(){
						if(xhr.readyState == 4){//五部
							alert(xhr.responseText);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<button id = 'btn1'>下载</button>
	</body>
</html>

上面的代码是自己电脑的服务器自己请求，但如果我们在 xhr.open() 的url里写别的大网站的链接的话，例如http://api.douban.com/v2/movie/top250。

那么就会弹出已拦截跨源请求：同源策略禁止读取位于 http://api.douban.com/v2/movie/top250 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）。

这里我们就可以引出JSONP了

但依然有个问题，看过我上篇文章的会发现为什么我用AJAX请求了非自己浏览器的数据为什么没报错。

因为我上篇请求的是PHP页面的，我还用PHP抓了数据，所以依然是同服务器。

	ajax默认是同源策略
	同源： 同协议  同IP/域名  同端口号

我们要是想跨域，就要这么做：

	跨源需求：
			1、php文件中转站
			2、可以重设请求头，允许跨源（不建议）
			3、JSONP跨域

跨源

首先最简单的跨域，在我们学css的时候就已经接触了，那就是

src！！！

<img src="http://img.9ku.com/geshoutuji/singertuji/4/48334/48334_9.jpg" alt="">

这个不就是最简单的跨源么

下面我们讲下JSONP

JSONP跨源

先理解一个概念虽然我们把js代码写在script标签里，但它本质上仍然是一个标签，所以我们能给他添加属性，我们可以直接在代码里给他添加要做的事。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script>	 	
		 	function funcName(data){
				alert("拿到要下载的数据：" + data);
			}
		</script>
		<script>		
			window.onload = function(){
				var oBtn = document.getElementById("btn1");

				oBtn.onclick = function(){
					var oScript = document.createElement("script");
					oScript.src = '1.txt';//添加在这里
					document.body.appendChild(oScript);//插节点
				}
			}
		</script>
	</head>
	<body>
		<button id = 'btn1'>下载</button>
	</body>
</html>

那么我们写个案例：

百度的搜索智能提示

只是套个框，这里用到了百度的搜索，毕竟内核我这个水平还是差太多。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			#q{width: 300px; height: 30px; padding: 5px; border: 1px solid #f90; font-size: 16px;}
			#ul1{border: 1px solid #f90; width: 310px; margin: 0px; padding: 0px; display: none;}
			#ul1 li{list-style: none}
			#ul1 li a{line-height: 30px; padding: 5px; display: block; text-decoration: none; color: black}
			#ul1 li a:hover{background-color: #f90; color: white}
			#div1{margin: 200px auto; width: 300px}
		</style>
		<script>
			function download(data){
				var oUl = document.getElementById("ul1");
				oUl.style.display = 'block';
				//清空ul，不然累加，所有搜到的都会持续显示，影响客户体验。
				oUl.innerHTML = '';
				var arr = data.s;

				for(var i = 0; i < arr.length; i++){
					var oLi = document.createElement("li");
					var oA = document.createElement("a");
					oA.innerHTML = arr[i];
					oA.target = "_blank";//打开一个新的页面
					oA.href = "https://www.baidu.com/s?wd=" + arr[i];//这不就是请求的那个
					oLi.appendChild(oA);//插这个节点
					oUl.appendChild(oLi);
				}
			}
		</script>
		<script>
			window.onload = function(){
				var oQ = document.getElementById("q");
				var oUl = document.getElementById("ul1");
				oQ.onkeyup = function(){
					if(!this.value){
						oUl.style.display = 'none';
					}else{
						//加载搜索的数据
						var oScript = document.createElement("script");
						oScript.src = `http://suggestion.baidu.com/su?wd=${this.value}&cb=download`;//跨源
						document.body.appendChild(oScript);//最后再把创建的插进去
					}
				}
			}

			/*
				http://suggestion.baidu.com/su?wd=查询的内容&cb=回调函数
				https://www.baidu.com/s?wd=" + arr[i];
			*/
		</script>
	</head>
	<body>
		<div id = 'div1'>
			<input type="text" id = 'q' />
			<ul id = 'ul1'>
				<!-- <li><a href="#">百度</a></li>
				<li><a href="#">百度</a></li>
				<li><a href="#">百度</a></li> -->
			</ul>
		</div>
	</body>
</html>