ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

Node.js中 Ajax

2021-11-29 22:00:38  阅读:123  来源: 互联网

标签:Node 请求 res app req ajax js xhr 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路由如何定义

路径请求方式参数备注
/classgetcla:班级名称、可选查询班级信息
/classpostcla:班级名称、teacher:班主任 , 必填添加班级信息
/classputclaid:班级id、必填,cla:班级名称、teacher:班主任修改班级信息
/classdeleteclaid:班级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,请求,res,app,req,ajax,js,xhr,Ajax
来源: https://blog.csdn.net/weixin_60488295/article/details/121620654

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有