Ajax jsonp 跨域实例

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

内容简介：Ajax jsonp 跨域实例

欢迎大家关注我的其他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的跨域功能！

看例子

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

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

码农书籍

Parsing Techniques

Dick Grune、Ceriel J.H. Jacobs / Springer / 2010-2-12 / USD 109.00

This second edition of Grune and Jacobs' brilliant work presents new developments and discoveries that have been made in the field. Parsing, also referred to as syntax analysis, has been and continues......一起来看看《Parsing Techniques》这本书的介绍吧!

码农工具

在线进制转换器

各进制数互转换器

RGB CMYK 转换工具

RGB CMYK 互转工具