AJAX学习 自己动手写ajax登录验证及首页数据绑定（代码片段，主要是登录js，ajax的get和post请求） 


//根据不同的浏览器创建异步对象
function creatXmlHttp() {
    xhobj = false;
    try {
        xhobj = new ActiveXObject("Msxml2.XMLHTTP"); //iemsxml3.0

    } catch (e) {
        try {
            xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //iemsxml2.6
        } catch (e) {
            xhobj = false;
        }
    }
    if (!xhobj && typeof XMLHttpRequest != 'undefined') {//其它
        xhobj = new XMLHttpRequest();
    }
    return xhobj;
}
var xhr = false;
window.onload = function () {
    xhr = creatXmlHttp();
    loadPageList(1);
}
function loadPageList(pi) {
    xhr.open("get", "Index.ashx?do=l&pi=" + pi, true);//向服务器发起get请求
    xhr.setRequestHeader("If-Modified-Since", "0")//不实用缓存
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var res = xhr.responseText;
                var jsonArr = eval("(" + res + ")");
                if (jsonArr.status == "状态码") {//判断服务器返回的状态码处理

                }
            }
        }
    }
    xhr.send(null);
}
               
   //登录页面
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>系统登录界面</title>
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <script src="js/common.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            gel("btnlogin").onclick = doLogin;
            gel("imgyanzhengma").onclick = changeCode;
            getCurDate();
            xhr = creatXmlHttp();
        }
        var xhr = false;
        function doLogin() {
            var txtUname = gel("txtname");
            var txtpwd = gel("txtpwd");
            var txtCode = gel("txtCode");
            if (checkUser(txtUname, txtpwd, txtCode)) {
                xhr.open("post", "goLogin.ashx", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            var strjson = xhr.responseText;
                            var json = eval("(" + strjson + ")");
                            switch (json.status) {
                                case "1":
                                    alert("验证码错误！");
                                    break;
                                case "2":
                                    alert("用户名密码错误！");
                                    break;
                                case "3":
                                    alert("用户过期！");
                                    break;
                                case "4":
                                    var url = "Index.htm";
                                    window.location = url;
                                    break;
                                default:
                                    alert("未知错误，请稍后！");
                            }
                            clerTxt(txtUname, txtpwd, txtCode);
                        }
                    }
                }
                xhr.send("isPostback=1&txtName=" + txtUname.value + "&txtPwd=" + txtpwd.value + "&txtCode=" + txtCode.value);
            }
        }
        function checkUser(txtUname, txtpwd, txtCode) {
            if (txtUname.value == "") {
                alert("请输入用户名！");
                return false;
            }
            if (txtpwd.value == "") {
                alert("请输入密码！");
                return false;
            }
            if (txtCode.value == "") {
                alert("请输入验证码！");
                return false;
            }
            else {
                return true;
            }

        }
        function changeCode() {
            var imgNode = gel("imgyanzhengma");
            //重新加载验证码，达到刷新的目的
            imgNode.src = "yanzhengma.ashx?t=" + (new Date()).valueOf();
        }
        function clerTxt(txtUname, txtpwd, txtCode) {
            changeCode()
            txtUname.value = "";
            txtpwd.value = "";
            txtCode.value = "";
            txtUname.focus();
        }
    
    </script>
</head>
<body>
 <div id="login">
	
	     <div id="top">
		      <div id="top_left"><img alt="" src="images/login_03.gif" /></div>
			  <div id="top_center"></div>
		 </div>
		 
		 <div id="center">
		      <div id="center_left"></div>
			  <div id="center_middle">
			       <div id="user">用   户
			         <input type="text" name="txtname" id="txtname" runat="server" />
			       </div>
				   <div id="password">密   码
				     <input type="password" name="txtpwd" id="txtpwd" runat="server" />
				   </div>
                   <div id="yanzheng">验证码
				     <input type="text" name="yanzhengma" id="txtCode" runat="server" />
                     <img src="yanzhengma.ashx" alt="点击更换验证码" id="imgyanzhengma" /> 
				   </div>
				   <div id="btn">
				   <input type="reset" name="reset" id="reset" value="清空" /> 
                   <input type="button" id="btnlogin" class="btnlogin" value="登录" /> 
                  <%-- <asp:Button ID="btnlogin" CssClass="btnlogin" runat="server" Text="登录" 
                           onclick="btnlogin_Click1" />--%>
                   </div>
			  
			  </div>
			  <div id="center_right"></div>		 
		 </div>
		 <div id="down">
		      <div id="down_left">
			      <div id="inf">
                       <span class="inf_text">版本信息</span>
					   <span class="copyright">管理系统2013  v1.0<span id="timenow">
                </span></span>
			      </div>
			  </div>
			  <div id="down_center"></div>		 
		 </div>

	</div>
</body>
</html>

　　

posted @ 2013-04-30 15:52  叶亮  阅读(398)  评论(0)  编辑  收藏  举报