ajax之生成一个ajax的demo示例

目录

一. node.js和express

​二. 使用express创建后端服务

三. 创建前端


一. node.js和express

ajax是前端在不刷新的情况下访问后端的技术,所以首先需要配置一个后端服务,可以使用node.js和express。

首先生成一个空项目,新建main目录,如图所示。

下载安装node就不演示了。

接下来使用node安装express,直接在终端输入npm i express即可,该java包会下载到项目根目录下的node_modules目录中(可以看到项目下多了node_modules目录和package.json和package_lock.json,这些是node安装了包后就会自动创建的,不用管)

二. 使用express创建后端服务

  1. 使用require导入express
  2. const app = express()创建app
  3. 使用app.get对前端的url请求生成相应的回调函数
  4. 使用app.listen开启服务进行监听
  5. 在终端输入node ××.js开启服务

如下图所示,特别要注意需要使用res.setHeader()开启跨域访问

三. 创建前端

首先创建按钮和展示框,如图所示

接下来编写ajax请求和处理代码

  1. 使用const xhr = new XMLHttpRequest()生成示例对象,使用该对象发送请求和处理回复
  2. 使用xhr.open('GET',   'http://localhost:8080/hello')配置请求url
  3. 使用xhr.send()发送请求
  4. 使用xhr.onreadystatechange = function(){}绑定回调函数,当xhr的readyStage属性变化的时候,就会触发该回调函数。xhr的readyStage属性有0,1,2,3,4五个值,当为0时,表示xhr刚创建,当为1时,表示已经执行open函数,当为2时,表示已经使用send发送请求,当为3时,表示已经部分返回,当为4时,表示已经全部返回

具体代码如下图所示,这里还有一个注意点,xhr.status是返回的状态码,如果状态码在200到300之间,都表示返回成功。

最后效果如下

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

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

相关文章

第本章:go 切片

注意: 切片必须要初始化 才能使用 ,切片是引用类型 a :[]int{} // 这上叫始化 此时并没有申请内存 // 如果要追加值的话: append ints : append(a, 1, 2, 3)a : make([]int,5) // 声明切片类型var a []string //声明一…

RISC-V汇编学习(三)—— RV指令集

有了前两节对于RISC-V汇编、寄存器、汇编语法等的认识,本节开始介绍RISC-V指令集和伪指令。 前面说了RISC-V的模块化特点,是以RV32I为作为ISA的核心模块,其他都是要基于此为基础,可以这样认为:RISC-V ISA 基本整数指…

双指针8:18. 四数之和

链接&#xff1a;18. 四数之和 - 力扣&#xff08;LeetCode&#xff09; 题解&#xff1a; 本题和三数之和基本一样&#xff0c;参见双指针7&#xff1a;LCR 007. 三数之和-CSDN博客 class Solution { public:vector<vector<int>> fourSum(vector<int>&am…

EasyRTC嵌入式音视频通话SDK:基于ICE与STUN/TURN的实时音视频通信解决方案

在当今数字化时代&#xff0c;实时音视频通信技术已成为人们生活和工作中不可或缺的一部分。无论是家庭中的远程看护、办公场景中的远程协作&#xff0c;还是工业领域的远程巡检和智能设备的互联互通&#xff0c;高效、稳定的通信技术都是实现这些功能的核心。 EasyRTC嵌入式音…

腾讯云物联网平台(IoT Explorer)设备端使用

1、直接看图流程 2、跑起来demo,修改产品id,设备名称,设备秘钥。 3、连接部分 4、修改默认地址和端口 sdk里面的地址默认是带着产品ID拼接的,咱们现在中铁没有泛域名解析,要改下这里。把+productID都去掉,然后地址里的.也去掉。

揭开AI-OPS 的神秘面纱 第四讲 AI 模型服务层(自研方向)

AI 模型服务层技术架构与组件选型分析(自研方向) 基于自有开发寻训练方向 AI 模型服务层 是 AI-Ops 架构的 核心智能引擎,负责构建、训练、部署、管理和监控各种 AI 模型,为上层应用服务层提供智能分析和决策能力。 AI 模型服务层需要提供一个灵活、可扩展、高性能的平台…

electron + vue3 + vite 主进程到渲染进程的单向通信

用示例讲解下主进程到渲染进程的单向通信 初始版本项目结构可参考项目&#xff1a;https://github.com/ylpxzx/electron-forge-project/tree/init_project 主进程到渲染进程&#xff08;单向&#xff09; 以Electron官方文档给出的”主进程主动触发动作&#xff0c;发送内容给渲…

在人工智能软件的帮助下学习编程实例

1 引言 本文记录在人工智能软件的帮助下学习一种全新的编程环境的实例&#xff0c;之所以提人工智能软件而不是单指DeepSeek&#xff0c;一方面DeepSeek太火了&#xff0c;经常服务器繁忙&#xff0c;用本机本地部署的最多运行70b模型&#xff0c;又似乎稍差。另一方面也作为一…

