jsonp跨域问题

什么是跨域？

　　为页面安全考虑，页面中的JavaScript无法访问其服务器上的数据，即‘同源策略’，而跨域是通过某些手段来绕过同源策略限制，实现不同服务器间通信。

什么是jsonp？

　　json是一种轻量级数据交互格式，而jsonp则是json的一种使用模式，通过这种模式实现数据的跨域获取。

如何实现跨域？

　　1）、用script标签

　　2）、用script标签加载资源是没有跨域问题

　　3）、通过jsonp实现ajax跨域请求

注意：jsonp解决跨域时，必须要在script标签中定义一个函数，函数名与接口里后台数据的函数名（参数）相同，不然会出错

方法一：在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情
然后需要时通过动态加载script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行前面定义好的函数，并把数据当做这个函数的参数传进去

demo1案例，请求的数据格式为.txt文件

　　txt文件的内容为：

fn([2,3,4]);

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
		function fn(data){
			console.log(data);
		}
	</script>
	
</head>
<body>
	<button class="btn">ajax请求</button>
	Jsonp:json with padding
		1.script标签
		2.用script标签加载资源是没有跨域问题；
	方法一：	在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情
		然后需要时通过动态加载script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行前面定义好的函数，并把数据当做这个函数的参数传进去
<br>
</body>	
<script>
	$(function(){
		$('.btn').click(function(event) {
			// 当按钮点击时，再去加载资源
			var oScript = document.createElement('script');
			oScript.src = '2.txt';
			document.body.appendChild(oScript);
		});
		</script>
</html>

运行结果为：

点击ajax请求后控制台打印出：

demo2，服务器端数据为getData.php,内容为：

<?php
$arr1 = array('111','2222','3333','444','555');
echo "fn(".json_encode($arr1).");";
?>

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	
	<script>
	
		function fn(res){
			var html = '';
			var oul = document.getElementById('ul1');
			for(var i = 0;i < res.length;i++){
				html +='<li>'+res[i]+'</li>';
			}
			oul.innerHTML = html;
		}
	</script>
	
</head>
<body>
<button id="btn1">按钮1</button>
<ul id="ul1">
</ul>
</body>	
<script>
	$(function(){
		$('#btn1').click(function(event) {
			var myScript = document.createElement('script');
			myScript.src  = 'getData.php';
			document.body.appendChild(myScript);
		});
	});
</script>
</html>

运行结果为：

当点击按钮1时，获取php中的数据，并渲染到页面，结果如下：

demo3，服务器端接口为 data.php,其内容为：

<?php
$t = isset($_GET['t'])?$_GET['t']:'num';
$callback = isset($_GET['callback'])?$_GET['callback']:'fn1';//解决一个接口，在页面中多次调用问题
$arr1 = array('111','2222','3333','4444','5555','66668');
$arr2 = array('acs','bcs','ccs','dcs','ecs','fccs');
if ($t == 'num') {
	$data = json_encode($arr1);
	// echo "fn1(".$data.")";
}else{
	$data = json_encode($arr2);
	// echo "fn2(".$data.")";
}
echo $callback."(".$data.")";
?>

html代码为：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
		function fn1(res){
			var html = '';
			var oul = document.getElementById('ul1');
			for(var i = 0;i < res.length;i++){
				html +='<li>'+res[i]+'</li>';
			}
			oul.innerHTML = html;
		}
		function fn2(res){
			var html = '';
			var oul2 = document.getElementById('ul2');
			for(var i = 0;i < res.length;i++){
				html +='<li>'+res[i]+'</li>';
			}
			oul2.innerHTML = html;
		}
		function fn3(res){
			var html = '';
			var oul3 = document.getElementById('ul3');
			for(var i = 0;i < res.length;i++){
				html +='<li>'+res[i]+'</li>';
			}
			oul3.innerHTML = html;
		}
	</script>
	
</head>
<body>

<button class="btn" >加载数字</button>
<ul id="ul1">
</ul>
<br>
<button id="btn1" >按钮2加载字母</button>
<ul id="ul2">
</ul>
<button id="btn3" >按钮3加载数字</button>
<ul id="ul3">
</ul>
<!-- 页面添加按钮，只需要在script中添加对应的函数即可 -->
</body>	

<script>
	$(function(){
		$('.btn').click(function(event) {
			// 当按钮点击时，再去加载资源
			var oScript = document.createElement('script');
			oScript.src = 'data.php?callback=fn1';
			document.body.appendChild(oScript);
		});
		$('#btn1').click(function(event) {
			var myScript = document.createElement('script');
			myScript.src  = 'data.php?t=str&callback=fn2';
			document.body.appendChild(myScript);
		});
		$('#btn3').click(function(event) {
			var myScript = document.createElement('script');
			myScript.src  = 'data.php?callback=fn3';
			document.body.appendChild(myScript);
		});
	});
</script>
</html>

运行结果：

百度下拉列表实例用到jsonp跨域问题：

接口地址是百度搜索的一个，地址为：https://www.baidu.com/su?wd=d&cd=movie

接口为：

maiov({q:"d",p:false,s:["dnf","地图","dota2","dhl","豆瓣","大众点评"]});

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- <meta charset="UTF-8"> -->
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<style>
		#q{width: 300px;height: 30px;padding: 5px;border: 1px solid #f90;font-size: 18px;}
		#ul1{
			border: 1px solid #f90;
			border-top: none;
			width: 310px;
			margin:  0;
			padding:0;
			display: none;
		}
		.colors{text-decoration: none;color: #000;line-height: 30px;padding: 5px;text-align: left;display: block;/*width: 100%;*/box-sizing: border-box;}
		.colors:hover{
			color: white;
			background: #f90;
		}
	</style>
</head>
<script>
	function maiov(res){
		// console.log(res);
		var oul = document.getElementById('ul1');
		var html = '';
		if (res.s.length) {//表示与服务器连接成功
			oul.style.display = 'block';
			for(var i = 0;i < res.s.length; i++){
				html += '<li><a href="http://suggestion.baidu.com/su?wd='+res.s[i]+'">'+res.s[i]+'</a></li>'
			}
			oul.innerHTML = html;
		}else{
			oul.style.display = 'none';
		}
	}
	$(function () {
		// 获取到所有的元素
		$('#q').keyup(function(event) {
			// 鼠标抬起时，判断value值是否为空
			if ($('#q').val() != '') {
				var oScript = document.createElement('script');
				oScript.src = 'http://suggestion.baidu.com/su?wd='+$('#q').val()+'&cb=maiov';
				$('body').append(oScript);
			}
		});
	});
</script>
<body>
	<!-- 分析接口：用什么方式？ajax还是跨域；不同的接口，有不同的访问格式去处理 -->
	<input type="text" id="q" autocomplete="off">
	<ul id="ul1">
		<li><a class="colors" href="">1111111111</a></li>
		<li><a class="colors" href="">1111111111</a></li>
		
	</ul>
</body>
</html>

　　运行结果为：

参考网址：http://www.php.cn/code/24227.html

posted on 2018-10-06 16:37 婧星阅读(349) 评论(0) 编辑收藏举报

刷新页面返回顶部

jsonp跨域问题

导航

公告