Ajax的基本使用（以express框架为例）

最新推荐文章于 2023-10-02 15:26:20 发布
最新推荐文章于 2023-10-02 15:26:20 发布
阅读量637 收藏 1
点赞数 2
分类专栏： 前后端开发技术 文章标签： ajax express javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52785473/article/details/126461517
版权

文章目录

AJAX

Ajax全称为Asynchronous JavaScript And XML，就是一步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大优势就是无刷新获取数据。
AJAX不是新的编程语言，而是一种将现有的标准组合在一起的新方式。
XML可扩展标记语言
XML被设计用来传输和存储数据
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据
不过可以用json代替

AJAX优点：
1） 可以无需刷新页面与服务器进行通信
2） 允许你根据用户事件来更新部分页面内容
AJAX缺点：
1）没有浏览历史，不能回退
2）存在跨域问题
3）SEO不友好

HTTP协议：
Hypertext transport protocol协议，协议详细规定了浏览器和万维网服务器之间相互通信的规则约定。

请求报文
行： GET
头： Host:atguigu.com
Cookie:name=guigu
…
空行
体 username=admin&password=admin

响应报文
行：HTTP/1.1 200 OK
头：Content-Type:text/html;charset=utf-8
…
体：

Express框架

因为AJAX需要向服务端发送请求，因此我们需要一个服务端，Express框架比较简单，借助基本的功能就能够使用AJAX。

Express是基于node.js的需要先安装node.js

安装

终端打开输入：

npm init --yes

执行完成会出现一个package.json的文件
然后安装express
输入

npm i express

安装完成了。

实例

express的基本使用

创建express基本使用.js:

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

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

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

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

然后控制台进入当前文件夹下执行

node express基本使用.js

运行输出：
在这里插入图片描述
说明成功运行。

GET请求

点击按钮则发送请求

GET.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button type="button">点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素
        const btn = document.getElementsByTagName("button")[0];
        const result = document.getElementById("result");
        // 绑定事件
        btn.onclick = function() {
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化,设置请求方法和url
            xhr.open("GET", "http://127.0.0.1:8000/server?a=100&b=200&c=300")
            // 发送
            xhr.send();
            // 事件绑定 处理服务端返回的结果
            // on  when 当...时候
            // readystate 是xhr对象的属性,表示状态0 1 2 3 4
            // change 改变
            xhr.onreadystatechange = function() {
                // 判断(服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    // 判断服务端返回了所有的结果
                    // 2xx成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                        // console.log(xhr.status);
                        // console.log(xhr.statusText);
                        // console.log(xhr.getAllResponseHeaders());
                        // console.log(xhr.response)

                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }
        }
    </script>
</body>
</html>

server.js:

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端口监听中....")
})

然后终端执行

node server.js

打开html文件
点击按钮，结果如下：
在这里插入图片描述

POST请求

当鼠标移动到指定区域则发送请求

POST.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST</title>
    <style>
        #result{

            width:200px;
            height: 100px;
            border: solid 1px #903
        }
    </style>
</head>
<body>
    
    <div id="result"></div>
    <script type="text/javascript">
        // 获取元素对象
        const result = document.getElementById("result");
        // 绑定事件
        result.addEventListener("mouseover", function(){
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化,设置类型与URL
            xhr.open("POST", "http://127.0.0.1:8000/server");
            // 设置请求头
            // "Content-Type",设置请求体类型
            // "application/x-www-form-urlenc"参数查询字符串类型 固定写法
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            // 发送
            xhr.send("a=100&b=200&c=300");
            // 事件绑定
            xhr.onreadystatechange = function(){
                // 判断
                if (xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

server.js

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.post('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.send("HELLO AJAX POST");
});

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

终端执行

node server.js

打开POST.html
在这里插入图片描述

当鼠标移动到框内区域结果如下：
在这里插入图片描述

发送JSON

JSON.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST</title>
    <style>
        #result{

            width:200px;
            height: 100px;
            border: solid 1px #903
        }
    </style>
</head>
<body>
    
    <div id="result"></div>
    <script type="text/javascript">
        const result = document.getElementById("result");
        // 绑定键盘按下事件
        window.onkeydown = function(){
            // 发送请求
            const xhr = new XMLHttpRequest();
            // 设置响应体数据类型(自动转换)
            xhr.responseType = 'json'
            // 初始化
            xhr.open("GET", "http://127.0.0.1:8000/server")
            // 发送
            xhr.send();
            // 事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // console.log(xhr.response)
                        // result.innerHTML = xhr.response;

                        // // 手动改变对象
                        // let data = JSON.parse(xhr.response)
                        // console.log(data)

                        // 自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

server.js:

const express = require('express');

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

// 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    // response.send("HELLO AJAX");
    const data = {
        name:"atguigu"
    };
    // 对对象进行转化
    let str = JSON.stringify(data);
    response.send(str);
});

app.post('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.send("HELLO AJAX POST");

});

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

