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

ajax解决跨域问题

 作者:chenxing  时间:2016-10-25 17:42  阅读:89  评论:

大家都习惯了用$.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>
    <head>
        <meta charset="UTF-8">
        <title>ajax jsonp异步请求数据接口</title>
        <script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h1 id="h1"></h1>
        <script type="text/javascript">
            $.ajax({
                type:"get",
                url:"http://api.qiusuoweb.com/api.php?m=api1",
                async:true,
                dataType:'jsonp',
                jsonpCallback:'apiCallback',
                success:function(data){
                    document.getElementById('h1').innerHTML = data.name;
                }
            });
        </script>
    </body>
</html>

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

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

/**
 * jsonp跨域测试接口
 */
function api1($data){
    //封装成jsonp格式,注意和ajax jsonpCallback属性值保存一致
    echo '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

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  157

PHP字符串转数组的三种场景

 2018-05-05 01:32  201

PHP如何遍历字符串?

 2018-05-04 00:56  1333

api接口常见的安全问题和解决方案

 2018-05-03 23:20  994

 最新评论

 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例