专注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那样使用数据。

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

发布评论

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

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

聊聊国产化

 2024-08-24 15:56  97

内网穿透工具frp配置详情

 2024-07-18 22:30  192

mac在终端复制出现乱码00~ *** 01~

 2024-07-16 20:38  43

php html生成图片

 2024-07-08 20:25  82

scp命令使用说明

 2024-07-06 12:14  113

如何在当前目录打开终端

 2024-07-04 14:54  84

 最新评论

 tradeOff: 08月30日 10:19
在某些领域国产化是一个迫不得已的事儿
来源: 聊聊国产化
 sue: 07月03日 10:24
可以
来源: 微信小程序如何获取单个input值
 流年: 07月02日 11:31
不错的尝试
来源: 博客系统如何用markdown编辑器发布文章
 诚心: 09月29日 23:01
学到了
来源: 如何一次性推送百万级别的消息
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天