JS JSOP跨域请求实例详解

JS JSOP跨域请求实例详解

什么是跨域请求?

跨域请求是指在一个来源(即域名、端口、协议都相同)的网页中,不能发起对另一个来源的网页的请求。这是由浏览器的同源策略所限制的。

当在一个网页中通过 AJAX、Fetch、WebSocket 等方式向另一个域名(或主机名、端口号、协议)发起请求时,由于安全原因,浏览器会拦截这些请求,而这种被拒绝的请求就称为“跨域请求”。

为什么需要跨域请求?

在 Web 开发中,跨域请求是常见的需求。

例如,站点 A 的前端需要向站点 B 的服务端发起请求获取数据,但由于两个域名不同,因此不能直接发起请求,需要通过跨域方式来实现。此时,就需要使用跨域请求技术。

JSONP 是什么?

JSONP(JSON with Padding)是一种跨域请求方式,通过动态创建 <script> 标签,将返回的数据作为 JS 脚本执行,从而实现跨域请求。

JSONP 的核心原理在于:当前页面动态创建一个 <script> 标签,请求跨域服务器的数据,而接受到返回数据时,则是调用当前页面中预先定义好的函数,将返回数据作为参数传入,进而处理数据。

JSONP 的优点:

  • 不受同源策略的限制,实现跨域请求
  • 兼容性好,在老版本的浏览器、移动端等场景下都有良好的支持
  • 界面友好,用户体验佳

JSONP 的缺点:

  • 安全性问题,存在 XSS 攻击的风险
  • 只支持 GET 方式的请求

JSONP 的实现步骤

  1. 在 HTML 页面中创建一个 <script> 标签,指定请求的地址及需要回调的函数。

```html

```

getData 是服务端提供的接口 URL,callback 是指定需要回调的函数名,handleData 是在自己的 JS 中定义的函数名。

  1. 服务端需要读取 URL 中的 callback 参数,并将数据通过此函数返回。

    javascript
    function getData(req, res) {
    const responseData = { username: 'Alice', age: 18 };
    const callbackName = req.query.callback; // 获取回调函数名
    res.send(`${callbackName}(${JSON.stringify(responseData)})`);
    }

    此处以 Node.js 为例,使用 res.send 方法返回数据。

  2. 客户端实现回调函数。

    javascript
    function handleData(data) {
    console.log(data.username); // 输出 "Alice"
    console.log(data.age); // 输出 18
    }

示例一:使用 JSONP 跨域请求百度搜索结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP 示例</title>
</head>
<body>
  <script>
    function handleData(data) {
      const result = document.querySelector('#result');
      const links = data.g.map(d => `<li><a href="${d.u}">${d.k}</a></li>`).join('');
      result.innerHTML = `<ul>${links}</ul>`;
    }
  </script>
  <div>
    <input id="keyword" type="text" placeholder="请输入关键词">
    <button onclick="search()">搜索</button>
  </div>
  <div id="result"></div>
  <script>
    function search() {
      const keyword = document.querySelector('#keyword').value;
      const url = `https://www.baidu.com/su?wd=${keyword}&cb=handleData`;
      const script = document.createElement('script');
      script.src = url;
      document.body.appendChild(script);
    }
  </script>
</body>
</html>

示例二:使用 JSONP 跨域请求阿凡达数据接口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP 示例</title>
</head>
<body>
  <div>
    <input id="keyword" type="text" placeholder="请输入角色名称">
    <button onclick="search()">搜索</button>
  </div>
  <div id="result"></div>
  <script>
    function handleData(data) {
      const result = document.querySelector('#result');
      const links = data.data.map(d => `<li>${d.name} / ${d.affiliation}</li>`).join('');
      result.innerHTML = `<ul>${links}</ul>`;
    }
  </script>
  <script>
    function search() {
      const keyword = document.querySelector('#keyword').value;
      const url = `https://jsonp.afeld.me/?url=https://www.avatarapi.com/api/v1/characters/search&name=${keyword}&access_token=demo`;
      const script = document.createElement('script');
      script.src = url;
      document.body.appendChild(script);
    }
  </script>
</body>
</html>

