Ajax异步刷新功能及简单案例（ajax同步刷新页面）这都可以？

90 0 0

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>wellfancy</title>

var username=document.querySelector(“#username”);
var email=document.querySelector(“#email”);
var phone=document.querySelector(“#phone”);

username.onblur=function(){

var usernameValue=username.value;
//将usernamevalue提交给服务器，由服务器进行唯一性校验
//1、创建对象兼容处理（针对IE6及以下，可以不写）
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject(“Microsoft.XMLHTTP”)
}
//2、准备发送,注意这里用的是get方法，因为后端的php文件在这里用的是get，如果后端工程师用的是post方法，这里则换成post
xhr.open(“get”,”https://www.jb51.net/article/Server1/checkUsername.php?uname=” + usernameValue,true);

//3、执行发送
xhr.send(null);

//制定回调函数
xhr.onreadystatechange=function (){
//注意这里是固定写法
if(xhr.readyState==4){
if(xhr.status==200){
var result=xhr.responseText;

//下面做局部刷新
var username_result=document.querySelector(“#username_result”);

if(result==”ok”){
username_result.innerText=”用户名可以使用”;
}else{
username_result.innerText=”用户名已经被注册”;
}
}

}
};

};

email.onblur=function(){
var emailValue=email.value;
var xhr=null;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
}
var param=”e=” + emailValue;
xhr.open(“post”,”https://www.jb51.net/article/Server1/checkEmail.php”,true);
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
xhr.send(param);

xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200){
var result=xhr.responseText;
var email_result=document.querySelector(“#email_result”);
if(result==0) {
//邮箱可用
email_result.innerText=”邮箱可以使用”;
} else {
email_result.innerText=”邮箱不可以使用”;
}
}
}
};
};

phone.onblur=function(){
var phoneValue=phone.value;

var xhr=null;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
}

xhr.open(“post”,”https://www.jb51.net/article/Server1/checkPhone.php”,true);
var params=”phonenumber=”+phoneValue;
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
xhr.send(params);

xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
//xhr.responseText就是一个字符串
var result=xhr.responseText;

//希望将result这样的一个字符串转化为对象，方便我们获取里面的一些值
result=JSON.parse(result);
var phone_result=document.querySelector(“#phone_result”);
if(result.status==0) {
//代表手机号码可用
phone_result.innerText=result.message.tips + “,” + result.message.phonefrom;
} else if(result.status==1) {
//代表手机号码不可用
phone_result.innerText=result.message;
}

}
}
};
};

};
</script>
</head>
<body>

</body>
</html>

# 随心笔谈