![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：只有总结？？？下次再这样写就不算合格了，课后记得要多练习
Collection
Collection
AJAX的定义：
1. Ajax: 用户与服务器之间进行异步交互
2. 同步: 所有操作按事先约定的步骤进行,前面工作未完成,后面工作不能开始,遇到执行时间过长的操作,会千万阻塞
例如传统的表单提交,在等待服务器处理结果返回之前,用户只能等待
3. 异步: 所有操作放到队列中,前一个操作不必等到执行结果,后一个操作就可以开始,前一操作执行完成后通过事件通知调用者即可
所以, 异步是基于事件机制的, 并通过事先设置的回调函数来处理响应数据, 不会形成阻塞
4. 同步与异步的根本区别在于: 请求发出后, 是否需要等待结果, 必须等待结果就是同步, 不用等待继续执行就是异步
5. Ajax: 执行异步操作最有用的工具,可以代理用户的请求,并对执行结果进行回调处理,例如局部刷新,非阻塞验证等
6. 所有Ajax操作,都是通过一个: XMLHttpRequest 对象来实现
——以异步验证表单为例写AJAX
前端页面布局——
<form action="admin/check01.php" method="POST" name="login"> <p> <label for="email">邮箱:</label> <input type="email" name="email"> </p> <p> <label for="password">密码:</label> <input type="password" name="password"> </p> <p> <button>登录</button> <!-- 占位符:显示提示信息 --> <span id="tips" style="color:red"></span> </p> </form>
第一步——获取所有节点
var login = document.forms['login'];
var email = document.getElementsByName('email')[0];
var password = document.getElementsByName('password')[0];
var btn = document.getElementsByTagName('button')[0];
var tips = document.getElementById('tips');第二步——创建ajax请求对象（ajax部分开始）
var request = new XMLHttpRequest();
第三步——编写请求成功后的回调处理（这个例子是将php中返回的值添加入tips中）
request.onreadystatechange = function () {
// 当请求完成(4)并成功的获取到了数据(200)
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息
tips.innerHTML = this.responseText;
}
}第四步——设置请求参数
request.open('POST', 'admin/check01.php', true);第五步——添加表头信息（只有post方法需要）
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');第六步——发送请求（ajax部分结束）
request.send('email=' + email.value + '&password=' + password.value);第七步——完善其他功能（不再详细说明）
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax原理与应用</title>
</head>
<body>
<!--
1. Ajax: 用户与服务器之间进行异步交互
2. 同步: 所有操作按事先约定的步骤进行,前面工作未完成,后面工作不能开始,遇到执行时间过长的操作,会千万阻塞
例如传统的表单提交,在等待服务器处理结果返回之前,用户只能等待
3. 异步: 所有操作放到队列中,前一个操作不必等到执行结果,后一个操作就可以开始,前一操作执行完成后通过事件通知调用者即可
所以, 异步是基于事件机制的, 并通过事先设置的回调函数来处理响应数据, 不会形成阻塞
4. 同步与异步的根本区别在于: 请求发出后, 是否需要等待结果, 必须等待结果就是同步, 不用等待继续执行就是异步
5. Ajax: 执行异步操作最有用的工具,可以代理用户的请求,并对执行结果进行回调处理,例如局部刷新,非阻塞验证等
6. 所有Ajax操作,都是通过一个: XMLHttpRequest 对象来实现
-->
<!-- 下面以异步表单验证为例,学习Ajax -->
<!-- check.php: 传统的同步方式处理 -->
<!-- check01.php: Ajax异步处理 -->
<h2>用户登录</h2>
<form action="admin/check01.php" method="POST" name="login">
<p>
<label for="email">邮箱:</label>
<input type="email" name="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password">
</p>
<p>
<button>登录</button>
<!-- 占位符:显示提示信息 -->
<span id="tips" style="color:red"></span>
</p>
</form>
<!-- 异步Ajax验证 -->
<script>
// 获取表单对象与控件
var login = document.forms['login'];
var email = document.getElementsByName('email')[0];
var password = document.getElementsByName('password')[0];
var btn = document.getElementsByTagName('button')[0];
var tips = document.getElementById('tips');
// 验证邮箱
email.onblur = function () {
//1. 创建ajax请求对象
var request = new XMLHttpRequest();
//2. 请求成功的回调处理
request.onreadystatechange = function () {
// 当请求完成(4)并成功的获取到了数据(200)
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息
tips.innerHTML = this.responseText;
}
}
//3. 设置请求参数
request.open('POST', 'admin/check01.php', true);
//4. POST请求需要设置请求头信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//5. 发送请求
request.send('email=' + email.value + '&password=' + password.value);
}
// 用户修改信息时,清空提示信息
email.oninput = function () {
tips.innerHTML = '';
}
// 验证密码
password.onblur = function () {
//1. 创建ajax请求对象
var request = new XMLHttpRequest();
//2. 请求成功的回调处理
request.onreadystatechange = function () {
// 当请求完成(4)并成功的获取到了数据(200)
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息
tips.innerHTML = this.responseText;
}
}
//3. 设置请求参数
request.open('POST', 'admin/check01.php', true);
//4. POST请求需要设置请求头信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//5. 发送请求
request.send('email=' + email.value + '&password=' + password.value);
}
// 用户修改信息时,清空提示信息
password.oninput = function () {
tips.innerHTML = '';
}
// 上面的邮箱和密码的验证有很多重复代码, 可以通过将公共代码封装到函数用,实现代码复用,请自己完成
btn.onclick = function () {
if (email.value.length > 0 && password.value.length > 0) {
tips.innerHTML = '登录成功,正在跳转...';
setTimeout(function (){
location.href = 'admin/index.php';
}, 2000);
} else {
tips.innerHTML = '邮箱和密码不能为空';
}
return false;
}
</script>
</body>
</html>在此案例中可以封装一个关于ajax的函数
function a(tips,data,url){
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
if(this.readyState === 4 && this.status === 200){
tips.innerHTML = this.responseText;
}
}
request.open('POST',url,true);
request.setRequestHeader('content-type','pplication/x-www-form-urlencoded');
request.send(data);
}总结：ajax是一种页面异步刷新技术，它的使用步骤较为复杂，需要多次练习。
