【Java 进阶篇】Ajax 入门:打开前端异步交互的大门

在这里插入图片描述

欢迎来到前端异步交互的世界!在这篇博客中,我们将深入探讨 Ajax(Asynchronous JavaScript and XML),这是一项能够让你的网页在不刷新的情况下与服务器进行数据交互的技术。无论你是刚刚踏入前端开发的小白,还是有一定经验的开发者,相信通过本文的学习,你将对 Ajax 有更深入的理解。

踏入异步交互的大门

在开始之前,让我们先理解什么是 Ajax。Ajax 并不是一种新的编程语言,而是一种利用现有的技术来创建更好、更快以及更友好用户体验的技术。它的全称是 Asynchronous JavaScript and XML,即异步 JavaScript 和 XML。异步是 Ajax 的核心,它使得页面能够在后台与服务器进行数据交互,无需刷新整个页面。

在早期,Ajax 主要用于获取和发送 XML 格式的数据。然而,随着前端技术的发展,现在我们更常用 JSON(JavaScript Object Notation)格式来进行数据交互,因为 JSON 更轻量且易于处理。

Ajax 的基本原理

Ajax 的基本原理是通过 JavaScript 中的 XMLHttpRequest 对象来与服务器进行通信。这个对象允许浏览器向服务器发送请求并处理响应,而无需刷新整个页面。随着浏览器和前端技术的发展,现在我们更常用 fetch 函数来进行 Ajax 请求。

