【Ajax入门技术】原生AJAXexpress的基本使用，进行不刷新页面获取到数据_ajax 无刷新技术(2)

2401_84183033

于 2024-05-06 16:33:57 发布

阅读量261

点赞数 3

分类专栏：程序员文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/2401_84183033/article/details/138499581

版权

程序员专栏收录该内容

124 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

Aic山鱼与你一起学前端😊
🖱 ⌨个人主页：山鱼的个人主页

欢迎大家加入我的个人社区——山鱼社区
如果对你有帮助的话希望三连下👍⭐✍支持一下博主🌊

前言

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势:无刷新获取数据。 AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。全名Asynchronous Javascript And XML,就是使用JS代码获取服务器数据。Asynchronous（异步）synchronous（同步）XML被设计用来传输和存储数据。

1.如何设置express

（1）首先安装node.js

（2） win+r打开cmd 输入node空格 -v 查看版本号，有的话就成功了（注：要用管理员进行打开vscode）当然也可以直接打开vscode查看

（3）然后打开vscode 打开终端输入 npm init --yes

（4）在安装这个express（成功了就会有这么俩文件，和一个node _modules ）

2.express的基本使用

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request是请求报文的封装
// response是响应报文的封装
app.get('/', (request, response) => {
// 4.设置响应
    response.send('HELLO EXPRESS')
});
// 5.监听端口启动服务
app.listen(8000, () => {
    console.log("服务已启动，8000 端口监听中.....");
})

3.举一个小🌰

要求：点击按钮发送请求，接过服务器返回的结果，然后呈现在div

// 引入express
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则
// request是请求报文的封装
// response是响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置相应体
    response.send('HELLO AJAX');
});
// 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已启动，8000 端口监听中.....");

})

然后在进行页面的书写和ajax的使用

onreadystatechange属性有五个值，分别是0 1 2 3 4
0 表示未始化最开始就是0，1表示open方法已调用完成，2表示send方法调用完毕，3表示服务端返回的部分结果4，服务端返回的所有结果

<!DOCTYPE html>
<html lang="en">

<head>


![img](https://img-blog.csdnimg.cn/img_convert/5fac25c67f349c9670eb23b6b16bc9f0.png)
![img](https://img-blog.csdnimg.cn/img_convert/b4af88dabc902e72efd7b4463386633e.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

ps://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84183033

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【Ajax入门技术】原生AJAXexpress的基本使用，进行不刷新页面获取到数据_ajax 无刷新技术(2)

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势:无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。全名JavascriptAndXML,就是使用JS代码获取服务器数据。（异步）（同步）XML被设计用来传输和存储数据。
复制链接

扫一扫