ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数）
一、总结
1、ajax可以实现我们常见的注册用户名动态判断
2、jquery里面的ajax也是类似我们这样封装了的函数
二、ajax实现注册用户名时动态显示用户名是否已经被注册
练习：判断用户名是否存在
- 实例描述：
判断用户名是否存在，并进行相应的提示。
- 案例要点：
JSON数据的加载和解析；
将用户的注册名和加载的JSON文件进行比较，判断用户名是否已经存在。
三、代码
html代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>课堂演示</title>
<script type="text/javascript" src="ajax1.js"></script>
<style type="text/css">
#sp{
color: orange;
}
</style>
</head>
<body>
<form action="#" id="form1" method="get">
<p>用户名：<input type="text" id="username" name="username"><span id="sp"></span></p>
<p>密  码：<input type="password" id="password" name="password"></p>
<input type="button" value="提交" onclick="checkName()">
</form>
<script>
function checkName(){
var username=document.getElementById('username').value;
var sp=document.getElementById('sp')
var boo=false;
ajax('names.json',function(str){
// alert(typeof str)
var nameArr=JSON.parse(str)
// alert(typeof nameArr)
for(var i=0;i<nameArr.length;i++){
if (nameArr[i]==username) {
// alert('用户名已经存在')
boo=true;
}//else{
//alert('用户名可以使用')
//}
}
if (boo) {
sp.innerHTML='您来晚了，这个用户名已经存在,请再换一个'
// alert('用户名已经存在')
}else{
// alert('用户名可以使用')
sp.innerHTML='恭喜您，这个用户名可以使用'
}
})
}
</script>
</body>
</html>
js的ajax函数封装：ajax1.js
function ajax(url,funSucc,fnFaild){
var xhr=new XMLHttpRequest();
url=url+'?'+new Date().getTime();
xhr.open('GET',url,true);
xhr.send();
xhr.onreadystatechange=function(){
if (xhr.readyState==4) {
if (xhr.status==200) {
funSucc(xhr.responseText)
}else{
if (fnFaild){
fnFaild(xhr.statusText)
}
}
}
}
}
数据：names.json
["张三","李四","王五"]