Home > Article > Web Front-end > Use Ajax technology to complete the home page login function through the XMLHttpRequest object
This article mainly introduces the use of Ajax technology to complete the homepage login function through the XMLHttpRequest object. It is a good attempt. Friends who need it can refer to it.
Recently used Ajax technology to complete the homepage login function through the XMLHttpRequest object. !
The code is as follows:
<script type="text/javascript"> //创建XMLHttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ return xmlhttprequest=new XMLHttpRequest(); }else{ return xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP"); } } //登录按钮执行的方法 function doStart(){ var logname=document.getElementById("loginName").value; var logpass=document.getElementById("loginPsw").value; var userinfo="inAccount="+logname+"&inPsw="+logpass; var url="users/users_pswCheck.action"; xmlhttprequest=createXMLHttpRequest(); xmlhttprequest.onreadystatechange=getresultValue; xmlhttprequest.open("post",url,true); xmlhttprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttprequest.send(userinfo); } //回调方法 function getresultValue(){ if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){ var result=xmlhttprequest.responseText; if(result=="success"){ window.location.href="index.jsp" rel="external nofollow" ; } else { document.getElementById("xiaoxi").innerHTML="登录失败!"; } } } //页面的按键事件,即当按的是回车键时触发该事件 function keybutton(){ if(event.keyCode==13){ doStart(); return; } } </script>
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
SSH Jquery Ajax framework integration
How to use jQuery post to pass data containing special characters
The similarities and differences between ajax and traditional web development
The above is the detailed content of Use Ajax technology to complete the home page login function through the XMLHttpRequest object. For more information, please follow other related articles on the PHP Chinese website!