ajax--XML、AJAX简介、express框架使用、AJAX操作的基本步骤

news2024/11/8 4:40:18

一、XML(可扩展标记语言)
XML与HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据。
比如有一个学生数据:name=“孙悟空”;age=18;gender=“男”;
用XML表示:
< student >
< name >孙悟空< /name >
< age > 18 < /age >
< gender > 男 < /gender >
< /student >

XML被设计用来传输和存储数据,比如服务器端将数据使用XML的形式传给客户端(前端),而HTML的作用是在网页端呈现数据

二、AJAX
AJAX全称为Asynchronous JavaScript And XML,就是异步的JS和XML。通过AJAX可以在浏览器中向服务其发送异步请求,最大的优势是无刷新获取数据。AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
最开始AJAX进行数据交换的格式是XML,服务器端给客户端返回的结果就是XML格式的字符串,前端的JS在接到这个结果后对其内容进行解析,把数据提取出来并对数据进行处理。现在AJAX不用XML,而是JSON,JSON更加简洁,在数据转换方面更加容易。
JSON表示上述数据:
{“name”:“孙悟空”,“age”:18,“gender”:“男”}

三、express框架(需要先安装node.js,express是基于node.js的)
使用express框架作为一个服务器端。
鼠标放在VSCode 软件的左侧栏->右键->Open in Integrated Terminal
在这里插入图片描述
在终端输入"npm init --yes":
在这里插入图片描述
安装express框架,在终端输入“npm i express":
在这里插入图片描述
新建一个"express基本使用.js"文件,内容如下:
在这里插入图片描述

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
//request是对请求报文的封装,而response是对响应报文的封装
app.get('/', (request, response)=>{
    //设置响应
    response.send('HELLO EXPRESS');

})
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动,8000端口监听中...");
})

终端输入"node express基本使用.js":
在这里插入图片描述
打开浏览器,输入网址访问express服务器端,结果如下:
在这里插入图片描述

四、AJAX请求的准备
1.前端页面的准备,新建GET.html文件:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>AJAX GET 请求</title>
        <style>
            #result{
                width:200px;
                height:100px;
                border:solid 1px #90b;
            }
        </style>
    </head>
    <body>
        <button>点击发送请求</button>
        <div id="result"></div>
    </body>
</html>

效果如下:
在这里插入图片描述
2.服务端准备,修改之前建立的"express基本使用.js"文件:
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
五、AJAX操作基本步骤
补充:http响应报文格式
在这里插入图片描述
修改GET.html文件:
在这里插入图片描述

在浏览器中打开页面,开发者工具显示控制台输出结果如下(注意不要关闭express服务端):
在这里插入图片描述
再修改GET.html文件,将对服务端返回数据的处理结果显示在网页中:
在这里插入图片描述
效果如下:
在这里插入图片描述
点击页面中的按钮:
在这里插入图片描述
可以看出,并没有刷新页面,页面内容发生了变化。
六、ajax传递参数
在这里插入图片描述
在浏览器中打开页面,点击按钮效果如下:
在这里插入图片描述
七、传post请求
修改express基本使用.js文件,添加如下内容并重新启动:
在这里插入图片描述
修改GET.html文件,实现将鼠标放在页面的div容器中,显示“HELLO AJAX POST"内容:
在这里插入图片描述
效果如下,在浏览器中打开页面:
在这里插入图片描述
将鼠标放到div容器中:
在这里插入图片描述
八、post请求设置参数
post请求设置参数在send方法中:
在这里插入图片描述
九、AJAX设置请求头信息
补充:http请求报文格式
在这里插入图片描述
在这里插入图片描述
效果如下:
在这里插入图片描述
使用自定义请求头,需要先在express基本使用.js文件中添加下图中圈出的内容并把"app.post"改为"app.all’(也可由后端人员完成该工作):
在这里插入图片描述
在这里插入图片描述
十、ajax请求服务端响应JSON数据
修改express基本使用.js文件内容令服务端返回JSON数据:
在这里插入图片描述
前端页面手动转换并处理:
在这里插入图片描述

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

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

相关文章

数字图像处理期末复习习题 SCUEC part3 形态学图像处理专项

1.关于膨胀&#xff0c;腐蚀&#xff0c;开操作&#xff0c;闭操作的证明题 2.腐蚀和膨胀的定义 3.开操作与闭操作的定义 4.击中击不中变换

ubuntu驱动重装

卸载 进入命令行模式 sudo NVIDIA-Linux-x86_64-495.46.run --uninstall安装 进入命令行模式 sudo ./NVIDIA-Linux-x86_64-460.67.run –no-opengl-files –no-x-check –no-nouveau-check选continue installation。 ② 选 NO。 选NO。

源氏木语获得多少个奖项?答案 2023年天猫618淘宝大赢家今日答案与618天猫超级红包怎么领取?

2023年6月12日天猫618淘宝大赢家今日答案 问题&#xff1a;源氏木语获得多少个奖项&#xff1f; 答案&#xff1a;15 2023年淘宝天猫618超级红包怎么领取&#xff1f; 从2023年5月29日开始持续到6月20日&#xff0c;每天都可以打开手机淘宝或天猫&#xff0c;在首页搜索框内…

Open Inventor 2023.1.1 Crack 2022-06-08

