开发者学堂课程【Ajax 前端开发入门与实战：案例01_验证用户名唯一性】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8525
案例01_验证用户名唯一性
目录：
一、注册界面的案例
二、添加 onblur
三、用户名的唯一性
一、注册界面的案例
<!DOCTTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>注册界面</title>
</head>
<body>
<h1>注册界面</h1>
<form action=””> 
用户名：
<input type=”text” id=”username”><span id=”username_result”></span><br>
邮箱：
<input type=”text” id=”email”><span id=”email_result”></span><br>
手机号码：
<input type=”text” id=”phone”><span id=”phone_result”></span><br>
</form>
</body>
</html>
进行测试
打开 Google 浏览器输入 www.shangsan.cam
可以看见相关的结构
Index of /
01 a.jaxdemo/
Dweb
Php/
Test.html
二、添加 onblur
<!DOCTTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>注册界面</title>
<script type=”text/javascript”>
window.onload = function(){
var username = document.querySelector(“#username”);
var email = document.querySelector(“#email”);
var phone = document.querySelector(“#phone”);
username.onblur = function(){
console.log(“onblur”);
};
};
</script>
</head>
<body>
<h1>注册界面</h1>
<form action=””>
用户名：
<input type=”text” id=”username”><span id=”username_result”></span><br>
邮箱：
<input type=”text” id=”email”><span id=”email_result”></span><br>
手机号码：
<input type=”text” id=”phone”><span id=”phone_result”></span><br>
</form>
</body>
</html>
三、用户名的唯一性
username.onblur = function(){
var username = document.getElementById("username").value;
//使用 js 代码进行 checkUsername.php 这个文件的访问，将 username 传递给这个文件
//1、创建 XMLHttpRequest 这个对象,这个步骤中需要注意兼容处理var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();
} else {
//IE6 浏览器
xhr = new ActiveXObject("Microsoft.XMLHTTP");
//2、准备发送
//xhr.open("get","checkUsername.php?
username="+ username,true);
//xhr,Gend(null)；
xhr.open("post'","checkUsername.php",true);
//3、执行发送var param ="username="+ username;
//对于 post 请求来说的话，我们的参数应该放到请求体中
//设置 xhr 的请求头信息，这个步骤仅仅是针对于 post 请求才有的xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")；
xhr.sead(param);
//4、设置回调函数xhr.onreadystatechange
function(){
if(xhr.readyState4）{
if(xhr.status == 200){
1/得到数据//xhr.responseXML
var result = xhr.responseText;
console.log(result)；document.getElementById("result").innerText = result;
if(result ==
"ok"）{
username_resuit.innerText =“用户名可以使用";
} else {
username_result.innerText =“用户名已经被注册";
