ajax-跨域

最新推荐文章于 2023-12-19 10:52:22 发布

李子怡

最新推荐文章于 2023-12-19 10:52:22 发布

阅读量313

点赞数 1

分类专栏： PHP

本文链接：https://blog.csdn.net/Ciel_Y/article/details/104433512

版权

PHP 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ajax只能获取同源地址下的数据，是实现不了访问别人服务器的数据的。

同源：协议相同，域名相同，端口相同。（端口80是可以省略不写的。）

跨域：作用是获取非同源地址下的数据。

不管是ajax，还是跨域，都是为了访问服务器数据。ajax是为了访问自己服务器的数据。跨域是为了访问别人服务器的数据。

跨域的本质-引入外部js文件

举例1：引入test.js，内容：

//定义变量
var str="haha";

script的src属性，不受任何同源策略的限制。

跨域的本质：其实就是服务器返回了一个方法调用，这个方法是我们事先定义好的，而方法中的参数就是我们想要的数据

举例2：得到服务器想传递的数据123

test.js内容如下：

foo("123");//方法调用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript"> 
		function foo(data){
			console.log(data);
		} 
	</script>
	<script type="text/javascript" src="http://www.lisi.com/test.js">
	</script> 
</head>
<body>
</body>
</html>

结果：

跨域的本质-引入外部PHP文件

举例一：

data.php内容：

<?php
	echo "foo('123')";
?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function foo(data){
			console.log(data);
		}
	</script>
	<script type="text/javascript" src="http://www.lisi.com/data.php"></script> /*实现跨域访问*/
	<script type="text/javascript">
		//console.log(str);
	</script>
</head>
<body>
</body>
</html>

结果：

举例二：传入参数来进行判断

data.php内容如下：

<?php
	$city=$_GET["city"];
	if($city=="beijing"){
		echo "foo('北京的天气晴')";
	}else{
		echo "foo('没有查询到天气信息')";
	}
?>

通过下图的city=beijing来传入参数来进行判断

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function foo(data){
			console.log(data);
		}
	</script>
	<script type="text/javascript" src="http://www.lisi.com/data.php?city=beijing">/*实现跨域*/</script> 
	<script type="text/javascript">
		//console.log(str);
	</script>
</head>
<body>
</body>
</html>

结果：

当判断条件改为shanghai时结果：

跨域的本质_动态创建script标签

通过script标签，用script标签的src属性，引入一个外部文件，这个外部文件是不涉及到同源策略的影响的。这个外部文件我们是可以直接使用的。

weather03.html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function foo(data){
			console.log(data);
		}
	</script> 
	<script type="text/javascript">
		window.onload=function(){
			var btn=document.querySelector("#btn");
			btn.onclick=function(){
				var cityName=document.querySelector("#city").value;
				//动态创建script标签，动态制定src属性的值
				var script =document.createElement("script");
				script.src="http://www.lisi.com/data.php?city="+cityName;
                  //在head里写入一个script标签
                  var head=document.querySelector("head");
				head.appendChild(script);
			};
		}; 
	</script>
</head>
<body>
	<h1>天气信息查询</h1>
	<input type="text" id="city" placeholder="请输入城市名称">
	<input type="button" id="btn" value="查询">
</body>
</html>

data.php

<?php
	$city=$_GET["city"];
	if($city=="beijing"){
		echo "foo('北京的天气晴')";
	}else{
		echo "foo('没有查询到天气信息')";
	}
?>

结果：

跨域的本质-动态指定回调函数名称

函数名是固定的foo，这样不方便。通过callback让前端界面决定方法名称。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function foo(data){
			console.log(data);
		}
	</script> 
	<script type="text/javascript">
		window.onload=function(){
			var btn=document.querySelector("#btn");
			btn.onclick=function(){
				var cityName=document.querySelector("#city").value;
				//动态创建script标签，动态制定src属性的值
				var script =document.createElement("script");
				script.src="http://www.lisi.com/data.php?city="+cityName+"&callback=foo";
				var head=document.querySelector("head");
				head.appendChild(script);
			};
		}; 
	</script>
</head>
<body>
	<h1>天气信息查询</h1>
	<input type="text" id="city" placeholder="请输入城市名称">
	<input type="button" id="btn" value="查询">
</body>
</html>

data.php

<?php
	$cbName=$_GET["callback"];
	$city=$_GET["city"];
	if($city=="beijing"){
		echo $cbName."('北京的天气晴')";
	}else{
		echo $cbName."('没有查询到天气信息')";
	}
?>

分析：

增加的那一句话就是 $cbName=$_GET["callback"];

跨域的本质-动态指定回调函数名称window

给window增加属性进行方法定义：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<script type="text/javascript">
		window.onload=function(){
			var btn=document.querySelector("#btn");
			btn.onclick=function(){
				var cityName=document.querySelector("#city").value;
				//动态创建script标签，动态制定src属性的值
				var script =document.createElement("script");
				script.src="http://www.lisi.com/data.php?city="+cityName+"&callback=foo2";
				
				//给window增加一个属性，属性的名称是foo2
				window["foo2"]=function(data){
					console.log(data);
				};
				var head=document.querySelector("head");
				head.appendChild(script);
			};
		}; 
	</script>
</head>
<body>
	<h1>天气信息查询</h1>
	<input type="text" id="city" placeholder="请输入城市名称">
	<input type="button" id="btn" value="查询">
</body>
</html>

data.php

<?php
	$cbName=$_GET["callback"];
	$city=$_GET["city"];
	if($city=="beijing"){
		echo $cbName."('北京的天气晴')";
	}else{
		echo $cbName."('没有查询到天气信息')";
	}
?>

李子怡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
ajax-跨域

ajax只能获取同源地址下的数据，是实现不了访问别人服务器的数据的。同源：协议相同，域名相同，端口相同。（端口80是可以省略不写的。）跨域：作用是获取非同源地址下的数据。不管是ajax，还是跨域，都是为了访问服务器数据。ajax是为了访问自己服务器的数据。跨域是为了访问别人服务器的数据。跨域的本质-引入外部js文件举例1：引入test.js，内容：//定义变量var s...
复制链接

扫一扫

专栏目录