以上两个示例演示了使用 JSONP 跨域请求的实现方法。需要注意的是,JSONP 虽然能够实现跨域请求,但也存在一定的安全风险。在前端使用 JSONP 时,应注意数据的合法性和安全性,避免被攻击者利用漏洞进行 XSS 攻击。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS JSOP跨域请求实例详解 - Python技术站

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

相关文章

  • js实现四舍五入完全保留两位小数的方法

    下面就来详细讲解一下“js实现四舍五入完全保留两位小数的方法”的完整攻略。 方案一:toFixed() JavaScript中提供了一个内置方法toFixed(),可以将数字保留指定位数的小数。使用方法如下: const num = 123.456; const fixedNum = num.toFixed(2); console.log(fixedNum)…

    JavaScript 2023年5月28日
    00
  • js通过Date对象实现倒计时动画效果

    下面就是“js通过Date对象实现倒计时动画效果”的完整攻略。 什么是倒计时动画效果? 倒计时动画效果,是指在一定时间内,从一个数字不断递减到另一个数字的动态效果,通常用于日期倒计时、秒杀倒计时等场景。 怎么通过Date对象实现倒计时动画效果? 在JavaScript中,Date对象可以获取当前时间、日期等信息。通过获取该时间的时、分、秒等信息,并将倒计时目…

    JavaScript 2023年5月27日
    00
  • JavaScript 之JS的组成与基本语法

    下面是详细的“JavaScript 之JS的组成与基本语法”攻略: JS的组成与基本语法 JS的组成 在研究JS的基本语法之前,必须了解JavaScript的组成。JavaScript由以下3部分组成: ECMAScript:JavaScript的基础语法部分,包含了核心语言功能和对象。 DOM:Document Object Model,文档对象模型,操作…

    JavaScript 2023年5月17日
    00
  • JavaScript进阶教程(第二课)

    下面是“JavaScript进阶教程(第二课)”的完整攻略: JavaScript进阶教程(第二课) 变量作用域 在JavaScript中,变量的作用域有两种:全局作用域和局部作用域。 全局作用域 全局作用域就是在整个JavaScript程序中可见的作用域,变量在全局作用域中声明时,可以被程序中任何地方读取和修改。 示例代码: var globalVaria…

    JavaScript 2023年5月18日
    00
  • 用js获取元素属性的代码

    获取HTML元素属性是前端开发中常见的操作。使用JavaScript可以轻松地获取元素的属性,我们可以通过以下方式来实现。 1. 通过JavaScipt获取元素属性 我们可以通过JavaScript中的document对象来访问HTML元素,使用属性访问器(.)或者获取属性方法(getAttribute)来获取元素的属性。 1.1 使用属性访问器 使用属性访…

    JavaScript 2023年6月10日
    00
  • JS中用try catch对代码运行的性能影响分析

    JS中的try-catch是用于异常处理的语句。它用于在代码块中捕获发生的异常,并提供适当的处理方式。 然而,try-catch语句并不是一项低成本操作。在代码块中使用try-catch语句将影响代码的性能,因此需要仔细考虑是否使用它。接下来,我将详细讲解如何分析JS中try-catch语句的性能影响。 1. 测试try-catch语句的性能 要测试JS代码…

    JavaScript 2023年5月28日
    00
  • javascript 三种数组复制方法的性能对比

    首先,我们需要了解 Javascript 中有哪些常见的数组复制方法以及它们的性能对比。常见的数组复制方法包括: 使用 slice() 方法复制数组 使用展开运算符 … 进行复制 使用 Array.from() 方法进行复制 接下来,我们将分别介绍这三种方法的具体实现及性能测试。 使用 slice() 方法复制数组 slice() 方法可以从已有的数组中…

    JavaScript 2023年5月27日
    00
  • Vue文件下载进度条的实现过程

    实现Vue文件下载进度条需要了解以下几个步骤: 发送请求并获取相应数据。 获取响应头中的 Content-Length 值和用于标识下载唯一性的 Etag 或者 Last-Modified 等值作为断点续传的 key。 使用 Blob 对象生成 Blob url 并模拟下载。 读取 Blob 数据的进度值,更新 UI 展示进度条。 下面是具体的实现过程: 1…

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