通过AJAX和JSONP实现HTML跨域数据请求与传输

2025-11-29 18:33:33 分类：ajax 热度：915 评论： 0

通过AJAX和JSONP实现HTML跨域数据请求与传输

本文还有配套的精品资源，点击获取

简介：为了解决Web开发中的跨域问题，HTML可结合AJAX和JSONP技术来接收和发送数据。AJAX允许无刷新更新网页内容，而JSONP提供了一种基于 <script> 标签的跨域数据获取方法。本文详细介绍了这两种技术的概念、工作原理以及如何在跨域请求中应用它们。同时，比较了使用CORS与JSONP的差异，并探讨了它们的应用场景，为开发者在实现跨域数据交互时提供了实用指导。

1. HTML基础和AJAX技术概念

HTML基础

HTML（HyperText Markup Language）是构建网页内容的标准标记语言。它定义了网页的结构，由各种元素（elements）和标签（tags）组成。这些元素通过不同的标签来表示，如段落使用 <p> ，标题使用 <h1> 到 <h6> 等。理解HTML是创建任何网页的基础，其结构通常由 <!DOCTYPE html> 来声明文档类型，紧接着是 <html> ，内部包含 <head> 和 <body> 两个主要部分。 <head> 部分包括了页面的元数据，而 <body> 包含了可见的页面内容。

AJAX技术概念

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。AJAX的核心是 XMLHttpRequest 对象，允许浏览器与服务器异步通信。通过AJAX，Web 应用可以快速地将增量更新呈现在用户界面上，而不需要刷新整个页面，从而提升用户体验。

AJAX技术不仅限于XML，实际上，使用JSON格式进行数据交换更为普遍。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

在接下来的章节中，我们将深入探讨AJAX在现代Web开发中的应用，以及它如何与JSONP配合解决跨域请求的问题。

2. JSONP跨域请求的原理

2.1 JSONP的工作机制

2.1.1 JSONP的基本概念

JSONP（JSON with Padding）是一种古老的跨域数据访问技术，它通过动态创建 <script> 标签，并利用其不受同源策略限制的特性，实现跨域请求数据。尽管CORS已经成为主流的解决方案，但JSONP在一些老旧的系统或特定场景下依然有其用武之地。

JSONP的核心在于利用了 <script> 标签的src属性可以请求外部资源的特性。具体来说，当页面通过JavaScript动态创建一个 <script> 元素，并将跨域的API地址赋给它的src属性后，浏览器会自动发起对该地址的GET请求。服务器接收到请求后，将返回一段函数调用代码，其中包含了JSON格式的数据作为参数。客户端的JavaScript再执行这段函数，实现了数据的“回调”。 

// 客户端创建JSONP请求的示例
function jsonpCallback(data) {
  console.log('Data received:', data);
}

const script = document.createElement('script');
script.src = 'http://example.***/api/data?callback=jsonpCallback';
document.head.appendChild(script);

上述代码中， jsonpCallback 函数是我们预定义的回调函数，用于接收从跨域API返回的数据。当 <script> 标签被添加到文档中，浏览器自动向指定的URL发起请求，并最终执行返回的JSONP脚本。

2.1.2 JSONP如何解决跨域问题

同源策略限制了不同源之间的资源访问，尤其是限制了AJAX请求。而JSONP方法之所以能够绕过这一限制，是因为 <script> 标签的请求并不被认为是跨域请求，因此不受同源策略的限制。服务器端返回的是一个函数调用的JavaScript代码片段，这种返回方式允许执行跨域的脚本内容。

当服务器接收到JSONP请求后，它会检查URL的查询参数中是否存在一个 callback 参数。这个参数的值通常是一个函数名，然后服务器将响应的内容包装在这个函数调用中。例如，如果查询参数 callback=jsonpCallback ，服务器返回的数据可能是这样的： 

jsonpCallback({ "key": "value" });

