【Java 进阶篇】Ajax 实现——原生JS方式

在这里插入图片描述

大家好，欢迎来到这篇关于原生 JavaScript 中使用 Ajax 实现的博客！在前端开发中，我们经常需要与服务器进行数据交互，而 Ajax（Asynchronous JavaScript and XML）是一种用于创建异步请求的技术，它可以使我们在不刷新整个页面的情况下更新部分页面内容。在这篇文章中，我们将深入研究原生 JavaScript 如何使用 Ajax，以及一些相关的基础概念。

什么是 Ajax？

Ajax 是一种用于创建异步请求的技术，允许在不刷新整个页面的情况下向服务器发送和接收数据。这使得我们能够动态更新页面的部分内容，提高用户体验。虽然名字中包含 XML，但实际上，Ajax 可以使用多种数据格式，不仅限于 XML。

为什么使用 Ajax？

在 Web 开发中，我们常常需要从服务器获取数据或向服务器发送数据，而传统的同步请求会导致整个页面的刷新，用户体验较差。Ajax 的异步请求机制可以在不干扰用户当前操作的情况下与服务器进行数据交互，使页面变得更加动态和高效。

原生 JavaScript 中的 Ajax 实现

在原生 JavaScript 中，我们可以使用 XMLHttpRequest 对象来创建和处理 Ajax 请求。以下是一个简单的例子，演示如何使用原生 JavaScript 发起一个简单的 GET 请求：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原生 JavaScript 中的 Ajax 实现</title>
</head>
<body><button id="loadDataButton">加载数据</button><div id="dataContainer"></div><script>document.getElementById('loadDataButton').addEventListener('click', loadData);function loadData() {// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 配置请求，使用 GET 方法请求数据xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);// 注册回调函数，处理响应数据xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {// 响应已完成且请求成功var data = JSON.parse(xhr.responseText);document.getElementById('dataContainer').innerText = data.title;}};// 发送请求xhr.send();}</script>
</body>
</html>

在这个例子中，我们首先创建了一个 XMLHttpRequest 对象，然后使用 open 方法配置请求。接着，我们注册了一个回调函数，当请求状态发生变化时，这个函数将被调用。最后，我们使用 send 方法发送请求。

请求状态

XMLHttpRequest 对象有一个 readyState 属性，表示请求的状态。常用的状态有：

  • 0：未初始化，还没有调用 open 方法。
  • 1：启动，已经调用 open 方法，但尚未调用 send 方法。
  • 2：发送，已经调用 send 方法，但尚未接收到响应。
  • 3：接收，已经接收到部分数据。
  • 4：完成，已经接收到全部数据，而且已经可以在客户端使用。

在上面的例子中，我们通过检查 readyState 和 status 来确保请求已完成且成功。

异步与同步

在 open 方法的第三个参数中，我们传入了 true，表示使用异步请求。如果传入 false，则会使用同步请求。在实际开发中，建议使用异步请求，以免阻塞页面。

处理响应数据

在回调函数中，我们通过 xhr.responseText 获取响应的文本数据，并使用 JSON.parse 将其转换为 JavaScript 对象。然后，我们将获取到的数据展示在页面上。

POST 请求

除了 GET 请求，我们还可以使用 XMLHttpRequest 发起 POST 请求。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原生 JavaScript 中的 Ajax 实现（POST 请求）</title>
</head>
<body><button id="sendDataButton">发送数据</button><script>document.getElementById('sendDataButton').addEventListener('click', sendData);function sendData() {// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 配置请求，使用 POST 方法发送数据xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);// 设置请求头xhr.setRequestHeader('Content-Type', 'application/json');// 注册回调函数，处理响应数据xhr.onreadystatechange = function () {if (xhr.readyState === 4) {// 响应已完成if (xhr.status === 201) {console.log('数据发送成功！');} else {console.error('数据发送失败：', xhr.status, xhr.statusText);}}};// 构建要发送的数据对象var dataToSend = {title: 'foo',body: 'bar',userId: 1};// 将 JavaScript 对象转换为 JSON 字符串var jsonData = JSON.stringify(dataToSend);// 发送请求，将 JSON 字符串作为请求体xhr.send(jsonData);}</script>
</body>
</html>

在这个例子中，我们使用了 POST 方法，并在请求头中设置了 Content-Type 为 application/json，表示请求体中包含 JSON 数据。然后，我们将要发送的数据对象转换为 JSON 字符串，并通过 send 方法发送请求。

跨域请求

在浏览器中，有同源策略的限制，即默认情况下，Web 页面中的脚本只能访问与包含它的文档具有相同协议、主机和端口的资源。因此，当我们的页面和请求的资源不符合同源策略时，就会涉及到跨域请求的问题。

解决跨域问题的方式有很多种，其中一种常见的方法是使用 JSONP（在不涉及安全性问题时），另一种是使用 CORS（Cross-Origin Resource Sharing）。关于跨域请求的详细内容可以参考之前关于 Ajax 的博客中的相关章节。

Ajax 进阶：Fetch API

除了 XMLHttpRequest，现代浏览器还提供了 Fetch API，它是一种更现代、更强大的网络请求接口。下面是一个使用 Fetch API 的例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用 Fetch API 进行 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 API 相比于 XMLHttpRequest 更加简洁，同时支持 Promise，使得代码更具可读性和可维护性。

结语

通过本文的学习，你应该对原生 JavaScript 中使用 Ajax 进行数据请求有了一定的了解。从最基础的 GET 和 POST 请求开始，再到处理跨域问题，最后介绍了使用 Fetch API 进行请求的现代方式。Ajax 技术是前端开发中不可或缺的一部分，掌握它将使你能够更灵活地处理数据，提高用户体验。

在实际项目中，可以根据具体需求选择使用 XMLHttpRequest 或 Fetch API，或者考虑使用一些现代的 JavaScript 框架和库，如 Axios、jQuery 等，来简化网络请求的代码。希望这篇博客对你有所帮助，愿你在前端开发的路上越走越远！

作者信息

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

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

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

相关文章

getchar函数的功能有哪些

getchar函数的功能有哪些

getchar函数是C语言标准库中的一个函数&#xff0c;主要用于从标准输入&#xff08;通常是键盘&#xff09;获取一个字符。它的功能包括&#xff1a; 从标准输入获取一个字符&#xff1a;getchar函数会等待用户输入一个字符&#xff0c;然后将其返回给程序。可以通过控制台输入…
阅读更多...
Javaweb之Vue生命周期的详细解析

Javaweb之Vue生命周期的详细解析

2.4 生命周期 vue的生命周期&#xff1a;指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段&#xff1a;每触发一个生命周期事件&#xff0c;会自动执行一个生命周期方法&#xff0c;这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示&#xff1a; 状…
阅读更多...
Linux -- httpd服务

Linux -- httpd服务

httpd服务 apache和nginx都可以作为web服务器&#xff0c;但nginx用的更多 性能&#xff1a; Nginx通常被认为在处理并发连接和静态内容时更有效率。配置&#xff1a; Apache的配置相对更复杂&#xff0c;而Nginx的配置更直观和简洁。用途&#xff1a; Apache广泛用于传统的W…
阅读更多...
QT小记：警告Use multi-arg instead

QT小记：警告Use multi-arg instead

"Use multi-arg instead" 是一个提示&#xff0c;建议使用 QObject::tr() 函数的多参数版本来处理多个占位符&#xff0c;而不是使用单参数版本。 在 Qt 中&#xff0c;tr() 是用于进行文本翻译&#xff08;国际化&#xff09;的函数。它允许你在应用程序中使用多种…
阅读更多...
代码随想录算法训练营第四十九天| 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV

代码随想录算法训练营第四十九天| 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV

文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;代码随想录B站账号 状态&#xff1a;看了视频题解和文章解析后做出来了 123.买卖股票的最佳时机III class Solution:def maxProfit(self, prices: List[int]) -> int:if len(prices) 0:return 0dp [[0] * 5 for _ in…
阅读更多...
安装2023最新版PyCharm来开发Python应用程序

安装2023最新版PyCharm来开发Python应用程序

安装2023最新版PyCharm来开发Python应用程序 Install the Latest JetBrains PyCharm Community to Develop Python Applications Python 3.12.0最新版已经由其官网python.org发布&#xff0c;这也是2023年底的最新的版本。 0. PyCharm与Python 自从1991年2月20日&#xff0…
阅读更多...
【Java】抽象类和接口

【Java】抽象类和接口

文章目录 一、抽象类1.抽象类的概念2.抽象类的语法3.抽象类的特性4.抽象类的作用 二、接口1.接口的概念2.语法规则3.接口的使用4.接口的特性5.实现多个接口6.接口间的继承7.接口的使用实例8.Clonable 接口和深拷贝9.抽象类和接口的区别 三、Object类1.获取对象信息2.对象的比较…
阅读更多...
单个脚本打包成jar可以直接运行

单个脚本打包成jar可以直接运行

阅读更多...
c++处理tcp粘包问题以及substr方法

c++处理tcp粘包问题以及substr方法

c处理tcp粘包问题以及substr方法 1.粘包原因2.tcp基础三次握手四次挥手长连接和和短连接 3.解决方式1.定长消息&#xff1a;2.分隔符消息&#xff1a; 4.substr方法 1.粘包原因 在TCP通信中&#xff0c;粘包是指发送方在发送数据时&#xff0c;多个小的数据包被合并成一个大的…
阅读更多...
Python基础入门----如何通过conda搭建Python开发环境

Python基础入门----如何通过conda搭建Python开发环境

文章目录 使用 conda 搭建Python开发环境是非常方便的，它可以帮助你管理Python版本、依赖库、虚拟环境等。以下是一个简单的步骤，演示如何通过 conda 搭建Python开发环境： 安装conda: 如果你还没有安装 conda，首先需要安装Anaconda或Miniconda。Anaconda是一个包含很多数据…
阅读更多...
pythom导出mysql指定binlog文件

pythom导出mysql指定binlog文件

要求 要求本地有py环境和全局环境变量 先测试直接执行binlog命令执行命令 Windows 本地直接执行命令 # E:\output>E:\phpstudy_pro\Extensions\MySQL5.7.26\bin\mysqlbinlog binglog文件地址 # --no-defaults 不限制编码 # -h mysql链接地址 # -u mysql 链接名称 # -p m…
阅读更多...
牛掰的dd命令，cpi0配合find备份（不会主动备份），od查看

牛掰的dd命令，cpi0配合find备份（不会主动备份），od查看

dd if设备1或文件 of设备2或文件 blocknsize countn 还原就是把设备1,2调过来 这里想到dump的还原是命令restore&#xff0c;想起来就写一下&#xff0c;省的总忘记 可以针对整块磁盘进行复制&#xff0c;对于新创建的分区&#xff0c;也不用格式化&#xff0c;可以直接…
阅读更多...
高防CDN为什么可以防DDOS攻击

高防CDN为什么可以防DDOS攻击

CDN的全称是ContentDeliveryNetwork&#xff0c;即内容分发网络&#xff0c;顾名思义&#xff0c;它是一个分布式节点网络(也称为边缘服务器)&#xff0c;CDN节点具有缓存内容的功能&#xff0c;使用户可以在不获取源服务器数据的情况下就近获取所需内容&#xff0c;提高客户访…
阅读更多...
MyBatis在注解中使用动态查询

MyBatis在注解中使用动态查询

以前为了使用注解并在注解中融入动态查询&#xff0c;会使用Provider。后来发现只要加入"<script>包含动态查询的SQL语句</script>"就可以了。 例如&#xff1a; Select("<script>" "select v.*,u.avatar,u.nickname from videos…
阅读更多...
Androidstudio中build.gradle classpath如何添加

Androidstudio中build.gradle classpath如何添加

Androidstudio中build.gradle classpath如何添加 build.gradle classpath如何添加 build.gradle classpath如何添加 升级as之后&#xff0c;gradle版本也升级了&#xff0c;导致project的build.gradle中的写法也不一样了。 buildscript {repositories {google()mavenCentral(…
阅读更多...
SQL引擎子系统的工作原理

SQL引擎子系统的工作原理

SQL引擎子系统负责将用户发送过来的SQL请求进行解析&#xff0c;语义检查&#xff0c;生成逻辑计划&#xff0c;经过一系列重写和优化&#xff0c;生成物理计划&#xff0c;交由计划执行器执行。 SQL语句分为两大类。一是数据操作语言&#xff0c;包括 select update insert de…
阅读更多...
Azure Machine Learning - Azure AI 搜索中的集成数据分块和嵌入

Azure Machine Learning - Azure AI 搜索中的集成数据分块和嵌入

在基于索引器的索引编制中&#xff0c;Azure AI _集成矢量化_将数据分块和文本到矢量嵌入添加到技能中&#xff0c;它还为查询添加文本到矢量的转换。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本…
阅读更多...
【Java程序员面试专栏 算法训练篇】二叉树高频面试算法题

【Java程序员面试专栏 算法训练篇】二叉树高频面试算法题

一轮的算法训练完成后，对相关的题目有了一个初步理解了，接下来进行专题训练，以下这些题目就是二叉树相关汇总的高频题目 遍历二叉树 遍历二叉树，分为递归和迭代两种方式，递归类似于DFS，迭代类似于BFS，【算法训练-二叉树 一】【遍历二叉树】前序遍历、中序遍历、后续遍…
阅读更多...
Godot Shader -变量的声明

Godot Shader -变量的声明

变量的声明 uniform 可以将值传递给着色器。这些值对整个着色器来说是全局的&#xff0c;被称为 uniform。当一个着色器后来被分配给一个材质时&#xff0c;uniform 将作为可编辑的参数出现在其中。uniform 不能从着色器内部写入。 可以在材质编辑器的修改这些uniform的值&a…
阅读更多...
力扣-414.第三大的数（两种解法）

力扣-414.第三大的数（两种解法）

文章目录 第三大的数解法一&#xff08;排序加遍历对比&#xff09;解法二&#xff08;遍历一遍加迭代&#xff09; 第三大的数 题目&#xff1a; 给你一个非空数组&#xff0c;返回此数组中第三大的数 。如果不存在&#xff0c;则返回数组中最大的数。 示例 1&#xff1a; 输…
阅读更多...
最新文章

Copyright @ 2022~2023