AJAX原生代码

来源：互联网发布：js判断ie浏览器版本编辑：程序博客网时间：2024/06/18 17:05

1.使用原生的AJAX

//onblur="userValidate(this)"关联一个事件
<p>用户名：<input type="text" name="loginId" id="userId" onblur="userValidate(this)"><span id="s"></span></p>
<p>密码：<input type="password" name="password"></p>
<p><input type="submit" value="登录"></p>
</form>
</body>

2.编写AJAX原生代码

var xhr
//1.创建XMLHttpRequest对象的函数
function getXMLHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
//2.文本框失去焦点事件
function userValidate(txtName){

//获得XMLHttpRequest
xhr = getXMLHttpRequest();
var userName = txtName.value;
//初始化

//
xhr.open("POST","AccountSer?name="+userName,true);
//设置回调函数
xhr.onreadystatechange=resultData;
xhr.send("");
}
//3.回调函数
function resultData(){

var span = document.getElementById("s");
if(xhr.readyState==4){//服务器返回在状态

if(xhr.status==200){//服务端正确返回
//接收返回的数据

if(xhr.responseText=="1"){

span.style.color="green";
span.innerHTML="用户名正确";
}else{
alert("到这了吗");
span.style.color="red";
}
}

}

}

</script>

3.查询并返回数据

//得到传过来的值
String name = request.getParameter("name");
//通过name从数据库查询
AdminService adminService = new AdminService();
Admin admin = adminService.findByLoginId(name);
if(admin != null) {
//返回数据
response.getWriter().write("1");
}else {
response.getWriter().write("0");
}

阅读全文

0 0