当前位置： 首页 > news >正文

Ajax 快速入门

news 文章来源：https://blog.csdn.net/m0_66357705/article/details/139567429 2024/11/15 19:42:03

Ajax

  1. 概念：Ajax是一种Web开发技术，允许在不重新加载整个页面的情况下，与服务器交换数据并更新网页的部分内容。

  2. 作用：

    • 数据交换：Ajax允许通过JavaScript向服务器发送请求，并能够接收服务器响应的数据。

    • 异步交互：它使得Web应用程序可以在后台与服务器进行数据交换，而不会干扰用户当前的页面操作。

  3. 应用场景：

    • 搜索联想：在搜索框中输入文字时，动态显示搜索建议。

    • 用户名可用性校验：在用户注册或修改用户名时，实时检查用户名是否已被占用。

  4. 技术实现：Ajax通常通过JavaScript的XMLHttpRequest对象或现代的fetch API来实现，这些API允许开发者发送HTTP请求并与服务器进行通信。

  5. 优势：

    • 提高用户体验：通过异步数据加载，提高页面响应速度，提升用户体验。

    • 减轻服务器负担：只请求必要的数据，减少不必要的页面加载，减轻服务器负担。

  6. 现代应用：随着Web开发技术的发展，Ajax已经成为现代Web应用程序中不可或缺的一部分，尤其是在创建单页应用（SPA）和动态用户界面时。

【

AJAX 并非编程语言。

AJAX 仅仅组合了：

  • 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）

  • JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

】

原生Ajax