客户端JavaScript在收到这段代码后，会执行其中的函数调用，此时预定义的 jsonpCallback 函数会被执行，并且传入了服务器返回的JSON对象作为参数。

2.2 JSONP与同源策略

2.2.1 同源策略的定义和限制

同源策略是浏览器安全策略的核心组成部分之一，它规定了网页中的脚本只能访问与该脚本所在的文档同源的资源。所谓同源指的是协议、域名以及端口号三者均相同。例如，如果一个页面的URL为 http://www.example.***/page.html ，那么这个页面的脚本只能访问 http://www.example.*** 域下的资源，而不能访问 http://otherdomain.*** 下的资源。

同源策略的一个主要限制就是AJAX请求，即 XMLHttpRequest 对象只能发送同源请求。这一限制避免了恶意脚本通过跨域请求获取敏感数据，但是它也限制了Web应用之间的正常数据交互。

2.2.2 JSONP如何绕过同源策略

如前所述，JSONP利用了 <script> 标签不受同源策略限制的特性来实现跨域通信。由于 <script> 标签发送的是一个GET请求，而返回的是一段可执行的JavaScript代码，所以这个过程并不符合同源策略对AJAX请求的限制。

浏览器执行这段返回的JavaScript代码时，实际上是执行了一个来自不同源的脚本，而脚本的内容是一个函数调用。这个函数调用由客户端脚本预先定义，所以即使代码来自不同的源，也不会引发安全问题。通过这种方式，服务器能将数据以参数的形式传递给客户端脚本，从而实现了跨域数据交互。

需要注意的是，尽管JSONP能够绕过同源策略，但它只支持GET请求，并且存在一定的安全风险，如XSS攻击，所以现代的开发者更倾向于使用CORS方法。在CORS出现之前，JSONP是主流的跨域解决方案。

3. AJAX跨域请求的CORS实现方法

在现代网络应用中，跨域请求是个常见需求。CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种基于HTTP头的机制，它允许服务器指示哪些源可以访问服务器上的资源。CORS为Web应用提供了一种安全的跨源数据访问方式，这与JSONP利用 <script> 标签的特性来实现跨域请求的方式不同。本章将介绍CORS的工作原理、配置和实现。

3.1 CORS的工作原理

3.1.1 CORS的定义和核心思想

CORS是一种W3C标准，它允许Web应用服务器指定哪些源可以访问资源。核心思想是在服务器响应头中加入 A***ess-Control-Allow-Origin 字段，告诉浏览器允许哪些域名下的页面进行跨域资源访问。如果响应头中缺少这个字段或值不匹配请求的来源，浏览器就会阻止前端JavaScript代码获取响应数据。

3.1.2 CORS请求的类型和处理流程

CORS请求分为简单请求和复杂请求两类。简单请求包括GET、HEAD和POST方法，且Content-Type为 application/x-www-form-urlencoded 、 multipart/form-data 或 text/plain 之一。复杂请求则可能包括PUT或DELETE方法，或自定义的HTTP头等。

  • 简单请求的处理流程：浏览器首先发送预检请求，询问服务器是否允许跨域请求。服务器响应后，浏览器再发送实际的请求。
  • 复杂请求的处理流程：浏览器会先发送一个OPTIONS请求作为预检，服务器响应后，浏览器再决定是否发送实际的请求。

3.2 CORS的配置和实现

3.2.1 服务端如何支持CORS

服务端需要在HTTP响应中添加特定的头部信息来支持CORS。以下是一个设置 A***ess-Control-Allow-Origin 响应头的例子： 

# Python Flask示例代码
from flask import Flask, make_response

app = Flask(__name__)

