前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证用户名是否存在</title>
<script>
window.onload = function () {
var oInput = document.getElementById('username'),
oNotice = document.getElementById('notice');
oInput.onblur = function () {
//第一步 创建XHR对象
var xhr = null
if(window.ActiveXObject){
xhr = new window.ActiveXObject();
}else {
xhr = new XMLHttpRequest();
}
//第二步 请求配置
xhr.open('POST','http://localhost/ajax/checkUserName.php');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//第三步 发送
xhr.send('username='+encodeURIComponent(this.value));//给this.value进行编码，防止遇上&符号导致用户名错误
//第四步 等待接受结果
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200){
if(xhr.responseText == 0){
oNotice.innerHTML = '该用户已经存在';
}else {
oNotice.innerHTML = '';
}
}
}
}
}
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username"><b id="notice"></b>
</body>
</html>后端PHP代码：
<?php
header("Access-Control-Allow-Origin:*");
$username=$_POST['username'];
if($username == 'admin88'){
echo 0;
}else {
echo 1;
}
?>