知新_RL

这个屌丝很懒，什么也没留下！

热门标签

Nodejs 之学习Ajax 附(实现用户登录案例）_nodejshtml 显示登录的用户

作者：知新_RL | 2024-02-20 06:30:27

踩

nodejshtml 显示登录的用户

Ajax

一、Ajax概述
二、Ajax应用场景
三、Ajax的运行环境和原理
- 1、Ajax运行环境
- 2、Ajax运行原理
四、Ajax的实现步骤
五、Ajax的功能
六、案例

了解Ajax之前，我们先了解一下传统网站存在的问题吧
1.网速慢的情况下，页面加载时间长，用户只能等待。
2.表单提交后，如果一项内容不合格，需要重新填写所有表单内容，比如你在注册的时候，填写了很多内容，但是因为这个名称被使用过，这时候页面返回信息让你重新注册，内容都被刷新过所以之前填写的都消失了，这时候你是不是很难过那？
3.页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。

一、Ajax概述

Ajax可以解决传统网页的方法，它可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的内容，从而提高用户浏览网站的体验。
Ajax 全名 async javascript and XML(异步JavaScript和XML)，是前后台交互的能⼒，也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具，它不是新的编程语言，而是一种使用现有标准的新方法。

Ajax默认执行异步请求，那么先来看一下同步请求和异步请求。

同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态
默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。一般默认值为true。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

二、Ajax应用场景

1）页面上拉加载更多数据。
2）列表数据无刷新分页，只有表格数据展现分页，其余区域不会出现内容刷新。
3）表单项离开焦点数据验证，用户注册信息时候，鼠标离开焦点后显示当前用户名是否已经被注册。
4）搜索框提示文字下拉列表，在我们在百度搜索内容时，文字下方会有一些内容提示，用户可以根据提示直接选择文字。

总结：Ajax主要用在不刷新页面的情况下，向服务器端发送请求和服务器端进行交互，从而更改客户端页面中的数据或者状态，主要目的是为了提高用户浏览网站的体验。

三、Ajax的运行环境和原理

1、Ajax运行环境

Ajax技术需要运行在网站环境中才能生效，不能直接双击html文件运行，我们学习Ajax可以借助node开启网站服务器，并且实现静态资源访问的功能，将代码写在html文件中，然后将html文件放在静态资源文件夹里，这样才可以通过域名的方式来访问html文件。

2、Ajax运行原理

传统网站应用中，由浏览器本身向服务器端发送请求，由浏览器端本身接收服务器端响应到的数据，由于浏览器在发送请求和接受请求之间不能再继续响应用户的其他操作，比如继续拉动当前页面，所用用户体验不好。并且开发人员不可控。
在这里插入图片描述

那么我们想要实现在浏览器端向服务器端发送请求，并将请求来的数据在不刷新页面的情况下更新在页面当中，这时候就需要一个代理人帮助浏览器做这个事情，那么浏览器就可以空闲下来响应用户的操作，实际上，这个代理人就是Ajax，由Ajax帮助浏览器向服务器端发送请求，并且由Ajax接收服务器端响应到客户端的数据，再使用DOM方法将服务器端发送过来的数据内容添加到页面当中，这样就可以实现用户边浏览网站边向服务器端响应数据，并且实现页面无刷新更新数据。使用Ajax开发人员可控，可以为用户做加载提示以进一步提高用户体验。
在这里插入图片描述

四、Ajax的实现步骤

1）创建Ajax对象

var xhr = new XMLHttpRequest();
1

2）告诉Ajax请求地址以及请求方式

xhr.open('get','http://www.example.com?name=anni&age=20');
1

第一个参数为get请求方式；
第二个参数为请求地址，也是服务器端路由对应的请求地址
3）发送请求

xhr.send();
1

4）获取服务器端给与客户端的响应数据

xhr.onload = function(){
  console.log(xhr.responseText);
}
1
2
3

看一下图示流程
在这里插入图片描述
代码展示一下上述图示的操作步骤

//1、创建异步对象
var xhr = new XMLHttpRequest();
//2.绑定监听事件（接受请求）
    xhr.onreadystatechange = function(){
        //此方法会被调用4次，最后一次，readyState===4
        //当响应状态码为200时，才是我们要的响应结果，xhr.statues===200
        if(xhr.readyState==4&&xhr.status==200){
            //把响应数据存储到变量result中
            var result = xhr.responseText;
            console.log(result);;
        }
    }
//3.打开链接（创建请求）
xhr.open('get','/demo/ajaxdemo',true);
//4.发送请求
xhr.send();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1、Ajax状态码
在创建Ajax对象，配置Ajax对象发送请求，以及接收完服务器端响应数据，这个过程中的每一步骤都会对应一个数值，这个数值就是Ajax状态码。
0：请求未初始化（还没有调用open()）
1：请求已经建立，但是还没有发送（还没有调用send()）
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了

获取ajax 状态码

xhr.readyState   //获取ajax 状态码
1

五、Ajax 的封装

   $.ajax({
     url:'http://localhost:3000/login/check',
     type:'get',
	 success:function (data){
 		 console.log(data);
 		 }
   })		 
1
2
3
4
5
6
7

五、Ajax的功能

AJAX提供与服务器异步通信的能力，可以在Web页面触发的JavaScript事件中向服务器发出异步请求，执行更新或查询数据库
AJAX的核心是JavaScript对象XMLHttpRequest，该对象在IE5中首次引入，使用户通过JavaScript向服务器提出请求并处理响应，而不阻塞用户
当Web服务器的响应返回时，使用JavaScript回调函数和CSS来相应地更新页面的局部内容，而不是刷新整个页面
在页面与服务器交互的过程中不中断用户操作，用户甚至察觉不到浏览器正在与服务器通信

六、案例

要求：当用户输入错误的用户名时提示用户名错误，输入错误的密码时提示密码错误，当用户输入用户名和密码都正确时提示合法用户。

1、编写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 style="text-align:center;">
    <div>
        <label>用户名：
            <input type="text" id = "username">
            <span id = "name_info"></span>
        </label>
        <br><br>
        <label for="">密&nbsp;&nbsp;&nbsp;码：
             <input type="password" id="userpwd">&nbsp;&nbsp;&nbsp;
             <span id="pwd_info"></span>
         </label>
        <br><br>
        <!-- <button id = "btn_get">get方式登录</button>
        <button id = "btn_post">post方式登录</button> -->
        <button id = "btn_login">登录</button>
        <br><br>
        <h2 id = "info"></h2>
    </div>

   <script>
      1、JS实现
    // let btn = document.getElementById('btn_login');
    //     btn.onclick = function(){
    //         //获取用户输入的信息
    //         let name = document.getElementById('username').value;
    //         let pwd = document.getElementById('userpwd').value;    
    //         //创建ajax的核心对象
    //         let xhr = new XMLHttpRequest()
    //         //拼接参数
    //         let params = "username="+name+"&userpwd="+pwd
    //         //建立和服务器的连接
    //         xhr.open('get','http://localhost:3000/login/check?'+params)
    //         //定义状态改变时的回调函数
    //         xhr.onreadystatechange = function(){
    //          if(xhr.readyState === 4 && xhr.status === 200){  //请求响应的过程是否完成
    //             if(xhr.responseText === '101'){
    //                 document.getElementById('name_info').innerHTML = "用户名错误";
    //             }else if(xhr.responseText === '102'){
    //                 document.getElementById('pwd_info').innerHTML = "密码错误";
    //             }else{
    //                 document.getElementById('info').innerHTML = '合法用户';
    //             }
    //         }
    //     }
    //     //向服务器发送请求
    //     xhr.send();
    // }
   2、JQeury实现
      $(function(){
           $('#btn_get').click(function(){
                //获取用户输入的信息
                let name = $("#username").val();
                let pwd = $('#userpwd').val();
               //向服务端发送请求
                $.ajax({
                     url:'http://localhost:3000/login/check',
                     type:'get',
                     data:{
                       username:name,
                       userpwd:pwd
                },
                     dataType:'json',
                     success:function(result){   //服务器端返回的数据
                     if(result.code===101){
                          $('#name_info').html(result.msg)
                          }else if(result.code===102){
                               $('#pwd_info').html(result.msg)
                          }else{
                               $('#info').html(result.msg)
                          }
                     }
                }) 
               })
          })
	</script>    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

2、服务区端代码：

const express= require('express');
const router = express.Router();

/*
    localhost:3000/local/check
 */

router.get('/check',(req,res)=>{
    //获取客户端的get请求参数:req.query
    let uname = req.query.username
    let upwd = req.query.userpwd   //获取用户名和密码

    let msg = {}
    //对用户名进行判断
    if(uname !== '123'){
        res.send('101')
    }else if(upwd !== '123456'){
        res.send('102')
    }else{
        res.send('1000')
    }
})
module.exports = router;


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

配置app.js

var express = require('express');
var app = express();
var loginRouter = require('./routes/login')
app.use('/login',loginRouter) ;
module.exports = app;
1
2
3
4
5

3、效果展示：
在这里插入图片描述

暂时还不能实现将展示的用户名失败和密码失败撤回，后期优化了再继续更正。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/118884