@app.after_request
def add_cors_headers(response):
    response.headers.add('A***ess-Control-Allow-Origin', 'http://example.***')
    response.headers.add('A***ess-Control-Allow-Headers', 'Content-Type,Authorization')
    response.headers.add('A***ess-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
    return response

# 其他路由和逻辑...

在这个Flask应用中，我们通过 @app.after_request 装饰器添加了一个响应处理器 add_cors_headers ，它会在每个响应中添加CORS相关的头信息。

3.2.2 客户端如何发送CORS请求

客户端的代码不需要特别改变，因为现代浏览器都内置了对CORS的支持。当浏览器检测到跨域请求时，会自动添加必要的HTTP头，并根据服务器响应决定是否允许访问。开发者只需要像平常一样发起Ajax请求即可： 

// 使用jQuery发起CORS请求
$.ajax({
    url: 'https://api.example.***/data',
    method: 'GET',
    dataType: 'json',
    su***ess: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error("Error fetching data: ", error);
    }
});

在这个例子中，jQuery会处理CORS的细节，包括发送预检请求和实际请求。

至此，我们已经介绍了CORS的原理和配置方法。以下是本章节的表格和流程图来帮助更好地理解内容。

表格：CORS请求类型对比

请求类型 描述 示例方法 处理流程
简单请求 不需要预检的请求，通常是GET、HEAD、POST GET 直接发送实际请求，服务器响应
复杂请求 需要预检的请求，如使用PUT、DELETE方法或自定义头 OPTIONS 首先发送预检OPTIONS请求，服务器响应后再根据情况决定是否发送实际请求

mermaid流程图：CORS请求流程 

graph LR
A[发起请求] --> B{是否简单请求?}
B -- 是 --> C[发送实际请求]
C --> D[服务器响应]
D --> E[客户端处理响应]
B -- 否 --> F[发送OPTIONS预检请求]
F --> G[服务器响应预检]
G --> H{服务器是否允许?}
H -- 是 --> C
H -- 否 --> I[请求失败]

通过上述内容，您现在对CORS有了一个全面的认识，从基本的工作原理到具体的配置和使用。这将帮助您在开发中安全地实现跨域资源共享。

4. JSONP跨域请求的实现过程

跨域请求是前端开发中绕不开的一个话题，特别是在涉及前后端分离的项目中。JSONP（JSON with Padding）作为一种传统技术，虽然已被CORS（跨源资源共享）所取代，但在一些老旧的项目和特定场景下仍有其用武之地。本章节将深入探讨JSONP跨域请求的实现过程，并涉及其安全考虑。

4.1 JSONP请求的创建和发送

4.1.1 客户端JavaScript代码实现

JSONP请求的基本原理是在客户端创建一个 <script> 标签，并将其 src 属性指向一个跨域服务器的URL，该URL返回的数据被包裹在函数调用中，使得客户端的JavaScript可以直接执行该函数。

以下是一个典型的JSONP请求的客户端JavaScript实现示例： 

// 定义一个全局的回调函数
function handleResponse(data) {
    console.log('Data from server:', data);
}

// 创建一个script元素
var script = document.createElement('script');

// 设置script的src属性为目标URL，并传递回调函数名
script.src = 'http://example.***/api/data?callback=handleResponse';

// 将script元素添加到body中，请求即开始执行
document.body.appendChild(script);

// 移除script元素，防止重复加载
script.onload = function() {
    document.body.removeChild(script);
};

在这个示例中，我们首先定义了一个回调函数 handleResponse ，该函数将接收从服务器返回的数据。接着，我们创建了一个 <script> 元素，并设置了 src 属性为服务器的URL。这里的关键在于，服务器端必须返回一个符合JSONP格式的响应，例如 handleResponse({"message": "Hello World!"}) 。

4.1.2 服务器端PHP/Node.js代码实现

在服务器端，需要准备接收跨域请求并返回JSONP格式的数据。以下是PHP和Node.js两种语言实现的服务器端代码示例：

PHP服务器端代码： 

<?php
// 获取回调函数名
$callback = $_GET['callback'];
// 准备要返回的数据
$data = array('message' => 'Hello World!');
// JSONP响应格式
$response = "$callback(" . json_encode($data) . ");";

// 设置响应头为application/javascript类型
header('Content-Type: application/javascript');

