JavaScript学习 -- jsonp跨域请求

这篇具有很好参考价值的文章主要介绍了JavaScript学习 -- jsonp跨域请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在现代 Web 应用程序的开发中,由于跨域访问的限制,经常需要在不同的域之间传输 JSON 数据。但是,浏览器强制遵循同源策略,限制了浏览器从一个域向另一个域请求数据的能力。为此,我们可以使用 JSONP(JSON with Padding)技术,它通过动态创建 script 标签实现了跨域传输 JSON 数据。

JSONP 实现了一个简单但非正式的协议,在客户端发出一个 GET 请求时,服务端返回一些 JavaScript 代码,使客户端能够利用这些代码执行回调。JSONP 非常适合用于构建跨域的 JSON 数据请求,但不能用于 POST 请求等其他类型的 Ajax 请求。本文将介绍如何在JavaScript中使用JSONP,并提供一个实际的例子。

实现JSONP

JSONP 可以通过以下代码实现:

function jsonp(url, callbackName, callback) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callbackName}`;

  window[callbackName] = (data) => {
    callback(data);
    document.body.removeChild(script);
  };

  document.body.appendChild(script);
}

我们可以看到,这个函数有三个参数:

  • url: JSONP 数据请求的 URL。

  • callbackName: 在服务端接受回调函数名的参数名。

  • callback: 接收 JSONP 数据的回调函数。

这个函数会动态地创建一个新的 script 标签,为获取 JSONP 数据请求 URL 添加一个查询参数 callback=callbackName。回调函数的名字将保留在查询参数中,以便服务端能够读取。

然后,在全局命名空间中,我们暴露这个名为 callbackName 的回调函数,并在脚本标签的 load 事件处理函数上执行这个函数。核心代码如下:

window[callbackName] = (data) => {
    callback(data);
    document.body.removeChild(script);
};

最后,我们再将新创建的 script 标签添加到文档中。因为该代码是通过 <script> 标签上定义的回调函数来执行的,所以这个 JSONP 请求的响应将被直接注入到我们的 JavaScript 中。

完整的代码如下:

function jsonp(url, callbackName, callback) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callbackName}`;

  window[callbackName] = (data) => {
    callback(data);
    document.body.removeChild(script);
  };

  document.body.appendChild(script);
}

jsonp('https://api.github.com/users/octocat', 'myCallback', (data) => {
  console.log(data);
});

在这个例子中,我们向 GitHub API 发送了一个 JSONP 请求,当响应返回时,在控制台打印响应数据。此外,我们利用服务端接受 callback=myCallback 参数,来创建了用于响应数据的回调函数。

JSONP 的优缺点

JSONP 的优点:

  • 浏览器支持良好,能在绝大多数环境下正常使用。

  • 不需要 Ajax 请求,无需 XMLHttpRequest 对象,不需要进行跨域 AJAX 的额外工作。

JSONP 的缺点:

  • 安全性问题。由于是在全局作用域上执行代码,所以恶意攻击者可以通过 JSONP 某些特定的接口来进行 CSRF(跨站请求伪造)。因此,我们需要在服务端进行一些针对性的安全策略。

  • 只支持 GET 请求,不能支持 POST 等其他类型的 AJAX 请求。

  • 只支持文本请求,不能传输二进制图像、JSON、XML 等类型的文件。

总结

JSONP 是一个使用非常广泛的跨域请求技术。通过简单的回调的方式,能方便地实现从不同域名的服务端动态地获得 JSON 数据。虽然使用起来比较方便,但也存在某些限制。JSONP 体现了一种传统 JavaScript 方式,如果不需要传输敏感数据或处理安全要求比较高的场景,我们仍然可以使用此技术。文章来源地址https://www.toymoban.com/news/detail-602116.html

