您的位置：首页 > 移动开发 > WebAPP

WebApp开发：ajax请求跨域问题的解决

2015-01-07 20:52 337 查看
服务端：PHP

客户端：Andorid, HTML5, jQuery, ajax

现象：本想通过jQuery的ajax功能从服务器取回数据存到手机的缓存里，结果总是错误，后来想到可能是跨域问题，所以查了下jsonp的方案先把流程跑通，明天再完善看看有什么好的方案

服务端：http://www.code-style.com/test/a.php

<?php

//服务端返回JSON数据
$arr=array('name'=>'shujun.li');
$result=json_encode($arr);

//动态执行回调函数
$callback=$_GET['callback'];
echo $callback."($result)";
?>


客户端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listview AutodividersSelector - jQuery Mobile Demos</title>
<script src="js/jquery.js"></script>

<script type="text/javascript">
$.ajax({
url:"http://www.code-style.com/test/a.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
alert(result["name"])
},
timeout:3000
});
</script>
</head>
<body>
</body>
</html>


生成URL : http://www.code-style.com/test/a.php?callback=jQuery1102004144126083701849_1420635061128&_=1420635061129
响应：jQuery1102004144126083701849_1420635061128({"name":"shujun.li"})

JSONP原理解析：

相当于jquery在页面生成一个匿名函数，这个函数可以传入一个JS对象，然后把这个函数的函数名作为URL参数传递给服务器端，服务端吐出的实际上是对这个函数的调用语句，输出到了页面以后会通过eval执行这个调用，这个匿名函数会再次调用我们的success函数，最终这么拿的数据，如果这样的话JSONP无法大规模的传输数据

$.ajax({
url:"http://www.code-style.com/test/a.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success: function(result) {
alert(result["name"])
},
timeout: 3000,
jQuery1102004144126083701849_1420635061128(obj)
{
success(obj);
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航