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

news2024/11/7 9:27:58

一、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文件,将对服务端返回数据的处理结果显示在网页中:
在这里插入图片描述
效果如下:
在这里插入图片描述
点击页面中的按钮:
在这里插入图片描述
可以看出,并没有刷新页面,页面内容发生了变化。

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

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

相关文章

【Python实战】Python采集大学教务系统成绩单

前言 在现代教育中&#xff0c;教务系统已经成为了学校管理和教学工作的重要组成部分。然而&#xff0c;由于各种原因&#xff0c;教务系统的成绩单并不能下载的&#xff0c;这给我们带来了很多不必要的麻烦和困扰。因此&#xff0c;采集教务系统成绩单的项目具有非常重要的意义…

【轻量化网络系列(6)】EfficientNetV1论文超详细解读(翻译 +学习笔记+代码实现)

前言 EfficientNetV1是Google在2019年发布的文章&#xff0c;这篇论文最主要的创新点是Model Scaling。论文提出了compound scaling&#xff0c;混合缩放&#xff0c;把网络缩放的三种方式&#xff1a;深度、宽度、分辨率&#xff0c;组合起来按照一定规则缩放&#xff0c;从…

使用FPGA驱动GS2972(3G-SDI模式)外同步(HSYNC VSYNC DE)或内(BT1120)同步输出彩条调试

GS2972视频输出调试 一、外同步模式1.1 GS2972的硬件初始化1.2 GS2972的驱动时序1.3 GS2972的驱动RTL代码1.4 GS2972输出彩条1.5 GS2972驱动易出bug二、数据内嵌同步模式2.1 GS2972的硬件初始化2.2 GS2972的驱动时序2.3 GS2972的驱动RTL代码2.4 GS2972输出彩条2.5 GS2972驱动易…

IIC总线简介及IIC的通信过程与时序

1.IIC总线简介 IIC总线&#xff1a; IIC总线是Philips公司在八十年代初推出的一种串行、半双工总线&#xff0c;主要用于近距离、低速的芯片之间的通信&#xff1b;IIC总线有两根双向的信号线&#xff0c;一根数据线SDA用于收发数据&#xff0c;一根时钟线SCL用于通信双方时钟…

跳槽一次涨8k,5年跳了3次...

最近有人说&#xff0c;现在软件测试岗位初始工资太低了&#xff0c;有些刚刚入行的测试朋友说自己工资连5位数都没有…干了好几年也没怎么涨。 看看别人动辄月薪1-2万&#xff0c;其实我想说也没那么难。 说下如何高效地拿到3万的工资&#xff0c;总体来说&#xff0c;就靠跳…

墨天轮关系型分布式数据库榜单解读

分布式关系型数据库概述 作为数据库演进方向之一&#xff0c;分布式能力受到更多用户的关注。从技术架构演进来看&#xff0c;数据库正走过了从单机式、集中式到分布式的发展过程&#xff0c;目前是多种架构并存的阶段。分布式架构以其更好的存储与计算扩展能力&#xff0c;受…

四六位、不定长、计算题等验证码,一款工具全部搞定,简单方便还开箱即用,精度高达96%!!

四六位、不定长、计算题等验证码,第三方平台准确率低,自己不会神经网络训练,嫌麻烦,一款工具全部搞定,开箱即用!! 本文秉承着开箱即用的原则,真正做到一款工具识别秒杀所有单行文本验证码,这里的单行指的就是某张4位6位或者计算题或者文字的验证码,我是使用了4位+6位…

Vue2数据代理的理解

理解 最近在复习Vue2&#xff0c;对于数据代理有些模糊。查阅了一些资料。 这是官方解释https://v2.cn.vuejs.org/v2/api/#data数据代理&#xff1a;通过代理对象 操作&#xff08;读/写&#xff09;目标对象中的属性 这里出现了两个对象&#xff0c;一个叫代理对象&#xf…

VMware虚拟机安装Windows Server 2003

哈喽&#xff0c;各位小伙伴大家好&#xff0c;win server2003算是拖了比较久了&#xff0c;一直没发布&#xff0c;今天完成server2003的安装后server系列的安装教程就告一段落了。马上暑假了&#xff0c;想必新生开学之后&#xff0c;很多计算机网络专业的同学们要开始接触到…

