Ajax: 用户与服务器之间进行异步交互,是基于事件机制的, 并通过事先设置的回调函数来处理响应数据, 不会形成阻塞
所有Ajax操作,都是通过一个: XMLHttpRequest 对象来实现
实现AJAX异步处理一般分为5个步骤(POST)
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);//第三个参数true为是否开启异步,默认为true
4. POST请求需要设置请求头信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//为POST异步请求的固定格式
5. 发送请求
request.send('email=' + email.value + '&password=' + password.value);
Ajax: 执行异步操作最有用的工具,可以代理用户的请求,并对执行结果进行回调处理,例如局部刷新,非阻塞验证等
实例
<!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"> <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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
check01.php
实例
<?php // print_r($_POST); $email = empty($_POST['email']) ? '' : $_POST['email']; $password = empty($_POST['password']) ? '' : $_POST['password']; $emailList = ['admin@php.cn', 'peter@php.cn']; if (empty($email)) { echo '邮箱不能为空'; } elseif (!in_array($email, $emailList)) { echo '新用户,请先注册 <a href="http://demo.io/admin/register.php">注册</a>'; } elseif (empty($password)){ echo '密码不能为空'; }
运行实例 »
点击 "运行实例" 按钮查看在线实例