关于jsonp的理解。利用 百度“联想搜索”接口

news2024/11/28 19:03:24

什么是 回调函数?

在 JavaScript 中,回调函数是指将一个函数作为参数传递给另一个函数,以在某些操作完成后通知调用者。当操作完成时,被调用的函数(即回调函数)将被调用,以执行某些指定的操作或返回一些数据。回调函数通常被用来处理异步操作,如定时器、Ajax 请求、事件处理器等。

什么是 JSONP 

JSONP(JSON with Padding)是一种通过在页面中 动态创建 <script> 标签,以实现跨域请求数据的技术。它是一种基于 回调函数的技术,它可以绕过浏览器的同源策略,使得页面可以请求来自不同域名的数据。

在使用 JSONP 技术时,需要在页面中 动态创建一个 <script> 标签,并 将请求的 URL 包装在一个回调函数中。服务器在返回数据时,将数据作为回调函数参数返回,这样浏览器就可以直接执行该函数,并将数据作为函数的参数进行处理。

JSONP 的优点是它可以绕过浏览器的同源策略,可以请求来自不同域名的数据,而不会因为跨域而受到限制。缺点是它只支持 GET 请求,并且请求的数据需要由服务器来控制和返回,因此它的灵活性和安全性相对较低。此外,由于 JSONP 依赖于回调函数,在处理复杂的请求时,可能会导致代码难以维护和调试。

能通过JSONP获取数据的接口 需要有什么条件?

  1. 支持 回调函数:JSONP 的原理是通过在页面中动态创建 <script> 标签来请求数据,因此接口返回的数据必须以 JavaScript 函数的形式返回,这个函数名一般是通过 URL 参数传递的。

  2. 跨域请求:由于浏览器的同源策略限制,一般情况下只能在同域名、同协议、同端口下进行 AJAX 请求。而 JSONP 利用了动态创建 <script> 标签不受同源策略的限制,因此可以实现跨域请求。但是,需要注意的是 JSONP 也有安全性问题,因为它依赖于服务端返回的 JavaScript 代码,因此需要确保接口的可信度。

总之,JSONP 只适用于特定的接口,而不是适用于所有请求文件。如果接口不支持回调函数或者跨域请求,那么就不能使用 JSONP 技术。

基础就这些,,,进入正题:

先上百度接口 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=

wd 为搜索关键词,

cb 比较特殊,是 提前为 回调函数 定义好的 缩写,作为查询字符串的 键值。此时 直接返回自定义函数名 fn。

 若 不使用 cb 作为 回调函数的 键名,比如设定为 callBack,此时返回的是 挂载在window上的baidu对象中的sug方法。(如下),

我对script标签src请求接口,并引入js资源的理解:

通过此种方式等同于直接引入一个js模块(同cdn引入第三方库),该文件的js代码相当于直接插入到当前文件,当然可以执行其中的代码。

接口分析:目前接口中是一个 执行语句。调用了一个函数,(自定义函数fn、或者是window.baidu对象中的sug方法),给该函数 传递 了一个 对象 作为 实参。也就是说,通过src直接在当前文件中插入了 一个执行语句(携带有实参的函数)。

重点是,需要在当前文件中提前 声明 该函数 以备通过src引入执行语句后 立即执行fn、或者是window.baidu对象中的sug方法(抛出实参,或进一步加工数据)

若 script标签 还没有返回 接口提供的 js执行语句,该函数不会被执行。也就是说,在 渲染data 之前,加工数据的执行语句 会一直 等待执行。。。。

//针对于cb回调:

//声明 回调函数 fn
      
function fn(data) {
    console.log(data.s);
}
//针对于 callBack:

//声明 回调函数(与返回函数相对应,window.baidu对象的sug方法)

window.baidu = {
    sug: function (data) {
        console.log(data.s);
    }
}

下面是 主要代码:

let searchEle = document.getElementById('search');
searchEle.addEventListener('input', function () {
    scriptFn(this.value, 'fn');
});

