JavaScript Web编程中的数据交互
2021-06-237.8k 阅读
数据交互基础概念
什么是数据交互
在JavaScript Web编程的范畴内，数据交互指的是在网页的不同部分（如前端与后端、不同的前端组件之间）传递和交换数据的过程。这种交互是构建动态、交互式Web应用程序的核心。例如，当用户在表单中输入信息并提交时，数据从前端发送到后端服务器进行处理，然后服务器可能返回相关的处理结果，这就是一个典型的数据交互场景。
数据交互的重要性
- 增强用户体验：通过实时的数据交互，网页能够根据用户的操作即时做出响应。比如，在搜索框中输入关键字后，网页立即显示相关的搜索结果，而无需用户手动刷新页面，极大地提升了用户的操作流畅性和满意度。
- 实现复杂功能：许多现代Web应用，如在线购物平台、社交媒体网站等，都依赖大量的数据交互。以在线购物为例，用户添加商品到购物车、查询订单状态等操作，都涉及前端与后端服务器之间的数据交互，这些交互使得复杂的业务逻辑得以实现。
- 数据的动态更新：数据交互允许网页上的数据实时更新。例如，股票交易网站能够实时获取最新的股票价格数据并展示给用户，确保用户看到的信息是最新的。
前端与后端的数据交互
常见的数据交互方式
- AJAX（Asynchronous JavaScript and XML）
- 原理：AJAX是一种在无需重新加载整个网页的情况下，能够与服务器进行异步数据交换的技术。它利用浏览器内置的XMLHttpRequest对象（在现代JavaScript中，也常用fetch API替代，但其底层原理类似）来向服务器发送请求并接收响应。
- 代码示例：
// 使用XMLHttpRequest对象
function makeAjaxRequest() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
}
makeAjaxRequest();
- 解释：首先创建一个XMLHttpRequest对象，使用
open方法指定请求的类型（GET、POST等）、请求的URL以及是否异步处理。onreadystatechange事件处理程序在请求状态改变时触发，当readyState为4（表示请求已完成）且status为200（表示请求成功）时，将服务器返回的响应文本解析为JSON格式的数据并在控制台打印。
- fetch API
- 原理：fetch API是现代JavaScript中用于进行网络请求的更简洁的方式，它基于Promise。fetch返回一个Promise对象，该对象在请求完成时被解决（resolved）或被拒绝（rejected）。
- 代码示例：
async function makeFetchRequest() {
try {
const response = await fetch('https://example.com/api/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
makeFetchRequest();
- 解释：
fetch函数发送一个GET请求到指定的URL。await关键字用于等待Promise解决，即等待响应返回。如果响应状态不是ok（如404、500等状态码），则抛出一个错误。response.json()方法将响应解析为JSON格式的数据，同样使用await等待解析完成，最后将数据打印到控制台。如果在整个过程中出现错误，通过catch块捕获并在控制台打印错误信息。
- Axios
- 原理：Axios是一个基于Promise的HTTP客户端，可用于浏览器和Node.js环境。它提供了更简洁、易用的API，并且支持拦截请求和响应、处理错误等功能。
- 代码示例：
import axios from 'axios';
async function makeAxiosRequest() {
try {
const response = await axios.get('https://example.com/api/data');
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
}
makeAxiosRequest();
- 解释：首先导入Axios库，然后使用
axios.get方法发送一个GET请求到指定的URL。await等待请求的Promise解决，获取到响应后，将响应中的数据（response.data）打印到控制台。如果请求过程中出现错误，通过catch块捕获并在控制台打印错误信息。
数据格式
- JSON（JavaScript Object Notation）
- 定义：JSON是一种轻量级的数据交换格式，它以文本形式表示结构化数据，易于人阅读和编写，也易于机器解析和生成。在JavaScript中，JSON数据与JavaScript对象字面量非常相似。
- 示例：
// JavaScript对象
const user = {
name: 'John Doe',
age: 30,
email: 'johndoe@example.com'
};
// 将JavaScript对象转换为JSON字符串
const jsonUser = JSON.stringify(user);
console.log(jsonUser);
// 将JSON字符串转换回JavaScript对象
const parsedUser = JSON.parse(jsonUser);
console.log(parsedUser.name);
- 解释：首先定义一个JavaScript对象
user，然后使用JSON.stringify方法将其转换为JSON字符串并打印。接着使用JSON.parse方法将JSON字符串转换回JavaScript对象，并访问其name属性并打印。在Web数据交互中，JSON是最常用的数据格式，因为它在不同的编程语言和平台之间具有良好的兼容性。
- XML（eXtensible Markup Language）
- 定义：XML是一种标记语言，用于存储和传输数据。它使用标签来定义数据的结构和内容。虽然在现代Web开发中JSON更为常用，但XML仍然在一些特定场景（如某些企业级应用、RSS feeds等）中使用。
- 示例：
<?xml version="1.0" encoding="UTF - 8"?>
<user>
<name>John Doe</name>
<age>30</age>
<email>johndoe@example.com</email>
</user>
- 解析XML在JavaScript中的代码示例：
function parseXml(xmlStr) {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, 'text/xml');
const name = xmlDoc.getElementsByTagName('name')[0].textContent;
const age = xmlDoc.getElementsByTagName('age')[0].textContent;
const email = xmlDoc.getElementsByTagName('email')[0].textContent;
return { name, age, email };
}
const xmlStr = `<?xml version="1.0" encoding="UTF - 8"?>
<user>
<name>John Doe</name>
<age>30</age>
<email>johndoe@example.com</email>
</user>`;
const user = parseXml(xmlStr);
console.log(user.name);
- 解释：首先定义一个
parseXml函数，使用DOMParser将XML字符串解析为XML文档对象。然后通过getElementsByTagName方法获取相应标签的文本内容，并返回一个包含用户信息的对象。最后定义一个XML字符串并调用parseXml函数解析，打印出用户的名字。
请求方法
- GET
- 用途：GET请求用于从服务器获取数据。它通常用于获取资源，如获取一篇文章、获取用户信息等。请求的数据会附加在URL的查询字符串中。
- 示例：
async function getRequest() {
const response = await fetch('https://example.com/api/users?name=John');
const data = await response.json();
console.log(data);
}
getRequest();
- 解释：上述代码使用fetch发送一个GET请求到
https://example.com/api/users，并在URL的查询字符串中添加了name=John的参数。服务器可以根据这个参数返回名字为John的用户数据。获取到响应后，将其解析为JSON格式并打印。
- POST
- 用途：POST请求用于向服务器提交数据，通常用于创建新资源。例如，用户注册、提交表单数据等场景。与GET不同，POST请求的数据不会显示在URL中，而是放在请求体中。
- 代码示例：
async function postRequest() {
const userData = {
name: 'Jane Doe',
age: 25,
email: 'janedoe@example.com'
};
const response = await fetch('https://example.com/api/users', {
method: 'POST',
headers: {
'Content - Type': 'application/json'
},
body: JSON.stringify(userData)
});
const data = await response.json();
console.log(data);
}
postRequest();
- 解释：首先定义一个包含用户数据的对象
userData。然后使用fetch发送一个POST请求到https://example.com/api/users。设置method为POST，headers中指定数据类型为application/json，并将userData对象转换为JSON字符串后放在body中。服务器接收到请求后可以根据这些数据创建一个新用户，并返回相应的结果，最后将响应解析为JSON格式并打印。
- PUT
- 用途：PUT请求用于更新服务器上的资源。它通常用于替换整个资源，如果资源不存在，则可能创建一个新资源。
- 代码示例：
async function putRequest() {
const updatedUserData = {
age: 26
};
const response = await fetch('https://example.com/api/users/1', {
method: 'PUT',
headers: {
'Content - Type': 'application/json'
},
body: JSON.stringify(updatedUserData)
});
const data = await response.json();
console.log(data);
}
putRequest();
- 解释：这里定义了一个包含更新后用户年龄信息的对象
updatedUserData。使用fetch发送一个PUT请求到https://example.com/api/users/1，表示要更新ID为1的用户数据。同样设置method为PUT，headers和body，服务器根据请求更新相应的用户数据并返回结果，最后将响应解析为JSON格式并打印。
- DELETE
- 用途：DELETE请求用于删除服务器上的资源。例如，删除一篇文章、删除一个用户等。
- 代码示例：
async function deleteRequest() {
const response = await fetch('https://example.com/api/users/1', {
method: 'DELETE'
});
const data = await response.json();
console.log(data);
}
deleteRequest();
- 解释：此代码使用fetch发送一个DELETE请求到
https://example.com/api/users/1，表示要删除ID为1的用户。服务器接收到请求后删除相应用户并返回结果，最后将响应解析为JSON格式并打印。
前端组件间的数据交互
父子组件间的数据交互
- 父组件向子组件传递数据
- 在React中的实现：
- 原理：在React中，父组件通过属性（props）向子组件传递数据。子组件可以通过接收这些props来使用父组件传递的数据。
- 代码示例：
import React from'react';
// 子组件
const ChildComponent = ({ message }) => {
return <p>{message}</p>;
};
// 父组件
const ParentComponent = () => {
const data = 'Hello from parent';
return <ChildComponent message={data} />;
};
export default ParentComponent;
- 解释：首先定义一个
ChildComponent，它接收一个名为message的props，并将其显示在<p>标签中。然后在ParentComponent中，定义一个字符串data，并将其作为message属性传递给ChildComponent。这样，子组件就可以显示父组件传递的数据。
- 子组件向父组件传递数据
- 在React中的实现：
- 原理：子组件通过调用父组件传递过来的回调函数，并将数据作为参数传递给该回调函数，从而实现向父组件传递数据。
- 代码示例：
import React, { useState } from'react';
// 子组件
const ChildComponent = ({ onDataChange }) => {
const handleClick = () => {
const data = 'Data from child';
onDataChange(data);
};
return <button onClick={handleClick}>Send data to parent</button>;
};
// 父组件
const ParentComponent = () => {
const [receivedData, setReceivedData] = useState('');
const handleChildData = (data) => {
setReceivedData(data);
};
return (
<div>
<ChildComponent onDataChange={handleChildData} />
<p>{receivedData}</p>
</div>
);
};
export default ParentComponent;
- 解释：在
ChildComponent中，定义了一个按钮，当按钮点击时，调用handleClick函数，该函数定义了要传递给父组件的数据，并调用父组件传递过来的onDataChange回调函数，将数据作为参数传递。在ParentComponent中，使用useState钩子来管理接收到的数据receivedData，并定义了handleChildData回调函数，用于更新receivedData。最后将handleChildData函数作为onDataChange属性传递给ChildComponent，并在页面上显示接收到的数据。
非父子组件间的数据交互
- 使用事件总线（Event Bus）
- 原理：事件总线是一种发布 - 订阅模式的实现，它允许不同组件之间通过事件进行通信。组件可以订阅特定的事件，当其他组件发布该事件时，订阅组件会收到通知并执行相应的回调函数。
- 代码示例（简单实现）：
const eventBus = {
events: {},
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(callback);
},
emit(eventName, data) {
if (this.events[eventName]) {
this.events[eventName].forEach(callback => callback(data));
}
}
};
// 组件A
const componentA = () => {
const data = 'Data from component A';
eventBus.emit('data - event', data);
};
// 组件B
const componentB = () => {
eventBus.on('data - event', (data) => {
console.log('Received data in component B:', data);
});
};
componentB();
componentA();
- 解释：首先定义一个
eventBus对象，它有on和emit方法。on方法用于订阅事件，将回调函数添加到对应事件名的数组中。emit方法用于发布事件，遍历并执行对应事件名数组中的所有回调函数，并传递数据。在componentA中，发布一个名为data - event的事件，并传递数据。在componentB中，订阅data - event事件，并在回调函数中打印接收到的数据。
- 使用状态管理库（如Redux或MobX）
- 以Redux为例：
- 原理：Redux使用单一的状态树来管理应用的状态，所有组件都可以从这个状态树中读取数据，并且通过派发（dispatch）动作（action）来修改状态。不同组件之间通过共享状态树进行数据交互。
- 代码示例（简单示例，不包含完整的Redux配置）：
// 定义一个action
const ADD_DATA = 'ADD_DATA';
const addData = (data) => ({
type: ADD_DATA,
payload: data
});
// 定义reducer
const initialState = {
sharedData: ''
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case ADD_DATA:
return {
...state,
sharedData: action.payload
};
default:
return state;
}
};
// 组件A（向Redux store中添加数据）
const componentA = (store) => {
const data = 'Data from component A';
store.dispatch(addData(data));
};
// 组件B（从Redux store中读取数据）
const componentB = (store) => {
const unsubscribe = store.subscribe(() => {
const state = store.getState();
console.log('Received data in component B:', state.sharedData);
});
return () => unsubscribe();
};
- 解释：首先定义一个
ADD_DATA类型的action，以及对应的addData动作创建函数。然后定义一个reducer，它根据接收到的action来更新状态。在componentA中，通过store.dispatch派发addData动作，将数据添加到Redux store中。在componentB中，使用store.subscribe订阅状态变化，当状态变化时，获取最新的状态并打印其中的sharedData。最后返回一个取消订阅的函数，以避免内存泄漏。
数据交互中的安全性
防止XSS（Cross - Site Scripting）攻击
- XSS攻击原理：XSS攻击是一种常见的Web安全漏洞，攻击者通过在网页中注入恶意脚本，当用户访问该网页时，这些恶意脚本会在用户的浏览器中执行，从而窃取用户的敏感信息（如Cookie、会话令牌等）或进行其他恶意操作。例如，攻击者可能在一个评论框中输入一段恶意的JavaScript代码，如果网站没有对输入进行正确的过滤和转义，这段代码就可能在其他用户查看该评论时执行。
- 防范措施：
- 输入验证和过滤：在前端和后端都对用户输入的数据进行严格的验证和过滤。例如，只允许特定格式的输入（如邮箱格式、电话号码格式等），并过滤掉任何可能包含脚本的字符。在JavaScript中，可以使用正则表达式进行验证。
const emailRegex = /^[a-zA - Z0 - 9_.+-]+@[a-zA - Z0 - 9 -]+\.[a-zA - Z0 - 9-.]+$/;
function validateEmail(email) {
return emailRegex.test(email);
}
- 输出转义：在将用户输入的数据显示到网页上时，对其进行转义。例如，在React中，使用
dangerouslySetInnerHTML时要特别小心，尽量避免直接使用用户输入的数据。如果必须使用，可以使用DOMPurify库进行转义。
import DOMPurify from 'dompurify';
const userInput = '<script>alert("XSS")</script>';
const safeHtml = DOMPurify.sanitize(userInput);
// 将safeHtml显示到网页上
防止CSRF（Cross - Site Request Forgery）攻击
- CSRF攻击原理：CSRF攻击是攻击者利用用户已登录的会话，在用户不知情的情况下，以用户的名义向目标网站发送恶意请求。例如，用户在已登录银行网站的情况下，访问了一个包含恶意链接的页面，该链接会自动向银行网站发送转账请求，如果银行网站没有防范CSRF攻击，转账请求可能会被成功执行。
- 防范措施：
- 使用CSRF令牌：服务器在生成页面时，为每个用户会话生成一个唯一的CSRF令牌，并将其包含在页面的表单或HTTP头中。当用户提交表单或发送请求时，请求中必须包含这个令牌。服务器在接收到请求时，验证令牌的有效性。在JavaScript中，使用Axios发送请求时，可以在请求头中添加CSRF令牌。
import axios from 'axios';
// 假设从服务器获取到的CSRF令牌
const csrfToken = 'your - csrf - token - here';
axios.defaults.headers.common['X - CSRF - Token'] = csrfToken;
- 验证来源：服务器可以验证请求的来源，确保请求来自合法的网站。可以通过检查
Origin或Referer头来实现，但要注意这些头可能被伪造，所以这只是一种辅助的防范手段。
数据加密与传输安全
- 数据加密：在数据交互过程中，对敏感数据进行加密可以防止数据在传输过程中被窃取或篡改。例如，使用对称加密算法（如AES）或非对称加密算法（如RSA）。在JavaScript中，可以使用
crypto - js库进行AES加密。
import CryptoJS from 'crypto - js';
const plaintext = '敏感信息';
const key = CryptoJS.enc.Utf8.parse('16 - byte - key - here');
const iv = CryptoJS.enc.Utf8.parse('16 - byte - iv - here');
const ciphertext = CryptoJS.AES.encrypt(plaintext, key, { iv: iv });
console.log(ciphertext.toString());
- 传输安全：使用HTTPS协议进行数据传输，HTTPS通过SSL/TLS协议对数据进行加密，确保数据在传输过程中的安全性。在部署Web应用时，应确保服务器配置了有效的SSL证书，以启用HTTPS。
通过以上对JavaScript Web编程中数据交互的各个方面的深入探讨，包括基础概念、前端与后端及前端组件间的数据交互方式、数据格式、请求方法以及安全性等内容，开发者能够更好地构建安全、高效且功能丰富的Web应用程序。