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

本文介绍: AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。最开始AJAX进行数据交换的格式是XML，服务器端给客户端返回的结果就是XML格式的字符串，前端的JS在接到这个结果后对其内容进行解析，把数据提取出来并对数据进行处理。现在AJAX不用XML，而是JSON，JSON更加简洁，在数据转换方面更加容易。，比如服务器端将数据使用XML的形式传给客户端（前端），而HTML的作用是在。{“name”:“孙悟空”,“a g e”:18,“g end e r”:“男”}XML与HTML类似，不同的是HTML中。

一、XML（可扩展标记语言）
XML与HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。
比如有一个学生数据：nam e=“孙悟空”;ag e=18;g end e r=“男”；
用XML表示：
< student &g t;
< nam e &g t;孙悟空< /name &g t;
< age > 18 < /age >
< gender > 男 < /gender >
< /stu dent >

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

二、AJAX
AJAX全称为Async h ro nous JavaSc ript 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“：

新建一个”ex pre ss 基本使用.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 expre ss 基本使用.js”：
在这里插入图片描述
打开浏览器，输入网址访问expre ss 服务器端，结果如下：

四、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>