function scriptFn(value, callBack) {
    // append()无法将字符串解析为dom节点,使用append添加节点,不能使用将script标签放入``反义字符串中
    let scriptEle = document.createElement('script');
    scriptEle.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=' + callBack;
    document.body.append(scriptEle);
};

console.log(data.s) 打印得到的数据:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/470733.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ajax的简单使用

目录 1、ajax概述 2、模拟ajax 3、Jquery实现ajax &#xff08;1&#xff09;通用开发步骤 &#xff08;2&#xff09;示例 注册用户名重复性验证 &#xff08;3&#xff09;示例 ajax解析json数据 &#xff08;4&#xff09;实现细节 4、axios实现ajax 5、ajax发送PUT…

西门子安装和配置

一、已安装 V16&#xff0c;检查软件正常 1.判断西门子软件是否正常工作&#xff0c;检查软件图标&#xff0c;如下图。 2.如果软件图标不存在&#xff0c;检查Windows服务是否存在&#xff0c;打开方法如下图&#xff1a; 3.检查西门子的服务&#xff0c;共16个服务&#xff…

万维网服务

~ 在AppSrv上搭建网站服务器 ~ 将访问HTTP://www.chinaskills.com的http的请求重定向到https://chinaskills.com站点 ~ 网站内容设置为“该页面为www.chinaskills.com测试页” ~ 将当前web根目录设置为d:\wwwroot 目录 ~ 启用windows身份验证&#xff0c;只有通过身份验证的…

如何在比特币系统内创造人工生命

信息来源&#xff1a;coingeek.com 自2015年以来&#xff0c;关于比特币能否进行复杂计算以及比特币是否“图灵完备”的争论一直在持续。不幸的是&#xff0c;现在存在着一种流传甚广的谬论&#xff0c;有人说比特币并非图灵完备的&#xff0c;它不能像以太坊区块链那样进行复杂…

【Node.JS 数据库篇】Sequelize 的用法与mysql的关系

文章目录 一、Sequlize是Node.JS中ORM实现二、Sequelize 执行基础的CRUD三、Sequelize 执行复杂的CRUD1. 指定字段attributes2. 触发数据库事务3. LEFT JOIN 联表关系4. INNER JOIN 联表关系5. 嵌套查询 四、Sequlize常用方法和参数1. findAll2. count3. findByPk4. findOne5. …

【策略设计模式详解】C/Java/JS/Go/Python/TS不同语言实现

简介 策略模式&#xff08;Strategy Pattern&#xff09;属于行为型设计模式。将每一个算法封装到具有共同接口的独立类中&#xff0c;根据需要来绑定策略&#xff0c;使得具体实现和策略解耦。 当你想使用对象中各种不同的算法变体&#xff0c;使用if...else 所带来的复杂和…

增强型PID-自适应-前馈-神经网络控制研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【Linux】入门介绍

&#x1f331;博客主页&#xff1a;大寄一场. &#x1f331;系列专栏&#xff1a;Linux &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注​ 目录 前言 Linux背景介绍 1.发展史 UNIX发展的历史 Linux发展历史 2. 开源 3. 官网 4. 企业应用现状 5. 发行版…

装饰者模式

采用组合而非继承的手法&#xff0c;Decorator模式实现了在运行时动态扩展对象功能的能力&#xff0c;可以根据需要扩展功能。 Decorator类在接口上表现为is-a Component的继承关系&#xff0c;即Decorator类继承了Component类的所有接口。但在实现上又表现为has-a Component的…

打印流~~

文章目录 打印流PrintStreamPrintWriter追加操作输出语句的重定向 Properties使用properties把键值对信息存入到属性文件中去使用properties在文件中取键值对信息 IO框架(了解) 打印流 作用&#xff1a;打印流可以实现方便、高效的打印数据到文件中去。打印流一般是指&#xff…

【Linux】2.1 环境基础开发工具使用——yum

什么是yum Linux 软件包管理器——yum yum(Yellow dog Updater, Modified)是Linux下非常常用的一种包管理器. 主要应用在Fedora, RedHat, Centos等发行版上. yum 的使用 卸载&#xff1a; yum -y(直接卸载) remove [xxx] 查找&#xff1a; yum list | grep [xxx] 软件包名称:…