// 输出JSONP格式的响应
echo $response;
?>

Node.js服务器端代码（使用Express框架）： 

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
    // 获取回调函数名
    const callback = req.query.callback;
    // 准备要返回的数据
    const data = { message: 'Hello World!' };
    // JSONP响应格式
    const response = `${callback}(${JSON.stringify(data)});`;

    // 设置响应头为application/javascript类型
    res.setHeader('Content-Type', 'application/javascript');

    // 输出JSONP格式的响应
    res.send(response);
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

在服务器端代码中，无论使用PHP还是Node.js，核心思路都是接收来自客户端的回调函数名参数，然后将数据进行JSON编码，并将其包裹在回调函数中返回。

4.2 JSONP请求的安全考虑

4.2.1 JSONP请求可能面临的安全风险

虽然JSONP提供了一种简单的方法来实现跨域请求，但其存在潜在的安全风险：

  1. 注入攻击（Callback Hijacking）： 如果服务器端对回调函数名没有进行过滤和验证，恶意用户可以通过构造特定的URL来执行任意的JavaScript代码。
  2. 数据泄露： JSONP响应是公开暴露的，因此不适宜传输敏感数据。
  3. 拒绝服务攻击（DoS）： 攻击者可能发起大量请求，导致服务器资源耗尽。

4.2.2 如何防范JSONP请求的安全问题

为了解决这些安全问题，可以采取以下措施：

  1. 验证回调函数名： 服务器端应当限制回调函数名的格式和长度，避免非法字符和潜在的注入攻击。
  2. 限制请求频率： 对JSONP请求进行频率限制，防止恶意用户发起大量请求导致的资源消耗。
  3. 加密传输： 考虑到JSONP传输数据的不安全性，应尽量避免传输敏感数据，或者采用HTTPS加密通信。

通过这些措施，可以在一定程度上降低JSONP请求的安全风险，确保应用的安全性和数据的机密性。

在下一章节中，我们将对AJAX和JSONP跨域请求进行对比和选择，分析两者的技术差异，并探讨如何根据实际需求选择合适的技术方案。

5. AJAX与JSONP跨域请求的对比和选择

5.1 AJAX与JSONP的技术差异

5.1.1 请求方式的对比

AJAX（Asynchronous JavaScript and XML）和JSONP（JSON with Padding）都是实现跨域数据交互的技术，但它们在请求方式上存在本质的区别。

AJAX基于 XMLHttpRequest 对象，可以发起GET、POST等多种类型的HTTP请求，支持多种数据格式如XML、JSON、Text等，并且可以与服务器进行多次交互。在AJAX请求中，跨域请求被限制是由于浏览器的同源策略，所以需要通过服务器端的CORS（Cross-Origin Resource Sharing）配置来实现跨域。

JSONP则是一种利用 <script> 标签不受同源策略限制的原理来实现跨域请求的技巧。它创建一个 <script> 元素，将其 src 属性指向目标URL，后端服务需要将数据封装在一个回调函数中返回。这种方法虽然简单，但只支持GET请求，且存在安全风险。 

// 使用jQuery创建AJAX请求
$.ajax({
    url: 'https://example.***/data',
    type: 'GET',
    dataType: 'json',
    su***ess: function(data) {
        console.log('Data received:', data);
    },
    error: function(xhr, status, error) {
        console.error('Request failed:', error);
    }
});

// 使用JSONP实现跨域请求
function jsonpCallback(data) {
    console.log('Data from JSONP:', data);
}

var script = document.createElement('script');
script.src = 'https://example.***/data?callback=jsonpCallback';
document.head.appendChild(script);

5.1.2 应用场景的差异

由于技术机制的不同，AJAX和JSONP在应用场景上也有明显的区别。AJAX适合在当前页面中部分更新内容，例如表单验证、动态加载列表等场景。它能够处理的数据量相对较大，且交互性强。

