jsonp 可以跨域，ajax 不可以，ajax 会受到浏览器的同源策略影响，何为同源策略？

同源策略就是，如果 A 网站 想拿 B网站里的资源， 那么 有三个条件， 你得满足才能拿。

　　第一个：域名相同。 (www.baidu.com)

　　第二个：协议相同。 ( http    https )

　　第三个：端口相同。 ( http 默认为 80 ) ( https 默认为 443)

例如百度：https://www.baidu.com/

　　域名为：www.baidu.com

　　协议为：https

　　端口号：443(https协议的，没显示出来，默认就是 443)

那么下面谁可以在百度拿东西呢？

　　1. http://www.baidu.com 　　(协议不同)

　　2. http://www.google.com 　  (域名不同)

　　3. https://www.baidu.com/s?  (可以的)

不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）。

举个例子：

事实证明，具有 src属性的 标签，可以跨域获取文件

下面，利用 jsonp 制作百度联想词：

在百度搜索框，打字，下面出现的下拉列表就是 联想词，先看看，百度的效果

然后找到百度的接口链接：

上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            list-style: none;

        }

        .wra {

            margin: 50px 0 0 100px;

        }

        input {

            width: 440px;

            height: 30px;

        }

        ul {

            display: none;

            width: 440px;

            border: 1px solid #ccc;

        }

        ul li {

            width: 522px;

            color: #000;

            font: 14px arial;

            line-height: 22px;

            padding: 0 8px;

            position: relative;

            cursor: default;

        }

    </style>

</head>

<body>

    <div class="wra">

        <input type="text">

        <ul></ul>

    </div>

    <script>

        var oinput = document.getElementsByTagName('input')[0];

        var body = document.getElementsByTagName('body')[0];

        oinput.oninput = function () { //监听 input 事件。每次触发，我们就发利用  script标签的 src  发送请求

            var oscript = document.createElement('script');

            oscript.src = 'https://www.baidu.com/sugrec?&prod=pc&wd=' + this.value + '&cb=Exhibition'; //拿到百度接口链接， 删除对我们无用的 参数。

                                                              // wd 后面的  是我们的 词  cb 后面 是我们的下面的函数名。注意这里的函数名，要字符串

            body.appendChild(oscript);

            oscript.remove();           // 每次发送完数据后， 把 script标签给删除，不然每发送一次，就 创建一个标签， 等下页面会有很多 script标签

        }

        function Exhibition(data) {

            var g = data.g;

            var str = '';

            var oUl = document.getElementsByTagName('ul')[0];

            if (g) {

                oUl.style.display = 'block';

                g.forEach(function (ele, index) {

                    str += '<li>' + ele.q + '</li>'  //拿到数据  遍历它，然后添加到  li标签

                })

                oUl.innerHTML = str;

            }

        }

    </script>

</body>

</html>

效果图：

