简述jsonp跨域实例

关于ajax跨域请求问题

首先我们需要两个域名，也就是两台机器，这里我使用本机和本地虚拟机进行测试。

1.我本地的地址是localhost，作为客户端。

2.我的虚拟机地址是192.168.254.128，作为服务端。

3.进行测试。

客户端代码

jsonp.php

<script>
$(function() {
$.ajax({
url:'http://192.168.254.128/index.php',
type:'post',
dataType:'json',
success:function(data) {
alert(data[0]);
}
});
});
</script>

服务端代码

index.php

//这里只是构建一个json串
$json_data = '["customername","customername2"]';
echo $json_data;

这样当我在本地访问localhost/jsonp.php的时候就会报错了



因为ajax是不允许我们进行跨域操作的。跨域就是跨越了域名，除了localhost以外的域名都会报错。

那么我们如何解决这个问题呢，这时候就出现了jsonp。下面就使用jsonp对代码进行改造：

客户端代码

jsonp.php

<script>
$(function() {
$.ajax({
url:'http://192.168.254.128/index.php?jsoncallback=?',
type:'post',
dataType:'json',
success:function(data) {
alert(data[0]);
}
});
});
</script>

服务端代码

index.php

<?php
$jsoncallback = htmlspecialchars($_REQUEST['jsoncallback']);
$json_data = '["customername","customername2"]';
eccho $jsoncallback."(".$json_data.")";
?>

这时候在访问localhost/jsonp.php就能够成功的获取数据了。