JSONP由于其简单性和兼容性，通常用于简单的跨域数据共享和第三方API的数据调用，比如获取微博、微信等社交平台的公开数据。但由于只支持GET方法和单次请求，它的应用场景比较局限。

5.2 如何根据需求选择合适的技术

5.2.1 选择AJAX还是JSONP的考量因素

在选择AJAX和JSONP时，需要考虑以下几个因素：

  1. 请求类型和数据量 ：需要判断是GET请求还是POST请求，以及需要交换的数据量大小。
  2. 兼容性和性能要求 ：评估不同浏览器的支持情况以及对响应时间的要求。
  3. 安全考虑 ：不同的技术有不同的安全风险，需要评估应用的安全性需求。
  4. 复杂度和开发周期 ：根据项目的紧急程度和开发资源，选择合适的开发复杂度。

5.2.2 实际开发中的应用案例分析

在实际开发中，考虑一个典型的场景，比如一个新闻网站需要从外部API获取最新新闻数据。如果该API提供CORS支持，那么使用AJAX是最合适的选择。但如果是在老旧浏览器环境中，可能没有CORS支持，那么可以考虑使用JSONP来获取数据。 

// 假设存在老旧浏览器环境，使用JSONP获取数据
var script = document.createElement('script');
script.src = 'https://newsapi.org/v1/articles?source=techcrunch&apiKey=YOUR_API_KEY&callback=jsonpCallback';
document.head.appendChild(script);

function jsonpCallback(response) {
    console.log('News data:', response);
}

在上述示例中， jsonpCallback 函数名和 src 属性中的 callback 参数应匹配，以确保从服务端返回的数据能被正确处理。这种方法在低版本IE浏览器中也有良好的支持。

在使用AJAX时，如果后端支持CORS，前端可以通过发送带有正确头部的请求来获取数据。这种方法更为现代，更安全，且支持更多类型的请求。 

// 使用现代浏览器的CORS支持发起AJAX请求
fetch('https://newsapi.org/v1/articles?source=techcrunch&apiKey=YOUR_API_KEY', {
    method: 'GET'
})
.then(response => response.json())
.then(data => console.log('News data:', data))
.catch(error => console.error('Fetch error:', error));

以上代码展示了在支持CORS的现代浏览器环境下使用 fetch 方法发起AJAX请求的过程。这是一个更为安全和简洁的方式，因为 fetch 返回的是Promise对象，可以方便地处理异步请求。

选择AJAX还是JSONP，取决于项目的具体需求和环境条件。AJAX提供了更强的功能和更好的安全性，而JSONP则以其简单性在老旧浏览器中仍有用武之地。

6. AJAX和JSONP的应用场景

在现代Web开发中，AJAX和JSONP是处理跨域请求中两种常见的技术手段。了解它们的应用场景，有助于开发者在实际工作中作出更明智的技术选择。

6.1 AJAX的应用场景

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页内容的技术。它允许浏览器与服务器通信，交换数据，并在无需刷新页面的情况下更新页面。

6.1.1 局部内容更新

AJAX最典型的应用场景之一是实现局部内容更新。举个例子，当用户在社交媒体平台上发表评论时，AJAX可以用来异步提交评论数据到服务器，并将新评论实时渲染在页面上，而无需重新加载整个评论列表或页面。

以下是使用AJAX更新页面局部内容的简单示例代码： 

// 客户端JavaScript代码实现
function updateContent() {
  // 创建AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/path/to/server/data', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 更新页面内容
      document.getElementById('content').innerHTML = xhr.responseText;
    }
  };
  xhr.send(null);
}

// HTML部分
<div id="content">这里是初始内容</div>
<button onclick="updateContent()">点击更新内容</button>

6.1.2 动态数据交互

AJAX的另一个应用场景是动态数据交互，这对于提升用户体验至关重要。例如，用户在搜索框中输入查询词时，可以使用AJAX异步请求后端数据，实时显示预测的搜索结果。

