手写Ajax登陆页面

1.建立登陆输入框，确定ID

<table style="width: 100%;">
        <tr>
            <td class="auto-style1">用户名：</td>
            <td>
                <input id="txtName" type="text" /></td>
        </tr>
        <tr>
            <td class="auto-style1">密&nbsp; 码：</td>
            <td>
                <input id="txtPwd" type="password" /></td>
        </tr>
        <tr>
            <td class="auto-style1">验证码：</td>
            <td>
                <input id="txtCal" type="text" /></td>

        </tr>
        <tr>
            <td class="auto-style1">&nbsp;</td>
            <td>
                <input id="btnLogin" type="button" value="登 陆" /><input id="isAlways" type="checkbox" value="1" />是否两周内免登陆</td>

        </tr>
    </table>

2.本人这里引用一个朋友写好的友好弹出框
这里不复制了，普通的也可以，只说明下定义：var msgBox=new MsgBox（）；

3.定义创建 XMLHttpRequest 异步对象,个人定义为了兼容浏览器，现在一般使用三方库，如jquey，等

//使用浏览器兼容的方式创建 异步对象
function createXhr() {
    var xhobj = false;
    try {
        xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
    } catch (e) {
        try {
            xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
        } catch (e2) {
            xhobj = false;
        }
    }
    if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
        xhobj = new XMLHttpRequest();
    }
    return xhobj;
}

4.主要代码,

var msgBox = false;
        var xhr = false;

        window.onload = function () {
            window.document.body.setAttribute("onselectstart", "return false");//设置网页内容不被选中
            var btn = gel("btnLogin");
            btn.onclick = doLogin;
            msgBox = new MsgBox(); //定义漂亮的弹出框，可以不使用
            xhr = createXhr();//创建异步对象
        }
        function doLogin() {
            var inputName = gel("txtName");//获取Id，gel 提前定义的
            var inputPwd = gel("txtPwd");
            if (validate(inputName, inputPwd)) {
                xhr.open("post", "Login.ashx", true);  //请求地址，方式 post
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //  xhr.open("get", "Login.ashx", true);//请求地址，方式 get
                // xhr.setReqeustHeader("If-Modified-Since", "0");
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            var res = xhr.responseText;
                            switch (res) {
                                case "ok":
                                    {
                                        window.location = "manage/Index.aspx";
                                        break;
                                    }
                                case "nook":
                                    {
                                        msgBox.showMsgErr("对不起，您的用户名或密码错误！: )");
                                        break;
                                    }
                                case "err":
                                    {
                                        msgBox.showMsgErr("对不起，服务器繁忙，请稍后再试！: )");
                                        break;
                                    }
                                default:
                                    {
                                        msgBox.showMsgErr("对不起，服务器繁忙，请稍后再试！: )");
                                    }
                            }
                        } else {
                            msgBox.showMsgErr("服务器繁忙～～～请稍后再试！");
                        }
                    }
                }
                //5.发送请求
                xhr.send("tn=" + inputName.value + "&tp=" + inputPwd.value + "&isalways=" + gel("isAlways").checked);
            }
        }
        //验证用户名密码
        function validate(inputN, inputP) {
            if (inputN.value == "") {
                msgBox.showMsgErr("用户名不能为空！");
                inputN.focus();
                return false;
            } else if (inputP.value == "") {
                msgBox.showMsgInfo("用户密码不能为空！");
                inputP.focus();
                return false;
            } else {
                return true;
            }
        }

 5.jquery的ajax请求,                                                            

$.ajax({
        type: "post",
        url: URL.publicTplUrl,
        dataType: "json",
        data: json object,
        success: function (result) {
            //封装返回数据
            console.log(result);
        },
        beforeSend: function () {
            //手动控制遮罩　　　　　　　
        },
        complete: function (xhr, err, e) {
            //关闭遮罩
        }
    });