Javascript
Node.js中 Ajax
本文主要是介绍Node.js中 Ajax，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
一、接口开发规范(RESTful api)
1.1 简介
RESTful规范，是目前一种比较流行的互联网软件设计规范。
这个规范约束的就是路由地址应该如何定义，返回的json接口数据应该如何规范。
什么是RESTful规范的API?
当我们使用RESTful规范来设计我们应用程序接口(API)时对于同一个资源(比如：班级、学生、成绩等)的路径使用同一个，然后通过不同的请求方式来区别具体的操作(比如：添加、修改、删除等)。
1.2 优点：
使开发者在进行独立开发或协作开发更能标准，以达到行业的统一。它结构清晰、符合标准、易于理解、扩展方便，越来越多的开发者遵守这种规范。
1.3 常用方法规范
(1)GET：SELECT 获取资源
(2)POST：CREATE 创建资源
(3)PUT：UPDATE 更新资源
(4)DELETE：DELETE 删除资源
1.3.1路由如何定义
| 路径 | 请求方式 | 参数 | 备注 |
|---|---|---|---|
| /class | get | cla:班级名称、可选 | 查询班级信息 |
| /class | post | cla:班级名称、teacher:班主任 ， 必填 | 添加班级信息 |
| /class | put | claid:班级id、必填，cla:班级名称、teacher:班主任 | 修改班级信息 |
| /class | delete | claid:班级id、必填 | 删除班级信息 |
1.3.2返回的json数据如何规范
1.4 根据RESTful 进行接口开发
(1)使用express脚手架生成接口项目 express --view=ejs myapp
(2)进入myapp目录 安装依赖 npm install
(3)创建student.js到routes目录中
(4)定义模块化路由代码
(5)在入口文件app.js中引入路由
(6)启动项目
二、原生ajax
2.1. 介绍
2.1.1 定义
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，它是利用客户端(浏览器的)XMLHttpRequest对象来发送http请求给服务端。
2.1.2 传统请求的问题
2.1.3 Ajax优势和作用
2.1.4 Ajax请求与传统请求的区别：
-
传统方式请求【同步】：
以同步方式发送请求给服务端，在没有收到服务端返回的响应之前什么事情都做不了，一直处于等待状态，用户体验不好。
-
ajax方式请求：
ajax的原理见下图：【重点】
2.1.5 应用场景：
只要是页面中局部更新内容都可以使用ajax进行处理。
2.1.5.1 表单验证：
2.1.5.2 数据分页显示：
2.2. 原理
2.2.1 方法
2.2.1.1 XMLHttpRequest
创建ajax对象的语法：
let xhr =new XMLHttpRequest();
描述：创建 ajax对象
2.2.1.2 open
创建请求给ajax对象的语法：
xhr.open(method,url,async)
描述：规定请求的类型、URL 以及是否异步处理请求。
2.2.1.3 send
ajax对象将请求发送给服务器的语法：
xhr.send(string)
描述：将请求发送到服务器。string：仅用于 POST 请求
2.2.2 属性
2.2.2.1 readyState
语法：
xhr.readyState
描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。
包含的状态值（请求在服务器处理的每一个步骤）：
(1)0：请求未初始化，还没有调用open
(2)1：请求已经建立，但是还没有发送send
(3)2：请求已经发送
(4)3：请求正在处理中，通常响应中已经有部分数据可以用了
(5)4：响应已经完成，可以获取并使用服务器的响应
2.2.2.2 status
语法：
xhr.status //获取http协议的状态以判断这次交互是否正常
描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成)
常见状态码：200，304，404，500
2.2.2.3 responseText
语法：
xhr.responseText //获取服务端返回的响应
描述：获得来自服务器的响应
2.2.3 事件
语法：
xhr.onreadystatechange = callback //注册事件：处理服务端返回的响应
描述：当请求被发送到服务器时，每当 readyState 改变时，就会触发 onreadystatechange 事件
2.3 实现步骤
(1)创建Ajax对象
(2)Ajax请求的地址与请求方式
(3)发送请求
(4)获取服务器响应给客户端的数据
(5)处理服务器响应数据JSON.parse和JSON.stringify
完整案例
2.4. ajax的get和post传参
2.4.1 get
语法：
xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')
描述：get传参只需要在url地址后按照?key=value格式进行传递
代码案例：
服务端的代码如下：
const express = require('express');
const path = require('path');
const app = express();
app.listen(3000, () => {
console.log('3000端口');
});
app.use(express.urlencoded({ extended: false }));
//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', [`${path.join(__dirname,'views')}`]); //设置模板文件的存放位置
app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析
//显示注册界面:
app.get('/zhuce', (req, res) => {
res.render('zhuce.html');
});
//判断用户是否注册过：
app.get('/checkuser', (req, res) => {
//app.post('/checkuser', (req, res) => {
let curuser = req.query.uname ? req.query.uname : '';
//let curuser = req.body.uname ? req.body.uname : '';
// console.log(curuser, req.body, 9999);
if (curuser == 'zhangsan') {
// res.send(`帐号已注册`);
res.send({ status: 500, msg: '帐号已注册' });
} else {
// res.send(`帐号可用`);
res.send({ status: 200, msg: '帐号可用' });
}
});
zhuce.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>Document</title>
</head>
<body>
<div>帐号:<input type="text" name="usr" id="usr"><span id="umsg"></span></div>
<div>密码:<input type="password" name="pwd" id="pwd"></div>
<div>密码:<input type="password" name="repwd" id="repwd"></div>
<div><input type="button" value="注册"></div>
<script>
//第一步：创建ajax对象：
let xhr = new XMLHttpRequest();
let usrObj = document.getElementById('usr');
let spanObj = document.getElementById('umsg');
usrObj.onblur = function() {
//第二步：创建请求给ajax对象：xhr.open('请求方式','请求资源',true/false[是否为异步]);
xhr.open('get', `/checkuser?uname=${usrObj.value}`, true);
//xhr.open('post', `/checkuser`, true);
//设置请求头信息：设置表单编码格式为键值对格式
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//注册事件：处理服务端返回的响应
xhr.onreadystatechange = myfn;
//第三步：ajax对象将请求发送到服务端：xhr.send()
xhr.send();
//xhr.send(`uname=${usrObj.value}&age=20`)
}
function myfn() {
// alert(xhr.readyState);
//第四步：服务端处理完请求并返回响应给ajax对象
if (xhr.readyState == 4) {
// alert(xhr.responseText);
if (xhr.status == 200) { //判断http协议状态码：表示与服务端的交互是正常的
let resObj = JSON.parse(xhr.responseText); //转换成json对象
//第五步：ajax对象将响应填充到页面相关位置
spanObj.innerHTML = resObj.msg;
if (resObj.status == 500) { //已注册
spanObj.style.color = 'red';
} else { //未注册
spanObj.style.color = 'green';
}
}
}
}
</script>
</body>
</html>
2.4.2 post
语法1:
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('username=ujiuye&password=123456');
语法2：
xhr.setRequestHeader('Content-Type', 'application/json')
let data = {username:'ujiuye',password:'123456'}
xhr.send(JSON.stringify(data))
描述：使用setRequestHeader设置响应头，并传递对应的post参数
代码案例：
const express = require('express');
const path = require('path');
const app = express();
app.listen(3000, () => {
console.log('3000端口');
});
app.use(express.urlencoded({ extended: false }));
//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', [`${path.join(__dirname,'views')}`]); //设置模板文件的存放位置
app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析
//显示注册界面:
app.get('/zhuce', (req, res) => {
res.render('zhuce.html');
});
//判断用户是否注册过：
// app.get('/checkuser', (req, res) => {
app.post('/checkuser', (req, res) => {
// let curuser = req.query.uname ? req.query.uname : '';
let curuser = req.body.uname ? req.body.uname : '';
// console.log(curuser, req.body, 9999);
if (curuser == 'zhangsan') {
// res.send(`帐号已注册`);
res.send({ status: 500, msg: '帐号已注册' });
} else {
// res.send(`帐号可用`);
res.send({ status: 200, msg: '帐号可用' });
}
});
zhuce.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>Document</title>
</head>
<body>
<div>帐号:<input type="text" name="usr" id="usr"><span id="umsg"></span></div>
<div>密码:<input type="password" name="pwd" id="pwd"></div>
<div>密码:<input type="password" name="repwd" id="repwd"></div>
<div><input type="button" value="注册"></div>
<script>
//第一步：创建ajax对象：
let xhr = new XMLHttpRequest();
let usrObj = document.getElementById('usr');
let spanObj = document.getElementById('umsg');
usrObj.onblur = function() {
//第二步：创建请求给ajax对象：xhr.open('请求方式','请求资源',true/false[是否为异步]);
// xhr.open('get', `/checkuser?uname=${usrObj.value}`, true);
xhr.open('post', `/checkuser`, true);
//设置请求头信息：设置表单编码格式为键值对格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//注册事件：处理服务端返回的响应
xhr.onreadystatechange = myfn;
//第三步：ajax对象将请求发送到服务端：xhr.send()
// xhr.send();
xhr.send(`uname=${usrObj.value}&age=20`)
}
function myfn() {
// alert(xhr.readyState);
//第四步：服务端处理完请求并返回响应给ajax对象
if (xhr.readyState == 4) {
// alert(xhr.responseText);
if (xhr.status == 200) { //判断http协议状态码：表示与服务端的交互是正常的
let resObj = JSON.parse(xhr.responseText); //转换成json对象
//第五步：ajax对象将响应填充到页面相关位置
spanObj.innerHTML = resObj.msg;
if (resObj.status == 500) { //已注册
spanObj.style.color = 'red';
} else { //未注册
spanObj.style.color = 'green';
}
}
}
}
</script>
</body>
</html>
三、Jquery之Ajax
3.1 get
语法：
$.get(请求地址,{请求参数},回调方法,'json[期望服务端返回的数据类型]')
描述：发送get请求
代码案例：
3.2 post
语法：
$.post(请求地址,{请求参数},回调方法,'json[期望服务端返回的数据类型]')
描述：发送post请求，data为请求时传递的参数
代码案例：
3.3 ajax
语法：
$.ajax({
type: 'get/psot', //请求方式
url: '', //请求地址
data: { }, //请求的参数
success: function(res) { } , //成功时的回调方法
error:function(err){} //错误时的回调方法
})
描述：可以发送get和post请求
服务端的代码如下：
const express = require('express');
const path = require('path');
const app = express();
app.listen(3000, () => {
console.log('3000端口');
});
app.use(express.urlencoded({ extended: false }));
//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', [`${path.join(__dirname,'views')}`]); //设置模板文件的存放位置
app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析
//显示注册界面:
app.get('/zhuce', (req, res) => {
res.render('zhuce.html');
});
//判断用户是否注册过：
// app.get('/checkuser', (req, res) => {
app.post('/checkuser', (req, res) => {
// let curuser = req.query.uname ? req.query.uname : '';
let curuser = req.body.uname ? req.body.uname : '';
// console.log(curuser, req.body, 9999);
if (curuser == 'zhangsan') {
// res.send(`帐号已注册`);
res.send({ status: 500, msg: '帐号已注册' });
} else {
// res.send(`帐号可用`);
res.send({ status: 200, msg: '帐号可用' });
}
});
zhuce.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>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>帐号:<input type="text" name="usr" id="usr"><span id="umsg"></span></div>
<div>密码:<input type="password" name="pwd" id="pwd"></div>
<div>密码:<input type="password" name="repwd" id="repwd"></div>
<div><input type="button" value="注册"></div>
<script>
$("#usr").blur(function() {
//以post方式发送ajax请求：
// $.post('/checkuser', {
// "uname": $("#usr").val(),
// "email": "lisi@qq.com"
// }, function(data) {
// $("#umsg").html(data.msg);
// if (data.status == 200) {
// $("#umsg").css('color', 'green');
// } else {
// $("#umsg").css('color', 'red');
// }
// }, 'json');
//以get方式发送ajax请求：
// $.get('/checkuser', {
// "uname": $("#usr").val(),
// "email": "lisi@qq.com"
// }, function(d) {
// $("#umsg").html(d.msg);
// if (d.status == 200) {
// $("#umsg").css('color', 'green');
// } else {
// $("#umsg").css('color', 'red');
// }
// }, 'json');
$.ajax({
url: '/checkuser', //请求地址
type: 'post', //请求方式
// type: 'get',
data: {
"uname": $("#usr").val(),
"age": 20
}, //请求的参数
dataType: 'json', //期望服务端返回的数据格式
//success:成功时的回调方法
success: function(d) {
console.log(d, 7777);
$("#umsg").html(d.msg);
if (d.status == 200) {
$("#umsg").css('color', 'green');
} else {
$("#umsg").css('color', 'red');
}
},
//error:错误时的回调方法
error: function(err) {
console.log(err, 111111);
}
});
});
</script>
</body>
</html>
这篇关于Node.js中 Ajax的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
React入门教程：从零开始搭建你的第一个React应用12-26
-
Vue2入门教程：轻松掌握前端开发基础12-25
-
Vue3入门指南：快速搭建你的第一个Vue3项目12-25
-
JS基础知识入门教程12-25
-
React基础知识详解：从入门到初级应用12-25
-
Vue3基础知识详解与实战指南12-25
-
Vue3学习：从入门到初步掌握12-25
-
Vue3入门：新手必读的简单教程12-25
-
【JS逆向百例】爱疯官网登录逆向分析12-23
-
Vue3教程：新手入门到实践应用12-21
-
VueRouter4教程：从入门到实践12-21
-
Vue3项目实战：从入门到上手12-20
-
Vue3项目实战：新手入门教程12-20
-
VueRouter4项目实战：新手入门教程12-20
-
如何实现JDBC和jsp的关系？-icode9专业技术文章分享12-20
栏目导航