<body><input type="button" onclick = "getData"/><div id="div1"></div>
</body>
​
<script>function getData(){//1.创建XMLHttpRequestvar xmlHttpRequest = new XMLHttpRequest();//发送异步请求xmlHttpRequest.open("GET","url");xmlHttpRequest.send(); // 发送请求//监听就绪状态改变xmlHttpRequest.onreadystatechange()=function(){ if(xmlHttpRequest.readState == 4 && xmlHttpRequest.status == 200){document.getElementById("div1").innerHTML = xmlHttpRequest.reponseText; //获得“文本响应”的数据}}}
</script>

XMLHttpRequest 对象方法

方法描述
new XMLHttpRequest()创建新的 XMLHttpRequest 对象。
abort()取消当前请求。
getAllResponseHeaders()返回头部信息。
getResponseHeader()返回特定的头部信息。
open(method, url, async, user, psw)规定请求。method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名psw：可选的密码
send()向服务器发送请求，用于 GET 请求。
send(string)向服务器发送请求，用于 POST 请求。
setRequestHeader()将标签/值对添加到要发送的标头。

XMLHttpRequest 对象属性

属性描述
onload定义接收到（加载）请求时要调用的函数。
onreadystatechange定义当 readyState 属性发生变化时调用的函数。
readyState保存 XMLHttpRequest 的状态。 0：请求未初始化1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText以字符串形式返回响应数据。
responseXML以 XML 数据返回响应数据。
status返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册
statusText返回状态文本（比如 "OK" 或 "Not Found"）

Axios

axios快速入门

  • 创建HTML界面，引用Axios.js文件

    <script src="/axios.js"> </script>

  • 使用Axios发送请求

  • //const axios = require('axios');
axios.get("url","id=1").then()
//或者
axios({method: "get",url: "/url", // 请替换为实际的请求 URLparams: {id: 1} // 这里是一个对象，我们会将其转换为查询字符串
}).then(function (response) {console.log(response.data); // 成功回调函数}) .catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});
​
​
/*
这两种向服务器会带消息的params: {    //配置 GET 请求参数id: 1} data: {     //jsonid: 1}, 
*/
axios.post("url","id=1").then()
//或者
axios({method: "post",url: "/url", // 请替换为实际的请求 URLdata: {id: 1}, // 这里是一个对象，我们需要将其转换为 JSON 字符串headers: {'Content-Type': 'application/json' // 设置 Content-Type 为 JSON}
}).then(function (response) {console.log(response.data); // 成功回调函数}) .catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});
​

  • params 是一个用于配置 GET 请求参数的对象。当您使用 params 字段时，Axios 会自动将参数编码为 URL 查询字符串，并将它们附加到请求的 URL 末尾。这对于发送键值对（如查询字符串）的 GET 请求非常有用。

并发请求

function getUserAccount() {// 定义一个函数 getUserAccount，该函数返回一个 Axios GET 请求的 Promisereturn axios.get('/user/12345');
}
​
function getUserPermissions() {// 定义一个函数 getUserPermissions，该函数返回一个 Axios GET 请求的 Promisereturn axios.get('/user/12345/permissions');
}
​
const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);
// 使用 await 等待 Promise.all 执行完成，并解构返回的数组，分别赋值给 acct 和 perm
// Promise.all 接受一个数组，其中每个元素都是一个 Promise
// 在这个例子中，数组包含两个元素：getUserAccount() 和 getUserPermissions()
// Promise.all 返回一个 Promise，当数组中的所有 Promise 都解决时，返回一个包含所有解决值的数组
​
// OR
​
Promise.all([getUserAccount(), getUserPermissions()]).then(function ([acct, perm]) {// 使用 Promise.all 的返回值// 在这个 then 方法中，我们得到一个包含两个解决的 Promise 值的数组// 我们可以通过解构赋值来分别获取 acct 和 perm});
// 这段代码与上面的 await 版本等效，只是使用了 Promise.all 的返回值
// 在 then 方法中处理返回的数组，而不是直接在 await 后面解构
​
​

相关文章：

Ajax 快速入门

Ajax 概念&#xff1a;Ajax是一种Web开发技术&#xff0c;允许在不重新加载整个页面的情况下&#xff0c;与服务器交换数据并更新网页的部分内容。 作用&#xff1a; 数据交换&#xff1a;Ajax允许通过JavaScript向服务器发送请求&#xff0c;并能够接收服务器响应的数据。 异…...

编程日记 2024/6/10 6:54:20

面试官：前端实现图片懒加载怎么做？这不是撞我怀里了嘛！

前端懒加载&#xff08;也称为延迟加载或按需加载&#xff09;是一种网页性能优化的技术&#xff0c;主要用于在网页中延迟加载某些资源&#xff0c;如图片、视频或其他媒体文件&#xff0c;直到它们实际需要被用户查看或交互时才进行加载。这种技术特别适用于长页面或包含大量…...

编程日记 2024/6/10 6:51:17

每天学习一个Windows命令或Linux命令——seq

今天我们来学习 seq命令&#xff01; seq命令&#xff08;单词sequence序列的缩写&#xff09;是Linux系统中用于输出序列化的一串整数的命令。 一、seq用法 seq用法一共有以下三种&#xff1a; seq [选项]... 尾数 seq [选项]... 首数 尾数 seq [选项]... 首数 增量&#…...

编程日记 2024/6/10 6:49:13

C++设计模式-中介者模式，游戏对象之间的碰撞检测

运行在VS2022&#xff0c;x86&#xff0c;Debug下。 31. 中介者模式 中介者模式允许对象之间通过一个中介者对象进行交互&#xff0c;而不是直接相互引用。可以减少对象之间的直接耦合&#xff0c;同时集中化管理复杂的交互。应用&#xff1a;如在游戏开发中&#xff0c;可以使…...

编程日记 2024/6/10 6:48:12

Rust-02-变量与可变性

在Rust中&#xff0c;变量和可变性是两个重要的概念。 变量&#xff1a;变量是用于存储数据的标识符。在Rust中&#xff0c;变量需要声明其类型&#xff0c;例如&#xff1a; let x: i32 5; // 声明一个名为x的变量&#xff0c;类型为i32&#xff08;整数&#xff09;&#…...

编程日记 2024/6/10 6:46:10

mov指令中不允许的操作——汇编语言

在 x86 汇编语言中&#xff0c;MOV 指令的限制有助于确保系统的稳定性和正确的操作。下面详细解释为什么这些操作是不允许的。 1. 段寄存器之间直接传送数据 MOV DS, ES ; 错误&#xff0c;不允许原因&#xff1a; 段寄存器是用来定义程序段的开始位置&#xff0c;如代码段…...

编程日记 2024/6/10 6:44:07

Python进阶-部署Flask项目(以TensorFlow图像识别项目WSGI方式启动为例)

本文详细介绍了如何通过WSGI方式部署一个基于TensorFlow图像识别的Flask项目。首先简要介绍了Flask框架的基本概念及其特点&#xff0c;其次详细阐述了Flask项目的部署流程&#xff0c;涵盖了服务器环境配置、Flask应用的创建与测试、WSGI服务器的安装与配置等内容。本文旨在帮…...

编程日记 2024/6/10 6:43:06

WooYun-2016-199433 -phpmyadmin-反序列化RCE-getshell

参考资料&#xff1a; Phpmyadmin 脚本/设置.php反序列化漏洞 &#xff08;WooYun-2016-199433&#xff09;复现_phpmyadmin scriptssetup.php 反序列化漏洞-CSDN博客 https://blog.csdn.net/haoxue__/article/details/129368455利用pearcmd.php文件包含拿shell&#xff08;L…...

编程日记 2024/6/10 6:42:03

社交“学习伙伴”：Meta Llama助力对话升级

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/6/10 6:40:02

LabVIEW 反向工程的实现与法律地位

什么是LabVIEW反向工程&#xff1f; 反向工程是指从现有的应用程序或软件中推导出其设计、架构、代码等信息的过程。对于LabVIEW而言&#xff0c;反向工程涉及从现有的VI&#xff08;虚拟仪器&#xff09;文件、项目或应用程序中提取出设计思路、功能模块、算法实现等。 LabV…...

编程日记 2024/6/10 6:37:59

Python怎么做单元测试

在Python中&#xff0c;最常用的单元测试框架是unittest。以下是如何使用unittest进行单元测试的步骤&#xff1a; 导入unittest模块&#xff1a; 首先&#xff0c;你需要导入unittest模块。 import unittest创建测试类&#xff1a; 你需要创建一个继承自unittest.TestCase的类…...

编程日记 2024/6/10 6:36:58

ghidra

https://github.com/NationalSecurityAgency/ghidra ghidra是一个so的逆向工具&#xff0c;功能和jadx-gui类似&#xff0c;但是和jadx-gui专注于java层的不同&#xff0c;ghidra专注于native层的代码反编译&#xff08;从二进制到c语言&#xff09;。 一、 安装 准备好java1…...

编程日记 2024/6/10 6:34:57

如何解决网络问题？

组织和 IT 管理员尽其所能完善他们的网络&#xff0c;但是&#xff0c;不同程度的网络问题仍然可能出现&#xff0c;这些网络问题需要立即响应和解决&#xff0c;如果这些问题在不合理的时间内得不到解决&#xff0c;网络和组织的损害可能会付出高昂的代价。这就是为什么 IT 管…...

编程日记 2024/6/10 6:32:54

高速USB转串口芯片CH343

CH343封装 截止目前&#xff0c;主要封装有 SOP16: CH343G QFN16: CH343P ESSOP10: CH343K,截止24年6月未生产 CH343串口速度 最高串口速度&#xff1a; 6Mbps,比CH340的2M&#xff0c;快3倍 1、概述 参考版本&#xff1a;1E CH343 是一个 USB 总线的转接芯片&#xff0c;…...

编程日记 2024/6/10 6:29:51

C++ MPI多进程并发

下载 用法 mpiexec -n 8 $PROCESS_COUNT x64\Debug\$TARGET.exe 多进程并发启动 mpiexec -f hosts.txt -n 3 $PROCESS_COUNT x64\Debug\$TARGET.exe 联机并发进程&#xff0c;其它联机电脑需在相同路径下有所有程序 //hosts.txt 192.168.86.16 192.168.86.123 192.168…...

编程日记 2024/6/10 6:28:50

UFS协议入门-分层结构

写在前面：本文参考UFS jedec3.1，本文思维导图如下 1. 分层概述 UFS协议分为3层，从上至下分别是：应用层(UAP)，传输层(UTP)，互联层(UIC)，具体结构如下图所示。 2.1 应用层 在应用层(UAP)中，包括：UFS指令集(UCS)，设备管理器(Device Manager)，任务管理器(Task Manager…...

编程日记 2024/6/10 6:27:49

Docker Desktop - WSL distro terminated abruptly

打开 PowerShell 或以管理员身份运行的命令提示符。运行以下命令以列出已安装的 WSL 分发&#xff1a; wsl --list 运行以下命令以注销 Docker 相关的分发 wsl --unregister <distro_name> 将<distro_name>替换为实际的 Docker 相关分发的名称。将<distro_…...

编程日记 2024/6/10 6:26:48

HTML-CSS练习例子

HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看&#xff0c;入门是很慢的&#xff0c;所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的&#xff0c;可以打开了解一下&#xff0c;可以每天打卡&#xff0c;例子简单&#xff0c;循序渐进&…...

编程日记 2024/6/10 6:25:46

【JavaScript脚本宇宙】创造声音的魔法：深入了解Web音频处理库

聆听创意可能性&#xff1a;解锁Web音频库的神奇功能 前言 在Web开发中&#xff0c;处理音频是一个重要且常见的需求。许多JavaScript库和框架旨在简化音频处理和交互式音乐的创建过程。本文将探讨几个流行的Web音频库&#xff0c;介绍它们的概述、主要特性、使用示例以及适用…...

编程日记 2024/6/10 6:24:45

苹果需要专注于让人工智能变得实用，而不是华而不实

谷歌和微软已将其开发者大会作为展示其生成式人工智能能力的平台&#xff0c;现在所有人的目光都集中在下周的全球开发者大会上&#xff0c;预计Apple Intelligence将在此首次亮相。 这家总部位于库比蒂诺的公司面临着巨大的压力。 苹果在人工智能竞赛中落后于同行&#xff0…...

编程日记 2024/6/10 6:23:44

安全专业的硬件远控方案 设备无网也能远程运维

在很多行业中&#xff0c;企业的运维工作不仅仅局限在可以联网的IT设备&#xff0c;不能连接外网的特种设备也需要专业的远程运维手段。 这种特种设备在能源、医疗等行业尤其常见&#xff0c;那么我们究竟如何通过远程控制&#xff0c;对这些无网设备实施远程运维&#xff0c;…...

编程日记 2024/6/10 6:22:42

Freeswitch-soundtouch-变声开发

文章目录 一、介绍二、安装soundtouch2.1 源码安装方式&#xff08;推荐&#xff09;2.1.1下载源码2.1.2解压2.1.3 编译2.1.4 迁移&#xff08;可选&#xff09; 2.2 apt-get 安装 三、使用3.1 终端使用3.2 Freeswitch使用3.2.1编译Freeswitch的mod_soundtouch3.2.2启用 mod_so…...

编程日记 2024/6/10 6:20:40

Unity2D游戏制作入门 | 09（之人物动画制作）

上期链接&#xff1a;Unity2D游戏制作入门 | 08-CSDN博客 人物走路动画逻辑补充&#xff08;该帖没有的内容&#xff0c;我给补充了请先看完这帖&#xff0c;再去看补充&#xff09;&#xff1a;人物按下shifit走路动画设定09&#xff08;第九期先行补充&#xff09; 上期我们…...

编程日记 2024/6/10 6:15:36

【自动部署】4.阿里云ECS服务器 IDEA自动部署项目

如何在IDEA中&#xff0c;自动部署项目到阿里云ECS服务器&#xff1f;今天我们就来实现一键部署功能。 执行maven命令打包免密登录&#xff0c;在IEDA中连接服务器执行stop脚本上传jar包到服务器执行start脚本查看运行日志 1.安装Alibaba Cloud Toolkit 2.配置host 3.自动化部…...

编程日记 2024/6/10 6:13:33

[Algorithm][动态规划][01背包问题][目标和][最后一块石头的重量Ⅱ]详细讲解

目录 1.目标和1.题目链接2.算法原理详解3.代码实现 2.最后一块石头的重量 II1.题目链接2.算法原理详解3.代码实现 1.目标和 1.题目链接 目标和 2.算法原理详解 问题转化&#xff1a;在数组中选择一些数&#xff0c;让这些数的和等于a&#xff0c;一共有多少种选法&#xff1f…...

编程日记 2024/6/10 6:11:30

LabVIEW控制PLC的实现方式

LabVIEW与PLC的结合可以充分发挥两者的优点&#xff0c;实现更高效、灵活和可靠的自动化控制系统。本文将详细介绍LabVIEW控制PLC的实现方式&#xff0c;包括通信接口、数据交换、编程方法及实际应用案例&#xff0c;帮助用户理解并应用这一技术。 通信接口 常见通信协议 La…...

编程日记 2024/6/10 6:10:29

JSTL知识点讲解与配置

JSTL&#xff08;JavaServer Pages Standard Tag Library&#xff09;是Java EE平台中的一个标准库&#xff0c;提供了一组用于在JSP&#xff08;JavaServer Pages&#xff09;中简化和标准化常见任务的标签。这些标签封装了很多常见的JSP功能&#xff0c;可以使得JSP页面更加简…...

编程日记 2024/6/10 6:09:28

Autodesk 3ds Max软件下载安装；3ds Max功能强大的三维建模、渲染软件安装包获取

3ds Max&#xff0c;无论是初学者还是资深设计师&#xff0c;都能通过3ds Max在数字世界中实现自己的创意&#xff0c;打造出令人惊叹的三维作品。 在3ds Max中&#xff0c;灯光系统是至关重要的一环。它提供了光度学灯光和标准灯光两种主要类型&#xff0c;用于照亮和增强场景…...

编程日记 2024/6/10 6:05:24

联合体和枚举＜C语言＞

导言 在C语言中除了结构体外&#xff0c;联合体和枚举也是自定义类型&#xff0c;联合体主要用于节省空间&#xff0c;在同一块内存存储多种类型的数据&#xff0c;而枚举可以提高代码的可读性、可维护性。 联合体&#xff08;union&#xff09; 它还有个更容易理解的名字&…...

编程日记 2024/6/10 6:04:23

算法人生（21）：从“React框架”看“情绪管理”

说起React框架&#xff0c;我们知道它是一种由Facebook开发和维护的开源JavaScript库&#xff0c;主要用于构建用户界面&#xff0c;特别是单页应用程序&#xff08;SPA&#xff09;。React框架围绕组件化&#xff0c;即把用户界面拆分为可复用的独立组件&#xff0c;每个组件负…...

编程日记 2024/6/10 6:03:22

图书类网站开发的背景/东莞关键词排名快速优化

&#xfeff;&#xfeff;Dubbo是Alibaba开源的分布式服务框架&#xff0c;它最大的特点是按照分层的方式来架构&#xff0c;使用这种方式可以使各个层之间解耦合&#xff08;或者最大限度地松耦合&#xff09;。从服务模型的角度来看&#xff0c;Dubbo采用的是一种非常简单的模…...

编程日记 2024/11/15 18:10:12

做招生网站/关键词挖掘工具爱站网

遇到个奇怪的问题&#xff0c;同时开启本地和远程两个事务&#xff0c;远程事务是sql2000没问题&#xff0c;是sql2008的不报错&#xff0c;但是写不上数据。 倒腾了4、5天&#xff0c;找到最终的解决办法&#xff1a;直接调用AdoConnection.execute(sq脚本)&#xff0c;看来Ad…...

编程日记 2024/11/15 16:41:58

apache wordpress rewrite/官网关键词优化价格

030-云E办_RabbitMQ_简单模式队列一、介绍简单模式队列1、RabbitMQ发送消息使用三个角色&#xff1a;1. producing 消息的生产者。2. queue队列&#xff1a;3. consuming 消费者&#xff1a;2、hello3、如何实现hello4、生产者和消费者&#xff0c;解读代码&#xff1a;1.生产者…...

编程日记 2024/11/15 16:17:44

新手学网站建设视频教程共30课高清版/网站搭建免费

计算机程序最基本的描述也许是一系列处理数据的操作&#xff0c;即使是最复杂的实例&#xff0c;这个论述也是正确的。应用程序的用户虽然看不到它们&#xff0c;但这些操作总是在后台上进行。我们在屏幕上进行的任何操作&#xff0c;无论是移动鼠标指针&#xff0c;单击图标&a…...

编程日记 2024/11/15 12:24:25

蓝色系 网站/seo北京优化

实验环境 第一台centos7源码安装apache2.4.38 IP 192.169.1.13 关闭防火墙 一.rewrite跳转 Rewrite主要的功能就是实现URL的重写。它的正则表达式是基于Perl语言&#xff0c;入站的规则用于修改 HTTP 请求 Url。这些规则可以为以下几个目的&#xff0c;如演示对用户更加友好…...

编程日记 2024/11/15 11:46:54

顺德营销型网站一站式服务哪家好/长沙市网站制作

Windows创建本地Git代码管理 在window是环境下快速本地Git代码管理&#xff1b; 包括下载软件、创建版本库基本命令&#xff1b; 下载Git Git官方网站下载地址 尝试了两次&#xff0c;速度只有几十kBps&#xff0c;而且下载到差不多80%时显示下载失败&#xff0c;不推荐。这里…...

编程日记 2024/11/15 11:37:46