ajax跨域请求:
1、首先在本地建立一个PHPStudy服务器
2、在根目录下建立一个“php”文件夹
3、文件夹里面建立一个p.php文件
4、p.php内容:
<?php
header("Access-Control-Allow-Origin:*");//使用ajax原生请求需要写这一句话,表示此文件允许跨域请求
$data = '{"name":"xiaoming"}';//声明一个data为字符串类型的数据
echo $data;//输出data的值
?>
5、在本地电脑上新建一个index.html文件和jquery.js文件,并引入到页面
6、index.html内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入当前文件夹下的jquery.js -->
<script src="jquery.js"></script>
</head>
<body>
<div>DDDD</div>
<script>
$.getJSON('http://localhost/php/p.php',function(data){//一个json请求,参数第一个为请求的地址,地二个为成功的回调函数
// 此文件的浏览器控制台可以看到通过ajax原生跨域引入的其他服务器及域名下的文件,就是'{"name":"xiaoming"}'
//当然了,那个服务器设置了允许跨域访问的设置才行,就是header("Access-Control-Allow-Origin:*")
console.log(data);
})
</script>
</body>
</html>
ajax虽然可以完成跨域请求,但一般服务器不会设置允许跨域请求的,就是header("Access-Control-Allow-Origin:*");会降低安全性的
所以我们要学习jsonp跨域请求
jsonp跨域请求:
1、跟上面的步骤3一样,建立一个p1.php文件.
2、p1.php内容:
<?php
$callback = $_GET['callback'];//jsonp回调参数,必需
$data = '{"msg":"这是jsonp请求的数据","success":"true"}';
echo $callback."($data)";//返回格式,必需
?>
3、在本地电脑上新建一个index1.html文件和jquery.js文件,并引入到页面
4、index1.html内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入当前文件夹下的jquery.js -->
<script src="jquery.js"></script>
</head>
<body>
<div>DDDD</div>
<script>
$.ajax({
url:'http://localhost/php/p1.php',
dataType:'jsonp',
//jsonp:"callback"//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
success:function(data){
// 此文件的浏览器控制台可以看到通过jsonp跨域引入的其他服务器及域名下的文件,
//就是{msg: "这是jsonp请求的数据", success: "true"}
//当然了,那个服务器不用设置允许跨域的设置,不用设置header("Access-Control-Allow-Origin:*")
console.log(data);
}
})
</script>
</body>
</html>