使用JavaScript代码来代理用户发起的HTTP请求 称为异步请求 Ajax
AJAX请求的步骤
创建请求对象
监听成功回调
设置请求参数
发送AJAX请求
Ajax-GET 请求数据
通过用户输入的信息，使用Ajax-GET的方式来获取服务器脚本传过来的对应的数据。
在前端通过判断来把对应的数据显示到网页上
实例
<!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-GET</title>
</head>
<body>
<p>
<label for="userid">用户ID:</label>
<input type="text" id="userid" name="userid" autocomplete="off" >
<!-- autocomplete="off" 关闭文本框记录历史输入数据 -->
</p>
<p id="tips"></p>
<script>
// 获取id输入框
var input = document.getElementById('userid');
// 获取提示信息tips
var tips = document.getElementById('tips');
// AJAX 对象
// 1.创建：请求对象
var request = new XMLHttpRequest();
// 给Input设置事件监听
input.addEventListener('keypress', keyEnter, false);
function keyEnter(event) {
console.log(event.target.value);
// 判断当前按键是否是Enter键
if ( event.key === 'Enter' ) {
// 判断当前输入的内容
switch ( true ) {
// 判断当前输入的内容不能为空
case input.value.length === 0:
tips.innerHTML = "<span style='color:red';>ID不能为空！</span>"
return false;
// 当前输入内容只能是整数
case isNaN(input.value):
tips.innerHTML = "<span style='color:red';>ID必须是一个整数！</span>"
return false;
//当数据全部合法后，进入AJAX异步执行
default:
// 2.监听：成功回调
request.addEventListener( 'readystatechange', successCallback, false );
// 3.设置：请求参数
// request.open(请求类型， 请求的服务器上的处理脚本程序， 是否是异步执行);
// 请求类型：GET POST
// 是否异步：true false
// 给数据进行编码处理
// encodeURIComponent()
var valueData = encodeURIComponent(input.value);
request.open( 'GET', 'php/user.php?userid='+valueData, true );
// 4.发送：异步请求
// GET请求默认为null，不用传参
// POST请求需要传参
request.send(null);
}
}
// 成功回调函数
function successCallback(event) {
console.log(event.target);
// 如果readyState的值等于4，就说明请求成功，则返回获取的数据插入到页面中
// responseText 获取脚本程序返回的文本数据
if (event.target.readyState === 4) {
tips.innerHTML = event.target.responseText;
}
}
}
// 设置输入框事件
// 当输入的ID发生变化是，自动删除tips里已经获取到的数据
input.addEventListener('input', function (event) {
tips.innerText = null;
},false);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
Ajax-POST 发送数据、请求数据
POST方式与GET不同
使用POST方式发送请求数据，需要先设置请求头（内容的类型，发送数据的格式）
request.setRequestHeader('内容类型', '发送数据的格式')
GET发送请求可以为空。POST则必须传值
实例-表单验证-Ajax-POST请求
<!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-POST</title>
</head>
<body>
<h2>用户登录</h2>
<form action="" name="login">
<p>
<label for="username">帐号:</label>
<input type="text" name="username" id="username" placeholder="输入邮箱或手机号">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="输入密码">
</p>
<p>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" placeholder="admin@php.cn">
</p>
<p>
<label for="remember">记住我:</label>
<select name="remember" id="remember">
<option value="1" name="day" selected>一天</option>
<option value="7" name="week">一周</option>
<option value="30" name="month">一个月</option>
</select>
</p>
<p>
<button type="button" name="submit">登录</button>
</p>
</form>
<script>
// 获取相关的表单元素
// 获取form表单
var loginForm = document.forms.namedItem('login');
// 获取from下的元素节点
// 获取帐号文本框
var userName = loginForm.username;
// 获取密码文本框
var passWord = loginForm.password;
// 获取邮箱文本框
var email = loginForm.email;
// 获取记住我 下拉框
var remember = loginForm.remember;
// console.log(userName);
//获取按钮
var button = loginForm.submit;
// 创建AJAX对象
var request = new XMLHttpRequest();
// 对表单进行数据验证
// 验证表单内容不能为空
// 验证用户名不能为空
userName.addEventListener('blur', noEmpty, false);
// 验证邮箱不能为空
passWord.addEventListener('blur', noEmpty, false);
// 验证密码不能为空
email.addEventListener('blur', noEmpty, false);
// 非空验证方法
function noEmpty(event) {
console.log(event.target.value.length);
// 判断如果输入的内容为空，则显示提示信息
if ( event.target.value.trim().length === 0 ) {
// 创建动态提示信息
// 判断当前要插入提示信息的位置，有没有数据，如果有就不执行，如果没有就创建提示信息
if (event.target.nextElementSibling === null) {
var tips = document.createElement('span');
// 给提示信息添加样式
tips.style="color:red; font-size:12px;"
// 根据事件目标设置提示信息
console.log(event.target.name);
// event.target.name获取当前点击控件的name值
switch (event.target.name) {
// name值等于username,则插入账号不能为空
case 'username':
tips.innerText = '*帐号不能为空'
break;
// name值等于password,则插入密码不能为空
case 'password':
tips.innerText = '*密码不能为空'
break;
case 'email':
tips.innerText = '*邮箱不能为空'
break;
default:
tips.innerText = '未知错误'
}
// 将span元素 提示信息添加到页面中
// 插入到input的父级节点下
event.target.parentNode.appendChild(tips);
}
// 将焦点锁定到错误数据上
event.target.focus();
}
}
// 当用户输入内容后，清除提示信息
console.log(document.getElementsByTagName('span')[1]);
loginForm.addEventListener('input', function (event) {
// span 标签 = 当前点击文本框的下一个兄弟节点
var span = event.target.nextElementSibling;
// 如果不为空，则清除提示信息
if (span !== null) {
span.innerText = "";
// span.parentNode.removeChild(span)
}
},false);
// AJAX验证
// 给提交按钮添加一个点击事件
console.log(button);
// 获取页面中所有的input
var input = document.getElementsByTagName('input');
button.addEventListener('click', check, false);
function check(event) {
// 当没有输入内容的时候，禁止提交
console.log(userName);
if ( userName.value.length === 0 || passWord.value.length === 0 || email.value.length === 0 ) {
// 当输入内容为空，移除点击事件
button.removeEventListener('click', check, false);
// 事件模拟器当用户没有输入内容就点击提交按钮后，自动焦点到第一个文本框
var blurEvent = new Event('blur');
// userName.dispatchEvent(blurEvent);
// 循环给每个为空的文本框添加失去焦点事件
for (var i = 0; i < input.length; i++) {
console.log(input[i]);
// 判断内容为空的文本框
if (input[i].value.length === 0) {
input[i].dispatchEvent(blurEvent);
}
}
return false;
}
// 监听成功回调
request.addEventListener('readystatechange', successCallback, false);
// 设置请求参数
request.open('POST', 'php/check.php', true);
// 因为是POST，要设置请求头。模拟表单数据格式进行发送 键值对
// request.setRequestHeader('内容类型', '发送数据的格式');
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8');
// 发送AJAX请求
// 请求值就是键值对的格式
var data = 'username='+userName.value+'&password='+passWord.value+'&email='+email.value+'&remember='+remember.value;
request.send(data);
}
// 成功回调函数
function successCallback(event) {
if ( request.readyState === 4 ) {
console.log(request.responseText);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