网络系列之 jsonp 百度联想词的更多相关文章

  1. Selenium2+python自动化34-获取百度输入联想词

    前言 最近有小伙伴问百度输入后,输入框下方的联想词如何定位到,这个其实难度不大,用前面所讲的元素定位完全可以定位到的. 本篇以百度输入框输入关键字匹配后,打印出联想词汇. 一.定位输入框联想词 1.首 ...

  2. Selenium2+python自动化34-获取百度输入联想词【转载】

    前言 最近有小伙伴问百度输入后,输入框下方的联想词如何定位到,这个其实难度不大,用前面所讲的元素定位完全可以定位到的. 本篇以百度输入框输入关键字匹配后,打印出联想词汇. 一.定位输入框联想词 1.首 ...

  3. python爬行动物集合360联想词搜索

    想法和一些代码引用邸一幕python培训黄哥python爬虫联想词视频,但是太罗嗦.顺便整理,而到现在为止,360不傻.它已演变,用原来的方式,有些bug,这接着说. 正题例如以下: 语言:pytho ...

  4. python爬虫之採集——360联想词W2版本号

    http://blog.csdn.net/recsysml/article/details/30541197,我的这个博文介绍了对应的简单的方法做一个联想词的爬虫,并且还承诺了下面优化: 下一版本号的 ...

  5. Eclipse用法和技巧二十七：定义自己的快速联想词

    某天在调试代码的时候,虽然是android的project还是习惯的输入syso,然后在ALT+/一下.旁边的同事就问了一下,这个log打印输出的tag是什么.接着又问了为什么syso能够智能联想出这 ...

  6. Eclipse使用方法和技巧二十七：定义自己的高速联想词

    某天在调试代码的时候.尽管是android的project还是习惯的输入syso.然后在ALT+/一下. 旁边的同事就问了一下,这个log打印输出的tag是什么. 接着又问了为什么syso可以智能联想 ...

  7. Elasticsearch之联想词示例

    public class LianXiangWord { private static RestClient client; static { client=RestClient.builder(ne ...

  8. 百度敏感词过滤（tp）

    百度智能云网址https://cloud.baidu.com/ 1:打开网址->管理控制台->产品服务->SDK下载>内容审核->phpSDK 2:下载至php目录ser ...

  9. pygame系列_原创百度随心听音乐播放器_完整版

    程序名:PyMusic 解释:pygame+music 之前发布了自己写的小程序:百度随心听音乐播放器的一些效果图 你可以去到这里再次看看效果: pygame系列_百度随心听_完美的UI设计 这个程序 ...

随机推荐

  1. JavaWeb 图书管理系统

    查看更多系统:系统大全,课程设计.毕业设计,请点击这里查看 01 系统简述 图书管理系统就是利用计算机,结合互联网对图书进行结构化.自动化管理的一种软件,来提高对图书的管理效率. 02 系统特点 集成 ...

  2. mysql 必会基础3

    1.limit [偏移量,0表示没偏移,在第一行:1表示偏移一行,在第二行:默认值为0] 需要展现的记录数 分页的应用: int curPage = 2; int pageSize = 10; int ...

  3. 梯度vs Jacobian矩阵vs Hessian矩阵

    梯度向量 定义: 目标函数f为单变量,是关于自变量向量x=(x1,x2,-,xn)T的函数, 单变量函数f对向量x求梯度,结果为一个与向量x同维度的向量,称之为梯度向量: 1. Jacobian 在向 ...

  4. 使用js模拟点击，点击a链接 $("#abc ").click(); 无效的解决方案

    摘要: 问题分析 点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都是点击的A标签中的文字了. 所以要想用JS模拟点击A标签事件,就得先往A标签中的文字添加能被JS捕获的元素,然后再用 ...

  5. 设计模式 | 职责链模式（Chain of responsibility）

    定义: 使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这个对象连城一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 结构:(书中图,侵删) 一个抽象的处理者 若干 ...

  6. Android 教你如何发现 APP 卡顿

    最近部门打算优化下 APP 在低端机上的卡顿情况,既然想优化,就必须获取卡顿情况,那么如何获取卡顿情况就是本文目的. 一般主线程过多的 UI 绘制.大量的 IO 操作或是大量的计算操作占用 CPU,导 ...

  7. 专题一：why redis ?

    一.NoSQL   现在互联网应用其中有两个特点:(1)海量用户(2)不可避免地高并发.常常因为这样,我们网站或者服务器将面临崩溃的风险.而多用户.高并发只是现象,究其根源,罪魁祸首就是关系型数据库, ...

  8. 详解git rebase，让你走上git大神之路

    在之前的文章当中我们介绍了git merge的用法,明白了通过git merge我们可以合并两个分支的改动.这样我们就可以很方便地进行协同开发了,每个人都在自己的分支下开发代码,开发完毕之后再一起合并 ...

  9. .NET CORE QuartzJob定时任务+Windows/Linux部署

    前言 以前总结过一篇基于Quartz+Topshelf+.netcore实现定时任务Windows服务 https://www.cnblogs.com/gt1987/p/11806053.html.回 ...

  10. python实现有趣的数学逻辑程序

    1.无重复数字的三位数 题目:有1.2.3.4个数字, 能组成多少个互不相同且无重复数字的三位数? 都是多少? for i in range(1,5): for j in range(1,5): fo ...