专注WEB开发 分享经验,沉淀知识

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的应用。

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

除特别注明外,本站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 http://www.qiusuoweb.com/17.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

PHP一个接口如何批量请求第三方接口

 2022-08-08 22:47  233

Mac目录如何快速返回上一级?

 2022-07-21 17:27  432

Mac目录和终端如何快速切换

 2022-07-21 17:11  167

phpstorm一个窗口打开多个项目?

 2022-07-20 17:15  234

 最新评论

 诚心: 09月29日 23:01
学到了
来源: 如何一次性推送百万级别的消息
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天
 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里