JavaScript中模拟实现jsonp

JavaScript中模拟实现jsonp,需要遵循以下步骤:

1. 创建一个script标签

在DOM中创建一个script标签,并设置其src属性为需要跨域请求的URL,同时还需要设置一个callback参数,作为后端接口返回数据的回调函数名。

const script = document.createElement('script');
script.src = 'http://example.com/data?callback=getData';
document.body.appendChild(script);

2. 定义回调函数

定义一个全局函数,函数名与callback参数的值相同,该函数用于接收后端返回的数据,并处理它。在处理结束之后,可以根据需要将数据传递给其他函数进行展示或其他操作。

function getData(data) {
  // 处理数据
  console.log(data);
}

3. 后端返回数据

后端需要根据callback参数的值,在返回的数据中调用该函数,并传入需要返回的数据,此时会自动执行callback函数的代码。需要注意返回的数据格式为JS代码。

getData({
  name: '张三',
  age: 18,
  gender: '男'
});

示例1

例如,我们需要请求豆瓣电影API,获取热映电影的数据,并展示在页面上。首先,我们创建一个script标签,定义好回调函数,并通过callback参数传递给后端:

const script = document.createElement('script');
script.src = 'https://api.douban.com/v2/movie/in_theaters?callback=handleData';
document.body.appendChild(script);

function handleData(data) {
  console.log(data);
}

然后,后端根据callback参数调用该函数,并将数据格式化为JS代码后返回给前端:

handleData({
  "count": 20,
  "start": 0,
  "total": 39,
  "subjects": [
    {
      "rating": {
        "max": 10,
        "average": 7.4,
        "stars": "40",
        "min": 0
      },
      "genres": [
        "动作",
        "科幻"
      ],
      "title": "蜘蛛侠:英雄远征",
      "casts": [
        {
          "avatars": {
            "small": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1360451470.99.webp",
            "large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1360451470.99.webp",
            "medium": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1360451470.99.webp"
          },
          "name_en": "Tom Holland",
          "name": "汤姆·赫兰德",
          "alt": "https://movie.douban.com/celebrity/1339225/",
          "id": "1339225"
        },
        {
          "avatars": {
            "small": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1507059488.68.webp",
            "large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1507059488.68.webp",
            "medium": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1507059488.68.webp"
          },
          "name_en": "Zendaya",
          "name": "赞达亚",
          "alt": "https://movie.douban.com/celebrity/1378051/",
          "id": "1378051"
        }
      ],
      "collect_count": 151249,
      "original_title": "Spider-Man: Far from Home",
      "subtype": "movie",
      "directors": [
        {
          "avatars": {
            "small": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1433934340.49.webp",
            "large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1433934340.49.webp",
            "medium": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1433934340.49.webp"
          },
          "name_en": "Jon Watts",
          "name": "乔恩·沃茨",
          "alt": "https://movie.douban.com/celebrity/1330053/",
          "id": "1330053"
        }
      ],
      "year": "2019",
      "images": {
        "small": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2558261313.webp",
        "large": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2558261313.webp",
        "medium": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2558261313.webp"
      },
      "alt": "https://movie.douban.com/subject/27032767/",
      "id": "27032767"
    },
    ...
  ],
  "title": "正在上映的电影-北京"
});

最后,在处理数据的函数中,我们可以根据需要将数据展示在页面上。

示例2

在一些极端情况下,由于后端不支持返回callback函数,或者返回的数据不规范,这时候需要手动写一个callback函数来处理。

例如,我们需要请求某个站点的数据,该站点不支持jsonp调用,只能通过Ajax跨域请求,但是这个网站的CORS规则没有设置,无法进行跨域请求。这时候,我们可以手动声明一个全局函数,在请求数据之前,先通过script标签把该函数注入到页面中,请求数据返回之后,再通过该函数进行处理。

window.handleData = function(data) {
  console.log(data);
}

const script = document.createElement('script');
script.innerHTML = `handleData({name: 'abc'})`;
document.body.appendChild(script);