这里展示了一个简单的AJAX动态数据交互的示例： 

// 客户端JavaScript代码实现
function search() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/search?q=' + encodeURI***ponent(this.value), true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 将结果展示在搜索结果区域
      document.getElementById('search-results').innerHTML = xhr.responseText;
    }
  };
  xhr.send(null);
}

// HTML部分
<input type="text" oninput="search()" />
<div id="search-results"></div>

6.2 JSONP的应用场景

JSONP（JSON with Padding）是一种老旧的技术，但在某些情况下，尤其是在支持CORS的浏览器出现之前，它是一种流行的跨域数据交换手段。

6.2.1 跨域数据共享

JSONP允许客户端通过 <script> 标签跨域请求数据。这个方法特别适用于那些仅需要从另一个域获取数据并执行的简单场景。它依赖于动态创建并执行 <script> 标签，是一种用于跨域数据共享的便捷方式。

示例代码展示了一个基本的JSONP数据共享实现： 

// 客户端JavaScript代码实现
function jsonpCallback(response) {
  console.log('Received data:', response);
}

var script = document.createElement('script');
script.src = 'https://otherdomain.***/data?callback=jsonpCallback';
document.body.appendChild(script);

// 服务端PHP代码示例
<?php
// 假设请求中携带了callback参数
$callback = $_GET['callback'];
$data = json_encode(array('message' => '跨域数据共享成功'));
echo "{$callback}({$data})";
?>

6.2.2 第三方API的数据调用

在多种情况下，开发者需要从第三方服务获取数据，例如天气服务、股票信息等。在这种情况下，JSONP可以作为一种有效的技术手段，因为它可以解决跨域问题而不需服务器端设置特别的响应头。

示例代码展示了一个使用JSONP调用第三方API的场景： 

// 客户端JavaScript代码实现
function thirdPartyCallback(response) {
  console.log('Data from third party:', response);
}

var script = document.createElement('script');
script.src = 'https://thirdpartyapi.***/data?callback=thirdPartyCallback';
document.body.appendChild(script);

6.3 跨域请求的最佳实践

在选择跨域请求技术时，开发者需要考虑安全性和性能优化。

6.3.1 安全性和性能优化

使用AJAX时，需要注意避免XSS（跨站脚本攻击）和其他注入风险。而使用JSONP时，应确保请求的合法性，比如验证回调函数名称，以防止安全漏洞。

在性能优化方面，开发者应避免频繁的跨域请求，尤其是在数据交互量大的情况下。合理缓存数据可以显著提升用户体验。

6.3.2 跨域策略的最佳选择和实施

选择跨域请求技术时，应根据实际需求和环境进行权衡。如果服务器支持CORS，那么它应该是首选方案，因为它提供了更强的安全性和灵活性。如果是在不支持CORS的旧版浏览器中工作，那么JSONP可能是较好的选择。

在实施跨域策略时，开发者应确保遵循最佳实践，比如避免不必要的数据暴露和限制跨域请求的来源，以保护应用和用户数据的安全。

通过以上内容，我们详细分析了AJAX和JSONP在不同场景下的应用，并探讨了选择和实施跨域策略的最佳实践。这些知识将有助于开发者在开发过程中做出更加合理的技术决策。

本文还有配套的精品资源，点击获取

简介：为了解决Web开发中的跨域问题，HTML可结合AJAX和JSONP技术来接收和发送数据。AJAX允许无刷新更新网页内容，而JSONP提供了一种基于 <script> 标签的跨域数据获取方法。本文详细介绍了这两种技术的概念、工作原理以及如何在跨域请求中应用它们。同时，比较了使用CORS与JSONP的差异，并探讨了它们的应用场景，为开发者在实现跨域数据交互时提供了实用指导。


本文还有配套的精品资源，点击获取

转载请说明出处内容投诉
CSS教程网 » 通过AJAX和JSONP实现HTML跨域数据请求与传输
星晴

星晴

分享到：

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买