本文详细介绍了使用Ajax和JSONP实现跨域请求的方法。通过实例演示了如何在服务器端设置允许跨域，以及客户端如何发起跨域请求并处理响应数据。
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>
扫一扫
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
