大家都习惯了用$.ajax这样的一种方式请求数据,跨域时只要把dateType改为jsonp就能实现,对于正常的ajax请求貌似没有太大的变化。但是这两者实现的原来压根就不是一回事,只是jquery把二者封装在一起。我个人理解jquery之所以要把二者封装在一起目的就是为了让跨域请求像正常的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的应用。
大家都习惯了用$.ajax这样的一种方式请求数据,跨域时只要把dateType改为jsonp就能实现,对于正常的ajax请求貌似没有太大的变化。但是这两者实现的原来压根就不是一回事,只是jquery把二者封装在一起。我个人理解jquery之所以要把二者封装在一起目的就是为了让跨域请求像正常的ajax那样使用数据。
除特别注明外,本站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/17.html
运营天数
总访问量
文章数量
-
-
-
交流群:157451741
新浪微博:草莽兴
发布评论