记录一下Django的密码重置(忘记密码)

一. Django默认的密码重置 1.路由 # url.pyfrom django.contrib.auth import views as auth_viewsurlpatterns [# 密码重置path(password_reset/, auth_views.PasswordResetView.as_view(), namepassword_reset),# 用户输入邮箱后&#xff0c;跳转到此页面path(password_res…

零售交易流程相关知识(top-down拆解)

引入 关于POS机交易时的后台数据交互 模块之间数据交换&#xff0c;都可以能被窃取或篡改。由此引入加密、解密机制和签名、验签机制 经典的加密、解密机制&#xff1a; 对称加密&#xff1a;DES\ TDES\ AES\ RC4 非对称加密&#xff1a;RSA\ DSA\ ECC 经典的签名、验签…

Web网页开发——水果忍者

1.介绍 复刻经典小游戏——水果忍者 2.预览 3.代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title&…

项目实战--网页五子棋(对战功能)(8)

上期我们完成了websocket建立连接后的数据初始化&#xff0c;今天我们完成落子交互的具体代码&#xff1a; 这里我们先复习一下&#xff0c;之前约定好的落子请求与响应包含的字段&#xff1a; 1. 发送落子请求 我们在script.js文件中找到落子的相关方法&#xff0c;增加发送请…

从0开始的操作系统手搓教程24——完成我们的键盘驱动子系统

目录 所以&#xff0c;我们现来说说转义字符 我们需要如何处理扫描码 当键入的是双字符键时 当键入的是字母键时 下一篇 我们下面来看看我们的键盘驱动子系统是一个怎么个事情。 驱动程序&#xff0c;你可以认为是对硬件的一层封装。我们按照手册规格的规定姿势&#xff0…

根据输入汉字生成带拼音的米字格字帖

实现了下面功能&#xff1a; 1、根据输入汉字&#xff0c;自动调整米字格和四线格的行数&#xff1b; 2、给汉字自动加上拼音和声调&#xff08;暂时不考虑多音字&#xff09;&#xff1b; 3、汉字在米字格&#xff0c;拼音在四线格&#xff0c; 4、第一列用黑色&#xff0c;2-…

软件高级架构师 - 软件工程

补充中 测试 测试类型 静态测试 动态测试 测试阶段 单元测试中&#xff0c;包含性能测试&#xff0c;如下&#xff1a; 集成测试中&#xff0c;包含以下&#xff1a; 维护 遗留系统处置 高水平低价值&#xff1a;采取集成 对于这类系统&#xff0c;采取 集成 的方式&…

DeepSeek专题:DeepSeek-V2核心知识点速览

AIGCmagic社区知识星球是国内首个以AIGC全栈技术与商业变现为主线的学习交流平台&#xff0c;涉及AI绘画、AI视频、大模型、AI多模态、数字人以及全行业AIGC赋能等100应用方向。星球内部包含海量学习资源、专业问答、前沿资讯、内推招聘、AI课程、AIGC模型、AIGC数据集和源码等…

电脑如何拦截端口号,实现阻断访问?

如果你弟弟喜欢玩游戏&#xff0c;你可以查询该应用占用的端口&#xff0c;结合以下方法即可阻断端口号&#xff0c;让弟弟好好学习&#xff0c;天天向上&#xff01; 拦截端口可以通过防火墙和路由器进行拦截 &#xff0c;以下是常用方法&#xff1a; 方法 1&#xff1a;使用…

【NLP 32、文本匹配任务 —— 深度学习】

大劫大难以后&#xff0c;人不该失去锐气&#xff0c;不该失去热度&#xff0c;你镇定了却依旧燃烧&#xff0c;你平静了却依旧浩荡&#xff0c;致那个从绝望中走出来的自己&#xff0c;共勉 —— 25.1.31 使用深度学习在文本匹配任务上主要有两种方式&#xff1a;① 表示型 ②…

【AD】5-15 Active Route的自动布线辅助

1.如图所示点击Panels&#xff0c;打开Active Route 2.按如图设置后&#xff0c;点击向导走线确定好走向后&#xff0c;在点击自动辅助布线&#xff0c;布好后可自行微调

使用 Arduino 和 ThingSpeak 通过 Internet 进行心跳监测

使用 Arduino 和 ThingSpeak 通过 Internet 进行心跳监测 在这个项目中,我们将使用 Arduino 制作一个心跳检测和监测系统,该系统将使用脉搏传感器检测心跳,并在与其连接的 LCD 上显示 BPM(每分钟心跳次数)读数。它还将使用 Wi-Fi 模块ESP8266将读数发送到 ThingSpeak 服务…