让我们通过一个简单的例子来了解 Ajax 的基本用法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax 入门</title>
</head>
<body><button id="loadDataButton">加载数据</button><div id="dataContainer"></div><script>document.getElementById('loadDataButton').addEventListener('click', loadData);function loadData() {// 创建一个 XMLHttpRequest 对象const xhr = new XMLHttpRequest();// 配置请求xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);// 注册回调函数,处理响应xhr.onload = function() {if (xhr.status === 200) {// 成功接收到数据,处理响应const data = JSON.parse(xhr.responseText);document.getElementById('dataContainer').innerText = data.title;} else {// 处理请求失败的情况console.error('请求失败:', xhr.statusText);}};// 发送请求xhr.send();}</script>
</body>
</html>

在这个例子中,我们创建了一个按钮和一个用于显示数据的 <div> 元素。当按钮被点击时,loadData 函数会被调用。在这个函数中,我们创建了一个 XMLHttpRequest 对象,配置了一个 GET 请求,并注册了一个回调函数 onload 来处理服务器的响应。最后,我们通过 send 方法发送请求。

这只是 Ajax 的一个基本用法,后面我们会介绍更多高级的用法和工具。

Ajax 请求的类型

Ajax 请求有多种类型,最常见的有两种:GET 和 POST。

GET 请求

GET 请求用于从服务器获取数据。在 Ajax 中,我们可以通过设置 XMLHttpRequest 对象的 open 方法的第一个参数为 'GET' 来发起 GET 请求。

// 示例代码
xhr.open('GET', 'https://api.example.com/data', true);

GET 请求通常用于获取数据,例如从服务器获取一篇文章、一个用户的信息等。

POST 请求

POST 请求用于向服务器发送数据。与 GET 请求不同,POST 请求通常需要在请求体中发送一些数据。在 Ajax 中,我们可以通过设置 XMLHttpRequest 对象的 open 方法的第一个参数为 'POST' 来发起 POST 请求。

// 示例代码
xhr.open('POST', 'https://api.example.com/submitData', true);

POST 请求通常用于提交表单数据、上传文件等操作。

使用 Fetch API 进行 Ajax 请求

fetch 是 ES6 中引入的一种现代化的发起网络请求的方法,它基于 Promise,使用fetch 可以更清晰地处理异步操作。让我们通过一个简单的例子来了解如何使用 fetch 进行 Ajax 请求。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用 Fetch 进行 Ajax 请求</title>
</head>
<body><button id="loadDataButton">加载数据</button><div id="dataContainer"></div><script>document.getElementById('loadDataButton').addEventListener('click', loadData);function loadData() {// 使用 Fetch API 发起 GET 请求fetch('https://jsonplaceholder.typicode.com/posts/1').then(response => {// 检查请求是否成功if (!response.ok) {throw new Error('请求失败:' + response.statusText);}// 将响应转换为 JSONreturn response.json();}).then(data => {// 成功接收到数据,处理响应document.getElementById('dataContainer').innerText = data.title;}).catch(error => {// 处理请求失败的情况console.error('请求失败:', error.message);});}</script>
</body>
</html>

在这个例子中,我们使用 fetch 发起了一个 GET 请求。fetch 返回一个 Promise,我们可以通过 then 方法处理成功的响应,通过 catch 方法处理请求失败的情况。这样的写法更加直观和清晰。

处理 JSON 数据

在前面的例子中,我们通过 JSON.parse 或者 response.json() 来处理从服务器返回的 JSON 数据。这是因为大多数情况下,我们与服务器交互的数据都是以 JSON 格式传输的。下面是一个使用 fetch 处理 JSON 数据的例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>处理 JSON 数据</title>
</head>
<body><button id="loadDataButton">加载数据</button><div id="dataContainer"></div><script>document.getElementById('loadDataButton').addEventListener('click', loadData);function loadData() {// 使用 Fetch API 发起 GET 请求fetch('https://jsonplaceholder.typicode.com/posts/1').then(response => {// 检查请求是否成功if (!response.ok) {throw new Error('请求失败:' + response.statusText);}// 将响应转换为 JSONreturn response.json();}).then(data => {// 成功接收到数据,处理响应const dataContainer = document.getElementById('dataContainer');dataContainer.innerHTML = `<p><strong>Title:</strong> ${data.title}</p><p><strong>Body:</strong> ${data.body}</p>`;}).catch(error => {// 处理请求失败的情况console.error('请求失败:', error.message);});}</script>
</body>
</html>

在这个例子中,我们使用了 data.titledata.body 属性来访问 JSON 数据中的字段,并将其展示在页面上。

发送 POST 请求

发送 POST 请求与 GET 请求类似,我们只需要在 fetch 的配置中指定请求的方法为 'POST',并在 body 中传递数据。下面是一个简单的例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>发送 POST 请求</title>
</head>
<body><button id="sendDataButton">发送数据</button><script>document.getElementById('sendDataButton').addEventListener('click', sendData);function sendData() {// 构建要发送的数据对象const dataToSend = {username: 'john_doe',email: 'john@example.com'};// 使用 Fetch API 发起 POST 请求fetch('https://jsonplaceholder.typicode.com/posts', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(dataToSend)}).then(response => {// 检查请求是否成功if (!response.ok) {throw new Error('请求失败:' + response.statusText);}// 将响应转换为 JSONreturn response.json();}).then(data => {// 成功接收到数据,处理响应console.log('成功发送数据:', data);}).catch(error => {// 处理请求失败的情况console.error('请求失败:', error.message);});}</script>
</body>
</html>

在这个例子中,我们使用 method: 'POST' 来指定请求方法为 POST,并在 body 中通过 JSON.stringify 将数据转换为 JSON 格式。在实际应用中,你需要根据服务器的要求来构建正确的请求。

处理跨域请求

在进行 Ajax 请求时,可能会遇到跨域的问题。跨域是指在不同域名、不同端口或不同协议之间进行网络请求。为了解决这个问题,需要在服务器端进行一些配置,或者使用 JSONP(JSON with Padding)等方法。在本文中,我们主要介绍一些简单的跨域处理方法。

JSONP

JSONP 是一种跨域请求的方法,它利用了 <script> 标签不受同源策略限制的特点。具体来说,通过创建一个 <script> 标签,将请求的 URL 设置为带有回调函数的 URL,服务器会将数据包装在回调函数中返回。下面是一个 JSONP 的简单例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSONP 跨域请求</title>
</head>
<body><button id="loadDataButton">加载数据</button><div id="dataContainer"></div><script>document.getElementById('loadDataButton').addEventListener('click', loadData);function handleResponse(data) {// 处理响应数据document.getElementById('dataContainer').innerText = data.title;}function loadData() {// 创建一个 script 元素const script = document.createElement('script');// 设置 script 的 src 属性,包含回调函数script.src = 'https://jsonplaceholder.typicode.com/posts/1?callback=handleResponse';// 将 script 元素添加到页面中document.body.appendChild(script);}</script>
</body>
</html>

在这个例子中,我们创建了一个名为 handleResponse 的回调函数,然后通过创建一个 <script> 标签,将请求的 URL 设置为 'https://jsonplaceholder.typicode.com/posts/1?callback=handleResponse'。这样,服务器会返回一个包含数据的 JavaScript 脚本,并在执行时调用我们提供的回调函数。

请注意,JSONP 有一些安全性方面的问题,因为它执行从服务器返回的任意代码。在使用 JSONP 时,请确保你信任并控制了提供 JSONP 服务的服务器。

CORS

CORS(Cross-Origin Resource Sharing)是一种更为现代和安全的跨域解决方案。服务器需要在响应头中包含一些特定的字段,以允许其他域的请求。同时,前端需要在请求头中设置 Origin 字段,表示请求的来源。下面是一个使用 CORS 的例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CORS 跨域请求</title>
</head>
<body><button id="loadDataButton">加载数据</button><div id="dataContainer"></div><script>document.getElementById('loadDataButton').addEventListener('click', loadData);function loadData() {// 使用 Fetch API 发起跨域请求fetch('https://api.example.com/data', {method: 'GET',headers: {'Origin': 'https://yourwebsite.com' // 替换为实际的域名}}).then(response => {// 检查请求是否成功if (!response.ok) {throw new Error('请求失败:' + response.statusText);}// 将响应转换为 JSONreturn response.json();}).then(data => {// 成功接收到数据,处理响应document.getElementById('dataContainer').innerText = data.message;}).catch(error => {// 处理请求失败的情况console.error('请求失败:', error.message);});}</script>
</body>
</html>

在这个例子中,我们在请求头中设置了 Origin 字段,表示请求的来源。服务器在响应头中设置了 Access-Control-Allow-Origin 字段,表示允许来自特定域的请求。这样,浏览器就允许了跨域请求。

Ajax 进阶:使用 Axios 库

尽管使用原生的 Fetch API 可以完成绝大部分的网络请求,但在实际项目中,我们通常会使用一些第三方库来简化和增强我们的代码。其中,Axios 是一个流行的网络请求库,它提供了更丰富的功能和更友好的 API。

要使用 Axios,首先需要在项目中安装 Axios:

npm install axios

然后,我们可以使用如下的方式来进行 GET 和 POST 请求:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用 Axios 进行 Ajax 请求</title>
</head>
<body><button id="loadDataButton">加载数据</button><div id="dataContainer"></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>document.getElementById('loadDataButton').addEventListener('click', loadData);function loadData() {// 使用 Axios 发起 GET 请求axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {// 成功接收到数据,处理响应document.getElementById('dataContainer').innerText = response.data.title;}).catch(error => {// 处理请求失败的情况console.error('请求失败:', error.message);});}</script>
</body>
</html>

Axios 提供了更简洁的 API,同时还支持许多高级特性,比如拦截器、并发请求等。在实际项目中,Axios 是一个非常值得考虑的选择。

结语

通过本文的学习,你应该对 Ajax 的基本原理、GET 和 POST 请求、Fetch API、处理 JSON 数据、跨域请求以及使用 Axios 进行网络请求有了一定的了解。Ajax 是现代前端开发中不可或缺的一部分,掌握它将使你能够更高效地构建交互性强、用户体验良好的网页应用。

在实际项目中,记得合理处理异常情况,保证代码的可维护性和稳定性。同时,不断学习和实践,深入理解前端技术的方方面面,将使你在前端开发的路上走得更远。祝愿你在 Ajax 的世界中,探索出属于自己的精彩!

作者信息

作者 : 繁依Fanyi
CSDN: https://techfanyi.blog.csdn.net
掘金:https://juejin.cn/user/4154386571867191

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/151928.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pycharm2023 实现鼠标点击某行,调试时代码运行至相应行

按下图取消 Breakpoints Over Line Numbers即可&#xff0c;然后调试时点击某行&#xff0c;代码就会运行至某行

【鸿蒙应用ArkTS开发系列】- 云开发入门简介

目录 概述开发流程工程概览工程模板工程结构 工程创建与配置 概述 HarmonyOS云开发是DevEco Studio新推出的功能&#xff0c;可以让您在一个项目工程中&#xff0c;使用一种语言完成端侧和云侧功能的开发。 基于AppGallery Connect Serverless构建的云侧能力&#xff0c;开发…

windows Oracle Database 19c 卸载教程

目录 打开任务管理器 停止数据库服务 Universal Installer 卸载Oracle数据库程序 使用Oracle Installer卸载 删除注册表项 重新启动系统 打开任务管理器 ctrlShiftEsc可以快速打开任务管理器&#xff0c;找到oracle所有服务然后停止。 停止数据库服务 在开始卸载之前&a…

C++数据结构:并查集

目录 一. 并查集的概念 二. 并查集的模拟实现 2.1 并查集类的声明 2.2 并查集的实现 三. 路径压缩 四. 总结 一. 并查集的概念 在生活中&#xff0c;我们经常需要对某一些事物进行归类处理&#xff0c;即&#xff1a;将N个不同的元素划分为几个互不相交的集合。在初始状态…

镭速,克服UDP传输缺点的百倍提速传输软件工具

在网络传输中&#xff0c;我们经常会面临这样的困难&#xff1a;文件太大&#xff0c;传输速度太慢&#xff0c;浪费时间和流量&#xff1b;文件太小&#xff0c;传输速度太快&#xff0c;容易出现丢包和乱序&#xff0c;损害数据的完整性和正确性。这些困难的根本在于传输层协…

单图像3D重建AI算法综述【2023】

计算机视觉是人工智能的一个快速发展的领域&#xff0c;特别是在 3D 领域。 本概述将考虑一个应用任务&#xff1a;2D 和 3D 环境之间的转换。 在线工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编…

小红书为什么没人看,小红书爆款标题怎么写?

作为快节奏的社会&#xff0c;人们追求的是不仅仅是高价值更是高性价比&#xff0c;和吸引度。而标题类似于门面&#xff0c;吸引程度自然作为重中之重。今天我们和大家分享下小红书为什么没人看&#xff0c;小红书爆款标题怎么写&#xff1f; 以母婴类型为例子&#xff0c;母婴…

《云计算:云端协同,智慧互联》

《云计算&#xff1a;云端协同&#xff0c;智慧互联》 云计算&#xff0c;这个科技领域中的热门词汇&#xff0c;正在逐渐改变我们的生活方式。它像一座座无形的桥梁&#xff0c;将世界各地的设备、数据、应用紧密连接在一起&#xff0c;实现了云端协同&#xff0c;智慧互联的愿…

网络参考模型与标准协议(二)-TCP/IP对等模型详细介绍

应用层 应用层为应用软件提供接口&#xff0c;使应用程序能够使用网络服务。应用层协议会指定使用相应的传输层协议&#xff0c;以及传输层所使用的端口等。TCP/IP每一层都让数据得以通过网络进行传输&#xff0c;这些层之间使用PDU ( Paket Data Unit,协议数据单元)彼此交换信…

Ubuntu(Linux)的基本操作

基本操作三步走 1、输入vim code.c点击i&#xff08;出现insert&#xff09;表示可以编辑代码编辑代码之后按下esc&#xff08;退出编辑模式&#xff09;按下shift:&#xff08;冒号&#xff09;wq&#xff08;退出文件&#xff09;2、输入gcc code.c&#xff08;进行编译代码…

【知识增强】A Survey of Knowledge-Enhanced Pre-trained LM 论文笔记

A Survey of Knowledge-Enhanced Pre-trained Language Models Linmei Hu, Zeyi Liu, Ziwang Zhao, Lei Hou, Liqiang Nie, Senior Member, IEEE and Juanzi Li 2023年8月的一篇关于知识增强预训练模型的文献综述 论文思维导图 思维导图网页上看不清的话&#xff0c;可以存…

软件测试:测试分类

一. 按照测试对象划分 1.1 界面测试 界面测试(简称UI测试),按照界面的需求(UI设计稿)和界面的设计规则,对我们软件界面所展示的全部内容进行测试和检查,一般包括如下内容: • 验证界面内容的完整性,一致性,准确性,友好性,兼容性.比如页面内容对屏幕大小的自适应,换行,内容是否…

Leetcode—206.反转链表【简单】

2023每日刷题&#xff08;三十三&#xff09; Leetcode—206.反转链表 头插法实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* reverseList(struct ListNode* head) {if(head NULL…

ajax,axios,fetch

文章目录 ajax工作原理ajax发请求四个步骤创建xmlhttprequest对象设置请求方式设置回调函数发送请求 自封装ajax axiosaxios 特性如何用配置拦截器fetch 三者区别 ajax 工作原理 Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)&#xff0c;使用户操作与服务…

HDD与QLC SSD深度对比:功耗与存储密度的终极较量

在当今数据世界中&#xff0c;存储设备的选择对于整体系统性能和能耗有着至关重要的影响。硬盘HDD和大容量QLC SSD是两种主流的存储设备&#xff0c;而它们在功耗方面的表现是许多用户关注的焦点。 扩展阅读&#xff1a; 1.面对SSD的步步紧逼&#xff0c;HDD依然奋斗不息 2.…

Windows系统中搭建docker (ubuntu,Docker-desktop)

一、docker安装前的准备工作 1. 开启CPU虚拟化&#xff0c;新电脑该默认是开启的&#xff0c;如果没开启可以根据自己电脑型号品牌搜索如克开启CPU虚拟化。当开启成功后可在设备管理器中看到。 2.开通Hyper-V 通过 Windows 控制面板 --> 程序和功能 -->启用或关闭…

Java集合大总结——Set的简单使用

Set的简单介绍 Set接口是Collection的子接口&#xff0c;Set接口相较于Collection接口没有提供额外的方法。Set 集合不允许包含相同的元素&#xff0c;如果试把两个相同的元素加入同一个 Set 集合中&#xff0c;则添加操作失败。Set集合支持的遍历方式和Collection集合一样&am…

[Kettle] 生成记录

在数据统计中&#xff0c;往往要生成固定行数和列数的记录&#xff0c;用于存放统计总数 需求&#xff1a;为方便记录1~12月份商品的销售总额&#xff0c;需要通过生成记录&#xff0c;生成一个月销售总额的数据表&#xff0c;包括商品名称和销售总额两个字段&#xff0c;记录…

使用键盘管理器更改键盘快捷键,让键盘真正迎合你的使用习惯

如果默认快捷键不适合你&#xff0c;你肯定会想知道如何在Windows 11中更改键盘快捷键。 也许你已经习惯了macOS键盘&#xff0c;或者像我一样在Windows和Mac之间切换工作/游戏——如果是这样的话&#xff0c;重新配置默认的Windows快捷方式&#xff0c;使其与Mac上的快捷方式…

Docker网络详细说明

Docker网络 docker不启动&#xff0c;默认网络情况 ipconfig----------ens33、lo、virbr0 在CentOS7的安装过程中如果有选择相关虚拟化的的服务安装系统后&#xff0c;启动网卡时会发现有一个以网桥连接的私网地址的virbr0网卡(virbr0网卡&#xff1a;它还有一个固定的默认I…