全志V3S嵌入式驱动开发(sd卡驱动)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 之前开发过程中&#xff0c;整个linux的启动都是基于sd卡进行的。此外&#xff0c;我们有这么几点发现&#xff0c;首先&#xff0c;v3s本身是识别…

Python3+Selenium2完整的自动化测试实现之旅(五):自动化测试框架、Python面向对象以及POM设计模型简介

目录 前言 1 自动化测试框架概述 2 自动化测试框架需要的环境 3 自动化测试框架设计思想&#xff1a;Python面向对象 4 自动化测试框架设计思想&#xff1a;POM&#xff08;Page Object Model&#xff09;页面对象模型 【自动化测试工程师学习路线】 结语 前言 之前…

【AI数学】相机成像之外参数

在一个多视点计算机视觉系统里&#xff0c;系统输入除了多个视角的图像外&#xff0c;一般还需要输入对应视角下相机的内外参数。其中&#xff0c;相机内参数决定了图像坐标系和相机三维坐标系的映射关系&#xff0c;而相机外参数则决定了相机三维坐标系和世界坐标系的对应关系…

【TCP/IP】多进程服务器的实现(进阶) - 进程的概念及fork函数

目录 进程的概念及应用 进程的定义 进程的ID fork函数&#xff08;进程创建函数&#xff09; 多进程&#xff08;以及多线程&#xff09;是现代计算机网络的精髓。在之前&#xff0c;我们所做的诸如回声服务器、回声客户端、文件收发等都是偏向基础的单进程应用。而经过前面…

【论文阅读】Twin neural network regression is a semi- supervised regression algorithm

论文下载 GitHub bib: ARTICLE{,title {Twin neural network regression is a semi- supervised regression algorithm},author {Sebastian J Wetzel and Roger G Melko and Isaac Tamblyn},journal {Machine Learning: Science and Technology},year {2022},volum…

“我转行做测试开发的这一年多,月薪5K变成了18K”,中文系萌妹的自白

公司老板是我的测试引路人 本人就读于某普通院校&#xff0c;在大学期间就开始实习找工作&#xff0c;误打误撞进入一家做工业大数据的创业公司。 刚开始我并没有明确的职业发展方向&#xff0c;主要是做一些环境搭建的基础工作。但由于执行效率高&#xff0c;工作责任感强&a…

06-发送短信验证码实现登录功能

1、发送短信验证码实现登录功能的流程 1.1、获取验证码流程 1.2、登录流程 1.3、页面带有图形验证码的流程 2、 注册登录二合一页面的开发 2.1、将src目录下的App.vue页面上通用显示的删掉 2.2、在router目录下的index.js文件中通过懒加载的方式添加login.vue页面 对于rout…

【新版】系统架构设计师 - 软件工程

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录 架构 - 软件工程考点摘要软件工程概述软件能力成熟度模型软件过程模型瀑布模型原型化模型增量模型螺旋模型喷泉模型V模型迭代与增量的概念CBSD基于构件的模型&#xff08;构件组装模型/基于构件的软件开发…

PSP - 更新 MSA 搜索的全部 UniProt 蛋白序列库

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/131115471 UniProt 是一个提供蛋白质序列和功能信息的数据库,由欧洲生物信息学研究所(EMBL-EBI)、美国瑞士生物技术信息中心(SIB)和美国蛋白质信息资源(…

一图详解!接口测试之HTTP协议与HTTPS协议的传输过程

目录 前言&#xff1a; 1、HTTP协议 1.1 协议 1.2 原理 1.2.1 客户端 1.2.2 服务器端 1.3 请求报文 1.3.1 报文格式 1.3.2 请求报文方法 1.4 响应报文 1.4.1 报文格式 1.4.2 响应报文状态码 2、HTTPS协议 2.1 加密算法 2.2 数字签名 2.3 传输过程 2.4 流程图 …

Kafka运维监控:Kafka-Eagle安装

kafka自身并没有集成监控管理系统&#xff0c;因此对kafka的监控管理比较不便&#xff0c;好在有大量的第三方监控管理系统来使用&#xff0c;常见的有&#xff1a; Kafka Eagle KafkaOffsetMonitor Kafka Manager&#xff08;雅虎开源的Kafka集群管理器&#xff09; Kafka …