1.Ajax
我们都知道用ajax可以向另一个地址发送数据请求并处理服务器返回的数据,但发送方和接收方必须是同源地址,也就是不能跨域访问。
如下我们测试用一个ip去访问另一个ip里的ajaxphp.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="js/jquery-3.1.1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://192.168.34.221/ajaxphp.php?id=1",
success : function(data) {
jsonhandle(data);
}
});
});
</script>
</body>
</html>
ajaxphp.php接收请求会返回一个对象,代码如下:
echo '{
"age" : 15,
"name": "John",
}';
我们设想返回成功会传参并执行jsonhandle函数,但实际会出现错误,无法跨域请求。
2.利用script的src
利用script的src属性我们可以访问任何地址不受限制,如下我们访问另一个ip中remote.js文件
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript"
src="http://192.168.34.221/remote.js">
//相当于读取remote.js文件中的内容并拷贝到这个script标签内并执行,相当于jsonhandle({"age" : 15,"name": "John",})
</script>
</body>
</html>
remote.js文件内容如下:
jsonhandle({
"age" : 15,
"name": "John",
})
这时可以正确执行弹出提示框。
下面将代码改进一下:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//这里我们动态创建一个script标签并设置src属性、传递回调函数名字。那么待script添加到文档中后
var url = "http://192.168.34.221/student.php?id=1&callback=jsonhandle";
var obj = $('<script><\/script>');
obj.attr("src",url);
$("body").append(obj);
});
</script>
</body>
</html>
student.php是这样写的:
<?php
$data = array(
'age' => 20,
'name' => '张三',
);
//接收传递过来的回调函数名
$callback = $_GET['callback'];
//返回函数名(参数),这里就是相当于php返回一段js代码:jsonhandle({"age" : 15,"name": "John",})
//json_encode()将php对象转换成字符串
echo $callback."(".json_encode($data).")";
return;
这样也可以成功调用jsonhandle函数并弹出提示框。
3.jQuery提供的使用jsonp方式
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://192.168.34.221/student.php?id=1",
dataType: "jsonp",//返回的数据类型
jsonp:"callback", //请求php的参数名
jsonpCallback: "jsonhandle",//要执行的回调函数
success : function(data) {
alert("age:" + data.age + "name:" + data.name);
}
});
});
</script>
</body>
</html>