启动服务
执行html：
在这里插入图片描述
当按下键盘任意键时：
在这里插入图片描述
值得注意的是json传输需要进行对应类型转换。

请求超时

超时.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST</title>
    <style>
        #result{

            width:200px;
            height: 100px;
            border: solid 1px #903
        }
    </style>
</head>
<body>
    
    <div id="result"></div>
    <button>点击发送请求</button>
    <script type="text/javascript">
        const result = document.querySelector("#result");
        const btn = document.getElementsByTagName("button")[0];

        btn.addEventListener("click", function() {
           const xhr = new XMLHttpRequest();

        //    超时回调
           xhr.timeout = 2000;
           xhr.ontimeout = function(){
            alert("网络异常,请稍后再试");
           }

        //    网络异常回调
        xhr.onerror = function(){
            alert("你的网络似乎出现了一些问题")
        }

           xhr.open("GET", "http://127.0.0.1:8000/delay");
           xhr.send();
           xhr.onreadystatechange = function() {
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300){
                    result.innerHTML = xhr.response;
                }
            }
           }
        })
    </script>
</body>
</html>

server.js:

const express = require('express');

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

// 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    // response.send("HELLO AJAX");
    const data = {
        name:"atguigu"
    };
    // 对对象进行转化
    let str = JSON.stringify(data);
    response.send(str);
});

app.post('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.send("HELLO AJAX POST");

});


app.get("/delay", (request, response) => {
    response.setHeader("Access-Control-Allow-Origin", "*");
    setTimeout(()=>{response.send("延迟响应")}, 3000);
})

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

运行得到：
在这里插入图片描述
点击按钮发送请求，请求尝试并给出提示，因为服务端给定延时大于请求端等待时间，因此能够展现这样的效果。
在这里插入图片描述

取消重复请求

取消重复请求.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST</title>
    <style>
        #result{

            width:200px;
            height: 100px;
            border: solid 1px #903
        }
    </style>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script type="text/javascript">
        // 获取元素
        const btns = document.querySelectorAll("button");
        let x = null;
        // 标识变量
        let isSending = false;
        btns[0].onclick = function(){
            // 如果正在发送则终止之前的
            if(isSending)x.abort();
            x =  new XMLHttpRequest();
            isSending = true;
            x.open("GET", "http://127.0.0.1:8000/delay");
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    isSending = false;
                }
            }
        }

        // abort
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

server.js:

const express = require('express');

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

// 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    // response.send("HELLO AJAX");
    const data = {
        name:"atguigu"
    };
    // 对对象进行转化
    let str = JSON.stringify(data);
    response.send(str);
});

app.post('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.send("HELLO AJAX POST");

});


app.get("/delay", (request, response) => {
    response.setHeader("Access-Control-Allow-Origin", "*");
    setTimeout(()=>{response.send("延迟响应")}, 3000);
})

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

运行后疯狂点击发送，发现只能存在一个相同的请求
在这里插入图片描述