这里需要声明一个全局的handleData函数,并将其注入到页面中。创建一个script标签,同时将注入的代码也放到script标签内部。这样,就可以在请求数据返回之后,通过该全局函数进行数据的处理和展示。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript中模拟实现jsonp - Python技术站

(1)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 【谷歌插件开发】获取当前网站COOKIE并上报HTTP-API

    一 背景 由于本人每天需要登录网站查看数据并分析统计汇总,而每次机械式地搜索和简单计算,十分繁琐。我们可以写个定时任务,每天根据cookie获取网站数据并遍历统计。 脚本得以成功执行的关键是需要获取到COOKIE 故,写了个谷歌插件用来上报COOKIE 二 代码总目录 三 上代码 manifest.json { “manifest_version”: 3, …

    JavaScript 2023年4月25日
    00
  • 小程序云开发初探(小结)

    小程序云开发初探(小结) 本文主要介绍小程序云开发的基础知识和使用方法。小程序云开发是微信小程序提供的一项新功能,可以通过云数据库、云存储和云函数来快速搭建一个完整的小程序。 1. 云开发环境配置 要使用小程序云开发,需要在微信公众平台上创建小程序,并在小程序后台开启云开发。 注册微信小程序账号 登录小程序后台,点击“设置”-“开发设置”,在云开发中开启开发…

    JavaScript 2023年6月10日
    00
  • ASP.NET中XML转JSON的方法实例

    下面我将为您详细讲解 ASP.NET 中 XML 转 JSON 的方法实例。 一、XML转JSON的方法介绍 XML 和 JSON 是 Web 应用程序中常用的两种数据格式,但是它们之间的转换并不是十分方便。在 ASP.NET 中,可以使用 JsonConvert 类库实现 XML 转 JSON 的功能。 JsonConvert 是一个类库,它提供了一系列静…

    JavaScript 2023年6月11日
    00
  • JavaScript实现Base64编码转换

    实现Base64编码转换可以通过JavaScript的btoa()和atob()函数来实现。 btoa()函数 btoa()函数用于将字符串转换为Base64编码格式。该函数的语法如下: let encodedData = window.btoa(stringToEncode); 其中,encodedData为转换后的Base64编码字符串,stringTo…

    JavaScript 2023年5月20日
    00
  • IE8 原生JSON支持

    IE8 原生 JSON 支持是指 Internet Explorer 8(IE8)浏览器中自带了对 JSON 数据格式的支持。在 IE8 之前的版本中,如果要使用 JSON 格式的数据,需要引入第三方库来解析或者手写解析函数。而在 IE8 中,开发者可以直接使用浏览器提供的全局对象 JSON 来解析和序列化 JSON 格式的数据,无需引入其他库。 为了使用 …

    JavaScript 2023年5月27日
    00
  • 详解js界面跳转与值传递

    关于“详解js界面跳转与值传递”的攻略,我们可以分为以下几个部分: 1. 基本的页面跳转方式 在Web应用开发中,实现页面跳转是一个非常常见的需求。在JavaScript中,我们可以使用location对象来实现页面跳转。下面是示例代码: location.href = "http://www.example.com"; // 使用hre…

    JavaScript 2023年6月11日
    00
  • J2ME 程序开发注意要点

    J2ME(Java 2 Micro Edition)是针对移动设备如手机等嵌入式设备的一种Java平台。在进行J2ME程序开发时,我们需要注意以下几点: 1. 设备兼容性 不同的手机品牌和型号可能支持的Java平台版本、硬件和软件资源存在差异,因此,我们需要考虑设备兼容性。在进行J2ME程序开发之前,需要对目标设备的开发环境进行调查,以确定使用哪种版本的Ja…

    JavaScript 2023年5月28日
    00
  • Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例

    标题:Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例 本文介绍Python cookbook中关于针对任意多的分隔符拆分字符串的操作示例,涉及到字符串的分割、切片、正则表达式等多种方法。 示例一:使用字符串的split方法进行分割操作 在Python中,可以使用字符串的split方法对字符串进行分隔,拆分为指定分隔符的多个…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部