Nodejs之学习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();
2）告诉Ajax请求地址以及请求⽅式
xhr.open('get','ample?name=anni&age=20');
第⼀个参数为get请求⽅式；
第⼆个参数为请求地址，也是服务器端路由对应的请求地址
3）发送请求
xhr.send();
4）获取服务器端给与客户端的响应数据
console.sponseText);
}
看⼀下图⽰流程
代码展⽰⼀下上述图⽰的操作步骤
//1、创建异步对象
var xhr =new XMLHttpRequest();
/
/2.绑定监听事件（接受请求）
//此⽅法会被调⽤4次，最后⼀次，readyState===4
//当响应状态码为200时，才是我们要的响应结果，xhr.statues===200
adyState==4&&xhr.status==200){
//把响应数据存储到变量result中
var result = sponseText;
console.log(result);;
}
}
//3.打开链接（创建请求）
xhr.open('get','/demo/ajaxdemo',true);
//4.发送请求
xhr.send();
1、Ajax状态码
在创建Ajax对象，配置Ajax对象发送请求，以及接收完服务器端响应数据，这个过程中的每⼀步骤都会对应⼀个数值，这个数值就是Ajax 状态码。
0：请求未初始化（还没有调⽤open()）
1：请求已经建⽴，但是还没有发送（还没有调⽤send()）
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以⽤了
4：响应已经完成，可以获取并使⽤服务器的响应了
获取ajax 状态码
五、Ajax 的封装
$.ajax({
url:'localhost:3000/login/check',
type:'get',
success:function(data){
console.log(data);
}
})
五、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 >
<div>
<label>⽤户名：
<input type="text" id ="username">
<span id ="name_info"></span>
</label>
<br><br>
<label for="">密 ；码：
<input type="password" id="userpwd">
<span id="pwd_info"></span>javascript登录注册界面
</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 = ElementById('btn_login');
// lick = function(){
// //获取⽤户输⼊的信息
// let name = ElementById('username').value;
// let pwd = ElementById('userpwd').value;
// //创建ajax的核⼼对象
// let xhr = new XMLHttpRequest()
/
/ //拼接参数
// let params = "username="+name+"&userpwd="+pwd
// //建⽴和服务器的连接
// xhr.open('get','localhost:3000/login/check?'+params)
// xhr.open('get','localhost:3000/login/check?'+params)
// //定义状态改变时的回调函数
// adystatechange = function(){
// adyState === 4 && xhr.status === 200){ //请求响应的过程是否完成// sponseText === '101'){
// ElementById('name_info').innerHTML = "⽤户名错误"; // }else sponseText === '102'){
// ElementById('pwd_info').innerHTML = "密码错误";
// }else{
// ElementById('info').innerHTML = '合法⽤户';
// }
// }
// }
// //向服务器发送请求
// xhr.send();
// }
2、JQeury实现
$(function(){
$('#btn_get').click(function(){
/
/获取⽤户输⼊的信息
let name =$("#username").val();
let pwd =$('#userpwd').val();
//向服务端发送请求
$.ajax({
url:'localhost:3000/login/check',
type:'get',
data:{
username:name,
userpwd:pwd
},
dataType:'json',
success:function(result){//服务器端返回的数据
de===101){
$('#name_info').html(result.msg)
}else de===102){
$('#pwd_info').html(result.msg)
}else{
$('#info').html(result.msg)
}
}
})
})
})
</script>
</body>
</html>
2、服务区端代码：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论