到了这里,关于JavaScript学习 -- jsonp跨域请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML+CSS+JS 学习笔记(三)———Javascript(中)

    🌱博客主页:大寄一场. 🌱系列专栏:前端 🌱往期回顾:HTML+CSS+JS 学习笔记(三)———Javascript(上) 😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注 目录  JavaScript中的函数 函数的定义和调用 函数的定义  函数的调用 嵌套函数  递归函数  变量的作用域 全局变量和局部

    2024年02月06日
    浏览(79)
  • 抓取网络请求Network中的响应JSON数据,不用JS逆向和RPC,python selenium+browser-proxy

    显然上面的红框是加密数据。   下面正式开始 首先要检查电脑是否安装了JDK8,高版本的好像不行,如果没有安装,则需要进行安装。这里不介绍了。下面下载两个东西: (1)python包的安装:pip3 install browsermob-proxy (2)组件下载地址:https://github.com/lightbody/browsermob-proxy/r

    2024年02月15日
    浏览(61)
  • JS-27 前端数据请求方式;HTTP协议的解析;JavaScript XHR、Fetch的数据请求与响应函数;前端文件上传XHR、Fetch;安装浏览器插件FeHelper

    早期的网页都是通过后端渲染来完成的,即服务器端渲染(SSR,server side render): 客户端发出请求 - 服务端接收请求并返回相应HTML文档 - 页面刷新,客户端加载新的HTML文档; 服务器端渲染的缺点: 当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数

    2024年02月16日
    浏览(62)
  • [前端系列第3弹]JS入门教程:从零开始学习JavaScript

    本文将带领大家,从零开始学习JavaScript,fighting~ 目录 一、JavaScript简介 二、变量和数据类型 三、注释和分号 四、算术运算符 五、表达式和语句 六、代码块和作用域 七、函数(最重要)          JavaScript(简称JS)是一种运行在浏览器中的脚本语言,它可以让网页变得

    2024年02月13日
    浏览(58)
  • 【js&vue】联合gtp仿写一个简单的vue框架,以此深度学习JavaScript

    lifecycle.js 注解: this.$options.beforeMount.call(this);与 this.$options.beforeMount();有什么区别: call(this)  的作用是将当前对象( this )作为参数传递给  beforeMount  方法,使得在  beforeMount  方法内部可以通过  this  访问到当前对象的上下文 直接调用了  beforeMount  方法,没有指定上下

    2024年02月09日
    浏览(53)
  • Python之JavaScript逆向系列——1、URL——http与https

    目录 Python之JavaScript逆向系列——1、URL——http与https 前言 环境准备 正文 http与https的协议是什么? http与https的访问端口号区别 在js逆向中http与https访问的区别 大家好,本系列文章主要为大家提供的价值方向是网络信息获取,自动化的提取、收集、下载和记录互联网上的信息

    2024年02月03日
    浏览(32)
  • jsonp解决跨域

    1、Ajax直接请求普通文件存在跨域无权限访问的问题,不管是静态页面、动态页面、web服务,只要是跨域请求,一律不准。 2、不过我们发现,web页面调用js文件则不受跨域的影响(不仅如此,我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力,比如script、img、

    2024年02月16日
    浏览(40)
  • axios、跨域与JSONP、防抖和节流

    Axios 是专注于 网络数据请求 的库。 相比于原生的 XMLHttpRequest 对象,axios 简单易用 。 相比于 jQuery,axios 更加 轻量化 ,只专注于网络数据请求。 axios.get(\\\'url\\\', { params: { /*参数*/ } }).then(callback) 例如: axios.post(\\\'url\\\', { /*参数*/ }).then(callback) 例如: 例如: 如果两个页面的 协议

    2024年02月08日
    浏览(39)
  • Javascript 中发出 HTTP 请求

    要在 JavaScript 中发出 HTTP 请求,您可以使用 XMLHttpRequest 对象或 fetch() 函数。 下面是使用 XMLHttpRequest 发出 GET 请求的示例: 下面是使用 fetch() 发出 GET 请求的示例: 两个示例都会向指定的 URL 发出 GET 请求,并将响应记录到控制台。 fetch() 示例使用 Promises,这是处理 JavaScript

    2024年02月12日
    浏览(34)
  • arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题

    一、配置java_jdk以及tomcat arcgis for javascript api 部署到本地服务器,可以是 iis ,也可以是 tomcat ,我这里是部署到tomcat,所以就 介绍一下tomcat上部署的步骤 。 如果电脑上有本地服务器的,可以跳过这一章,直接从第二章开始看 下载arcgis for javascript API 要部署到tomcat,咱得有tomcat

    2024年02月07日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包