Icy Hunter
关注
专栏目录
Node.js的express提供后端接口供Ajax在前端调用
studysinklc的博客
11-20 1125
首先，新建一个Node.js项目 在项目目录下安装express npm install express --save 可以用express来建立一个最简单的后端server服务 新建一个server.js文件 const express = require('express'); const app = express(); app.get('/', (req, res) =&...
jQuery对Ajax封装、Express连接数据库及ORM框架
Yannick_H的博客
07-31 918
serialize()表单序列化函数(将表单(form)中的控件的值转换成字符串)data请求参数(key/value)callback请求成功的回调函数。data请求参数(key/value)callback请求成功的回调函数。xhr.open(‘请求方式’,‘请求地址’);url请求的服务器地址。type响应信息的格式。url请求的服务器地址。type响应信息的格式。模型名.create()插入数据。模型名.destory()删除数据。模型名.update()更新数据。...
Express运用AJAX及实现JSONP
duansamve的博客
05-13 955
一、get请求： index.html <html> <head> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body> <input type="button" value="Ajax" id="...
Express框架与Ajax应用
十八岁讨厌编程的博客
04-04 1475
文章目录Express框架Ajax发送请求前的准备前端页面的准备服务端的代码准备用Ajax发送GET请求服务器端js请求端代码的注意点Ajax设置请求参数 Express框架 Express 是一个基于 Node平台的Web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。 Express 框架特性： 提供了简洁的路由定义方式 对获取 http 请求参数进行了简化处理 对模板引擎支持程度高，方便渲染动态HTML页面 拥有中间件机制有效控制 HTTP 请求 拥有大量第三方中间件对功能进行扩展
Ajax的express使用
weixin_46429290的博客
12-14 378
最外层终端打开 npm init --yes (初始化） npm i express (安装express） Express的使用 //1、引入express const express=require('express'); //2、创建应用对象 const app=express(); //3、创建路由规则 //request是对请求报文的一个封装 //response是对响应报文的一个封装 app.get('/',(request,response)=>{ //设置简单的响应 response.
Ajax——express的基本使用
weixin_53052268的博客
08-10 227
使用前端Ajax需要给服务器发送请求，而express可以模拟服务端。1.为什么要使用express框架。2.安装和使用express。
node.js express框架实现文件上传与下载功能实例详解
10-16
Node.js通过Express框架实现文件上传与下载功能，可以使用多个库和方法。例如，使用第三方库multer，它专门用于处理multipart/form-data，这类数据即HTML表单上传的文件数据。通过配置multer中间件，可以轻松地处理...
基于Express框架使用POST传递Form数据
12-09
在本文中，我们将深入探讨如何在Express框架下处理通过POST方法传递的Form数据。Express是Node.js中的一个流行Web应用框架，它简化了构建Web服务器的过程。以下是如何在客户端和服务器端实现这一功能的详细步骤。 ...
Ajax异步文件上传与NodeJS express服务端处理
11-27
Express框架提供了方便的中间件如`multer`来处理multipart/form-data类型的请求，这通常是文件上传的格式： ```javascript const express = require('express'); const multer = require('multer'); const storage...
express 和 ajax的集成
gong1422425666的博客
07-07 566
这是html里的代码 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> function aa(){ $.ajax( { url:'http://192.168.30.51/',
AJAX--Express速成
最新发布
m0_61843855的博客
10-02 1220
1、AJAX(Asynchronous JavaScript And XML)，即为异步的JavaScript 和 XML。2、异步的JavaScript它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面。浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。3、XML是前后端数据通信时传输数据的。现在比较常用的是 JSON总 ： Ajax就是在浏览器不重新加载网页的情况下，对页面的某部分进行更新。4、优势：通过AJAX从浏览器向服务器发送异步请求，
Express的Ajax实践
yangyang的专栏
07-28 2229
对于Ajax一直理解不是很深，正好这次需要用到，做个记录。 首先的前端代码 ： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;%= title %&gt;&lt;/title&gt; &lt;link rel='stylesheet' href='/stylesheets/style.css' ...
Ajax--express框架介绍与基本使用
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-25 390
Express官网： 1. express框架介绍与基本使用 express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架 1.1 创建一个Express的包 1.2 打开终端 1.3 执行 npm init --yes 做一个初始化 npm是Node.js平台下面的一个包管理工具 1.4 安装Express框架 执行 npm i express 1.5 创建一个Express基本使用.js的文件 1.6 开始使用express框架 代码： //1. 引入e
使用express框架接收和发送ajax信息
LuiChun
12-30 918
Express框架 我们的ajax需要对服务端发对请求，所以我们需要这个服务端接收和发送 Express的基本使用 使用终端进入文件夹中（ajaxtest） 1.初始化node.js npm init --yes 将会自动创建package.json文件 解释：npm是node.js平台下的一个包管理工具 2.安装express npm i express 安装完毕之后将会自动创建node_modules文件夹，package-lock.json文件 3.创建项目文件夹 在文件夹中（ajaxtest
AJAX-express基本使用
qq_49333212的博客
07-08 222
1，安装node，直接进入官网进行安装 https://nodejs.org/en/安装好之后，打开终端，输入出现如下图片 看到版本号v16.15.1，每个人版本号可能不同2，打开vscode，打开终端输入 进行初始化后，会出现文件接下来输入 安装后出现文件3,建文件 输入代码： 打开终端输入，出行如下4，浏览器输入网址，出现如下 完成！！...
AJAX基础知识(1)-express框架配合原生AJAX
m0_51207602的博客
01-25 349
1.XML简介 XML 为可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据。 比如说我有一个学生数据： name = “孙悟空” ; age = 18 ; gender = “男” ; 用 XML 表示的话： <student> <name>孙悟空</name> <age>18</age> <g
express ajax post,express接受ajax的发送post请求
weixin_35544017的博客
08-06 278
两种常用的方式:$.ajax({type: "POST",url: ‘/everdayPost‘,// data: JSON.parse({cont:data}),注意: 不需要转成字符串,转成就错了dataType: "json",data:{a:1},success: function (res) {console.log(res.cont.toString());})1 利用req.on("...
[项目][准备6] Ajax&Express体验
追风中转站
10-08 304
项目 准备6
原生ajax发送请求（服务器express搭建）
qq_55695208的博客
01-14 173
console.log(xhr.getAllResponseHeaders)//所有响应体。response.setHeader('Access-Control-Allow-Origin','*') //解决跨域问题。console.log(xhr.statusText)//状态码字符串。console.log(xhr.response)//响应体。console.log(xhr.status)//状态码。没有by时获取的是标签中的name.服务器是express搭建的。跨域问题往后会常遇到。
ajax和express
07-27
Ajax和Express是两个与Web开发相关的技术。...总结起来，Ajax主要用于实现前端与服务器之间的异步数据交互，而Express则是一个后端框架，用于构建和管理Web应用程序。它们可以配合使用，实现完整的Web应用程序开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Icy Hunter

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值