这才是 SpringBoot 统一登录鉴权、异常处理、数据格式 的正确姿势

本篇将要学习 Spring Boot 统一功能处理模块&#xff0c;这也是 AOP 的实战环节 用户登录权限的校验实现接口 HandlerInterceptor WebMvcConfigurer 异常处理使用注解 RestControllerAdvice ExceptionHandler 数据格式返回使用注解 ControllerAdvice 并且实现接口 Response…

Hive拉链表实现

拉链表 定义:用来记录历史变化,相比每天存储全量数据,可大幅减少数据冗余,可以基于历史变化,统计分析历史变化信息使用场景: 用于记录维度变化场景,记录维度变化,根据维度变化记录,统计聚合,加成生成不同时期历史指标 Hive 拉链表实现 实现原理 首次(T1: 2023-04-01) 同步业…

MATLAB-Lingo求解线性规划问题-奶制品2

奶制品的生产销售计划&#xff0c;给定条件不变 为了增加工厂的获利&#xff0c;开发了奶制品的深加工技术&#xff1a;用2小时和3元加工费&#xff0c;可将1kgA1加工成0.8kg高级奶制品B1&#xff0c;也可将1kgA2加工成0.75kg高级奶制品B2&#xff0c;每千克B1能获利44元&#…

ABI Research产业研究:ZiFiSense如何革新物流货物及运输包装追踪

“文章源自前沿科技研究机构ABI Research产业研究&#xff0c;重点介绍了ZETA LPWA协议开发公司纵行科技在业务发展、M-FSK调制技术以及ZETag云标签系列产品在物流货物追踪与包装管理等方面的应用分析&#xff0c;还分享了纵行科技ZETA技术在商业市场和生态系统方面的发展情况。…

用扩展方法来实现EventTrigger中事件的异步等待

一、什么是扩展方法&#xff1f; 扩展方法是一种C#语言提供的功能&#xff0c;允许我们向现有类型添加新的方法&#xff0c;而无需修改类型的源代码。扩展方法的优缺点如下&#xff1a; 二、它有什么优点&#xff1f; 1、不需要修改源类型的代码&#xff1a;使用扩展方法可以…

工具-Snipaste与ScreenToGif 生产力工具,对截图进行勾画操作,并可将截图贴至电脑任意界面;快捷动态截图成gif

文章目录 1、演示1.1 snipaste1.2 ScreenToGif 2、操作2.1 snipaste2.2 ScreenToGif 1、演示 1.1 snipaste 1.2 ScreenToGif 2、操作 2.1 snipaste 进入官网&#xff0c;可根据系统进行下载 https://zh.snipaste.com/ 傻瓜式安装成功后&#xff0c;电脑的右下角有个小图标&a…

兰林:科技赋能健康产业 助力乡村振兴建设

万民健康创始人 万民智养中医创始人 万民星农CEO兰林 党建引领谋发展 &#xff0c; 旗帜下乡促振兴 。 乡村振兴&#xff0c;健康先行。自党的十八大以来&#xff0c;国家卫健委贯彻落实“以基层为重点”的党的卫生与健康工作方针&#xff0c;推动医疗卫生工作重心下移、资源下…

Springboot +Flowable,通过代码绘制流程图并设置高亮

一.简介 通过代码绘制一张流程图&#xff0c;并设置成高亮。 首先先来看一下绘制出来的效果图&#xff0c;截图如下&#xff1a; 已经执行的节点和连线用红色标记出来&#xff0c;大致上就是这么一个效果。 二.怎么实现 将一个流程图绘制成图片&#xff0c;相关的 API 在…

倾斜摄影超大场景的三维模型的顶层合并的轻量化处理技术

倾斜摄影超大场景的三维模型的顶层合并的轻量化处理技术 倾斜摄影超大场景的三维模型的顶层合并需要进行轻量化处理&#xff0c;以减小数据量和提高数据的传输和展示性能。以下是几种常用的轻量化处理技术&#xff1a; 1、网格简化&#xff1a;对三角面片数量过多的模型进行网…