ajax解决跨域问题-求索网

ajax解决跨域问题

 作者：chenxing  时间：2016-10-25 17:42  评论：

导
读

大家都习惯了用$.ajax这样的一种方式请求数据，跨域时只要把dateType改为jsonp就能实现，对于正常的ajax请求貌似没有太大的变化。但是这两者实现的原来压根就不是一回事，只是jquery把二者封装在一起。我个人理解jquery之所以要把二者封装在一起目的就是为了让跨域请求像正常的ajax那样使用数据。

ajax跨域分析

最常遇见的跨域方式就是：通过jquery封装的ajax中的jsonp属性去请求数据。

如何应用，通过demo为大家讲解：

1.现在本地大家两个服务器，a.qiusuoweb.com 和 api.qiusuoweb.com（虽然顶级域名是一样的，但这两个是完全不同的独立的二级域名） 2.a.qiusuoweb.com 作为发起请求页面的域：代码如下

<!DOCTYPE html>
<html>
o<head>
o<meta charset="UTF-8">
o<title>ajax jsonp异步请求数据接口</title>
o<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
o</head>
o<body>
o<h1 id="h1"></h1>
o<script type="text/javascript">
o$.ajax({
otype:"get",
ourl:"http://api.qiusuoweb.com/api.php?m=api1",
oasync:true,
odataType:'jsonp',
ojsonpCallback:'apiCallback',
osuccess:function(data){
odocument.getElementById('h1').innerHTML = data.name;
o}
o});
o</script>
o</body>
</html>

3.api.qiusuoweb.com作为接口服务器：代码如下

$m      = isset($_GET['m'])?$_GET['m']:'';
$data = array(
o'url'=> 'www.qiusuoweb.com',
o'name'=> '求索网',
o'time'=> time(),
o'author'=> 'chenxing'
);
if($m){
o$m($data);
}

/**
 * jsonp跨域测试接口
 */
function api1($data){
    //封装成jsonp格式，注意和ajax jsonpCallback属性值保存一致
oecho 'apiCallback' . '(' . json_encode($data) . ')';
}

需要注意的是，如果你手打添加了jsonpCallback这个属性，那边接口那边要callback字符串要和这个属性值保持一致。

这种方式是叫做jsonp请求方式，它是一种非正式的协议（貌似是一句废话，还是在例子中去理解这种jsonp吧）。通过以上demo理解这个jsonp，其特点就是要用一个callback字符将json格式的数据进行封装，然后在前端直接用callback作为函数名，callabck里面的json数据作为函数的参数，函数就可以用这个参数（json数据）来呈现数据或者其他业务逻辑。当然本例callback函数使用没有直接体现，而是在succes中，你可以参照我写的另一篇关于跨域问题的介绍 script实现跨域，那里更能体型这种jsonp的应用。