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

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

内容简介: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>

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

查看所有标签

猜你喜欢:

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

琢石成器

琢石成器

罗云彬 / 电子工业出版社 / 2009-6 / 89.00元

Windows环境下32位汇编语言是一种全新的编程语言。它使用与C++语言相同的API接口,不仅可以开发出大型的软件,而且是了解操作系统运行细节的最佳方式。 本书从编写应用程序的角度,从“Hello,World!”这个简单的例子开始到编写多线程、注册表和网络通信等复杂的程序,通过70多个实例逐步深入Win32汇编语言编程的方方面面。 本书作者罗云彬拥有十余年汇编语言编程经验,是汇编编程......一起来看看 《琢石成器》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具