这里就给您详细讲解跨域方法中的jsonp和php。
一、JSONP跨域
概述
JSONP是一种简单的跨域方式，它通过动态添加<script>标签，利用浏览器允许跨域请求资源的特性获取外域的数据，并将数据作为参数传递给回调函数，从而实现跨域获取数据。
实现步骤
- 在页面中定义一个全局函数，作为回调函数。
- 通过动态创建
<script>标签的方式向外域url发起请求，请求url的格式为：外域url?callback=全局函数名。 - 外域将数据通过回调函数的参数传递回来。
- 在全局函数中对外部数据进行操作。
示例
假设我们本地的host为localhost:5000，跨域的外域为example.com，下面是一个简单的跨域获取数据的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP跨域示例</title>
</head>
<body>
<script type="text/javascript">
// 定义回调函数
function handleResponse(data) {
console.log(data);
}
// 动态创建<script>标签，发起跨域请求
var script = document.createElement('script');
script.src = 'http://example.com?callback=handleResponse';
document.head.appendChild(script);
</script>
</body>
</html>
该示例中，我们创建了一个全局函数handleResponse作为回调函数，并动态创建<script>标签从外域能够跨域访问的url发送请求，url的格式为http://example.com?callback=handleResponse。外域将数据通过handleResponse函数的参数传回来，我们就可以在该函数中对数据进行操作了。
二、PHP跨域
概述
PHP跨域的主要原理也是利用浏览器允许跨域访问图片、样式、脚本等资源的特性，通过相应头设置实现跨域访问。
实现步骤
- 在服务端定义一个接口，该接口返回指定的数据。
- 在服务端设置响应头，允许浏览器跨域访问该接口的数据。
- 在客户端通过ajax请求该接口获取数据。
示例
以获取example.com域名下的数据为例，服务端的代码如下：
<?php
header('Access-Control-Allow-Origin: *');
header('Content-type: application/json;charset=utf-8');
$data = array(
'name' => '张三',
'age' => 20,
'email' => 'zhangsan@example.com'
);
// 将数据转成json格式返回，也可以使用其他格式
echo json_encode($data);
?>
在客户端，我们可以使用ajax请求该接口获取数据，代码如下：
$.ajax({
url: 'http://example.com/api.php',
type: 'GET',
success: function (data) {
console.log(data);
}
});
该示例中，我们通过ajax请求获取PHP接口返回的数据，服务端设置了相应头Access-Control-Allow-Origin: *，该头信息表示允许任意来源访问该接口，从而实现了跨域访问数据。客户端可以对获取到的数据进行操作。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：两种简单的跨域方法(jsonp、php) - Python技术站
微信扫一扫 
支付宝扫一扫 