Open Inventor 是一组高性能的三维软件开发包&#xff08;SDK&#xff09;&#xff0c;用于医学、计算机辅助设计与工程、石油、天然气和采矿业这些领域中的专业应用。 其面向对象的应用程序编程接口、可拓展架构以及一整套先进庞大的组件为软件开发者提供一个完美的高级平台&…

教育系统和功能设计

慧享教育系统和功能设计 要求&#xff1a; 1. 在需求分析的基础上&#xff0c;确定项目详细功能&#xff1b; 2. 确定每个功能模块的子功能及详细内容并描述&#xff1b; 3. 完成事务设计和应用设计。 操作步骤&#xff1a; 1.系统结构设计及子系统划分 划分系…

基于html+css的图展示123

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

【软考程序员学习笔记】——计算机组成与体系结构

目录 &#x1f34a;一、进制之间的转换 &#x1f34a;二、原码、反码、补码和移码 原码 反码 补码 移码 &#x1f34a;三、浮点数表示法 &#xff08;1&#xff09;浮点数表示 &#xff08;2&#xff09;两浮点数进行运算的过程 &#x1f34a;四、校验码 &#xff08…

Spring Boot + Vue3前后端分离实战wiki知识库系统八--分类管理功能开发二

接着上一次https://www.cnblogs.com/webor2006/p/17291405.html的分类功能继续完善。 分类编辑功能优化&#xff1a; 概述&#xff1a; 现在分类编辑时的界面长这样&#xff1a; 很明显目前的父分类的展现形式不太人性&#xff0c;这里需要指定父分类的id才可以&#xff0c;对于…

规范即治理函数:LLM 赋能的软件架构治理与架构设计

在我们设计架构治理平台 ArchGuard 2.0 的架构时&#xff0c;一直在强调的点是&#xff1a;基于规范 模式的工具化。简单来说&#xff0c;规范是架构设计的共时&#xff0c;也是架构知识的显性化。所以&#xff0c;在让 AI 设计架构时&#xff0c;规范是我们要考虑的第一要素&…

0 基础学脚本:给同事做一个排班表并每日通知「02」

Hello 小伙伴们早上、中午、下午、晚上、深夜好&#xff01; 我是爱折腾的 jsliang~ 本系列文章和配套直播视频&#xff0c;面向金山文档的「轻维表」「表单」用户。 希望通过【自动化】和【脚本】等能力&#xff0c;让里面数据相互流转起来&#xff0c;从而提升工作效率。 序 …

企业级信息系统开发讲课笔记4.10 配置国际化页面

文章目录 零、学习目标一、使用Thymeleaf配置国际化页面&#xff08;一&#xff09;创建Spring Boot项目 - ThymeleafI18N&#xff08;二&#xff09;编写多语言国际化配置文件1、在resources下创建i18n目录2、在i18n目录里创建login.properties3、在i18n目录里创建login_zh_CN…

Prompt 用法大全!让 ChatGPT 更智能的六种策略(下)

上两篇介绍了 Pormpt 用法大全中前四种策略&#xff0c;本篇继续讲解后两种策略。‍‍‍‍‍ 点燃创作灵感&#xff1a;Prompt 实践指南揭秘&#xff01;让 ChatGPT 更智能的六种策略&#xff08;上&#xff09; Prompt 用法大全&#xff01;让 ChatGPT 更智能的六种策略&#…

基于html+css的图展示122

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

docker 的网络模式

一、docker网络概述 1、docker网络实现的原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c;Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c; 同时Docker网桥是 每个容器的…

ISO21434 操作和维护(十)

目录 一、概述 二、目标 三、网络安全事件响应 3.1 输入 3.1.1 先决条件 3.1.2 进一步支持信息 3.2 要求和建议 3.3 输出 四、更新 4.1 输入 4.1.1 先决条件 4.1.2 进一步支持信息 4.2 要求和建议 4.3 输出 一、概述 本条款描述了对文件中的项目…

Mysql中explain的用法详解

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…

企业级信息系统开发讲课笔记4.8 Spring Boot整合Redis

文章目录 零、学习目标一、Redis概述1、Redis简介2、Redis优点&#xff08;1&#xff09;存取速度快&#xff08;2&#xff09;数据类型丰富&#xff08;3&#xff09;操作具有原子性&#xff08;4&#xff09;提供多种功能 3、Redis官网与在线教程 二、使用Spring Boot 整合 R…

c++11 标准模板(STL)(std::ios_base)(二)

定义于头文件 <ios> class ios_base; 类 ios_base 是作为所有 I/O 流类的基类工作的多用途类。它维护数种数据&#xff1a; 1) 状态信息&#xff1a;流状态标志&#xff1b; 2) 控制信息&#xff1a;控制输入和输出序列格式化和感染的本地环境的标志&#xff1b; 3)…

音视频技术开发周刊 | 297

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 Geenee AR为品牌商和零售商提供虚拟试穿应用 这意味着Geenee AR的虚拟试穿解决方案能够与品牌商现有的销售渠道无缝集成。 谁说苹果掉队了&#xff1f;WWDC上只字未提AI&a…

macbook pro存储空间不足怎么办? MacBook Pro怎么优化或清理Mac磁盘空间?

MacBook Pro用久了之后都会堆积很多残留文件或缓存垃圾&#xff0c;久经之下MacBook Pro磁盘空间将会面临不够用的情况。 macbook pro存储空间不足怎么办&#xff1f;macbook pro笔记本中的存储空间不足&#xff0c;想要优化一下&#xff0c;该怎么优化呢&#xff1f; 这时候…