Ajax access Control Allow Origin实现跨域访问用法

栏目: Json · 发布时间: 6年前

内容简介：Ajax access Control Allow Origin实现跨域访问用法

欢迎大家关注我的其他Github博客和简书，互相交流！

1.什么是jsonp：

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

2.JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

3.如何使用JSONP？

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

下面是我自己做的一个简单的demo。实现的是306关键字搜索功能。采用的就是jsonp的跨域功能！

看例子

Ajax access Control Allow Origin实现跨域访问用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>推荐搜索</title>
</head>
<body>
    <p>推荐搜索</p>
    <input type="text" id="val" name ="wd" >
    <input type="button" id="dian" value="搜索">
    <ul></ul>
<script>
    function abc(res) {
        var wds = res['result'];
        for(var i =0,str=''; i<wds.length; i++) {
            str = str +  '<li>' + wds[i].word + '</li>';
        }
        document.getElementsByTagName('ul')[0].innerHTML = str;
    }

    document.getElementsByName('wd')[0].oninput = function () {
        var url = 'http://sug.so.360.cn/suggest?callback=abc&encodein=utf-8&encodeout=utf-8&format=json&word=' + this.value;
        var sc = document.createElement('script');
        sc.src = url;
        var hd = document.getElementsByTagName('head')[0];
        hd.appendChild(sc);
    }
    </script>

</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

网站运维技术与实践

饶琛琳 / 电子工业出版社 / 2014-3 / 69.00元

网站运维工作，一向以内容繁杂、覆盖面广著称。《网站运维技术与实践》选取日常工作涉及的监测调优、日志分析、集群规划、自动化部署、存储和数据库等方面，力图深入阐述各项工作的技术要点及协议原理，并介绍相关开源产品的实践经验。在技术之外，作者也分享了一些关于高效工作及个人成长方面的心得。《网站运维技术与实践》适合Linux 系统管理员、中大型网站运维工程师及技术负责人、DevOps 爱好者阅读。同......一起来看看《网站运维技术与实践》这本书的介绍吧!

码农工具