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

布满荆棘的人生 2024-03-16 15:05 90阅读 0赞

一、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  
![在这里插入图片描述][a50b9eb25c8d41119250127dca6b41ae.png]  
在终端输入"npm init --yes":  
![在这里插入图片描述][82ab83d7f84744b490c33ac3fb241d8c.png]  
安装express框架，在终端输入“npm i express"：  
![在这里插入图片描述][60c94ce7a79e4976ad68ee054476b99b.png]  
新建一个"express基本使用.js"文件，内容如下：  
![在这里插入图片描述][a2ef80f79d57447e9488e33e3021a0df.png]

//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"：  
![在这里插入图片描述][24552bdb1ef34000b41f36f46eb80f10.png]  
打开浏览器，输入网址访问express服务器端，结果如下：  
![在这里插入图片描述][117639263715453eb41388b510accac4.png]

四、AJAX请求的准备  
1.前端页面的准备，新建GET.html文件：  
![在这里插入图片描述][eb1eccc18b2349e7833aa62928d67e58.png]

<!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>

效果如下：  
![在这里插入图片描述][be66c1593f1645c7bd855f269db37b48.png]  
2.服务端准备，修改之前建立的"express基本使用.js"文件：  
![在这里插入图片描述][6ce57feed049403aa1b045b6c0aa96d8.png]![在这里插入图片描述][e7389efae6924888b6411ff0ca696920.png]  
![在这里插入图片描述][7d1e59946ed7456c82c65883c3f7edb1.png]  
五、AJAX操作基本步骤  
补充：http响应报文格式  
![在这里插入图片描述][27be3379d32d4dc39cdfa0b90eee511a.png]  
修改GET.html文件：  
![在这里插入图片描述][040b83fcb16e4ded985b65e45f8b731e.png]

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

[a50b9eb25c8d41119250127dca6b41ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/794bc01dc18946f9b198283145daf6f4.png
[82ab83d7f84744b490c33ac3fb241d8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b27b96e18a264d4b964f9ce7816cdc89.png
[60c94ce7a79e4976ad68ee054476b99b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9fbdf870959448d8bab0f69c5781c323.png
[a2ef80f79d57447e9488e33e3021a0df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/632f6124897c45e7b99ee3084d8a46bb.png
[24552bdb1ef34000b41f36f46eb80f10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c5e997074b71444bb69bf2a31b34c87b.png
[117639263715453eb41388b510accac4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/98d416e7211a4486afcd606af85cbc9a.png
[eb1eccc18b2349e7833aa62928d67e58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1c2650dc2a53458a941ac81fa220bbad.png
[be66c1593f1645c7bd855f269db37b48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/69f91380af894397bd8ecbbe51b43d9b.png
[6ce57feed049403aa1b045b6c0aa96d8.png]: https://img-blog.csdnimg.cn/6ce57feed049403aa1b045b6c0aa96d8.png
[e7389efae6924888b6411ff0ca696920.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f8d360f11eb04b0e88e3729ea31bffe6.png
[7d1e59946ed7456c82c65883c3f7edb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ee71db7f43964e1e9c26e26bfbf133be.png
[27be3379d32d4dc39cdfa0b90eee511a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/79ce2c96562341c69e7259c78d9d867b.png
[040b83fcb16e4ded985b65e45f8b731e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1953aecd9f5a4a949aa79d42cf572502.png
[1e332b06499c484db2fc7da78b4194fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ee26a683ec9144eb8196329080e2a497.png
[11666da08229439aa2347fd09648e5b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/19cccd1984d347e18aec9d6193bff488.png
[3d65510b715145ecaca095b2c5f6adbe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/cacb5ca9a3844dc29d06d751d8694188.png
[6bf567d1af4b4247bb08dd17f815251b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f91fb38e0712488dbba868f8e40942d9.png
[dfae84082c43461ab36bfad703c73f27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b585d8a10c4a4e02bf1ff76dc4904d30.png
[b0f2a0357e17480987464fb449e3b950.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7b40f03d1a09440d8d11263af19c65a0.png
[ef2f1c36949245eaa8a3f8e4a233ca99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/13c9c06fe11d4103b4adb2f4bb6c9a8e.png
[e0f4e863005248dea42e5b3ddaaec922.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f77f382468024ba393b56952d2354add.png
[d03fc9f6992c45e98667d02f07cd681e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/262e9ce950434510920ca8171ac87f4c.png
[faf6cb96203c42d1b6548a54c2e3094c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/193fc56a503c4169b9efb12c6df8c25d.png
[a7a47cfc33504c319e66f6ac0916f884.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2464d30a38c24c2f8a22c6d4035836cd.png
[d5754e125c4d48bbab1ac9fc63ab7b55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7f579babaf9e404da22847c2b833e978.png
[eeef99253cf347a79d879c96c64add4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/26de5bcf28f64ab982c7134d6530c70d.png
[e8173e486fb246e8811a5fe7789b9d92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9be2b76b729f4d7fbbe8841a8b224751.png
[ef1152317dd54b1fb2e7e6edf9d25846.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6ab991c42a8c4c598f06e37e6aaaf33d.png
[86f97338901646719cb89121955be4d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a397dff6b9084ab9a059c6b55a61ddf2.png
[4adddb709ae549ce8379e9c171390077.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3736a0dd09a4446db9e805c854bba48c.png
[6aa9f4a0b17c439682466aa6bb482044.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/66694239142a4016b26f205a1e8a8f15.png