jQuery ajax 和普通js ajax 笔记

首先引用两个js 文件

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="js/Common.js" type="text/javascript"></script>

html 代码：

<body>
    <div>
        <input id="txtName" type="text" name="txtName" value="" /><br />
        <input id="txtPwd" type="password" name="txtPwd" value="" /><br />
        <input type="button" id="btnLogin" name="btnLogin" value="登陆"  />
        <input type="hidden" name="name" value="3" />
        <span id="span"></span>
    </div>
</body>

普通的js ajax 效果代码：

 window.onload = function () {
            document.getElementById('btnLogin').onclick = function () {
                var name = document.getElementById('txtName').value;
                var pwd = document.getElementById('txtPwd').value;
                var xhr = createXhr();
                //xhr.open("post", "FirstAjax.ashx", true);
                xhr.open("post", "Login.aspx", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            var result = xhr.responseText;
                            //alert(xhr.responseText);
                            var json = eval("(" + result + ")");
                            if (json.data == "1") {
                                //alert("登陆成功！");
                                document.getElementById('span').innerHTML = '登陆成功';
                                window.location = "User.aspx";

                            } else {
                                document.getElementById('span').innerHTML = '登陆失败';
                            }
                        }
                    }
                }
                xhr.send("Name=" + name + "&pass=" + pwd);
            }
        }

jquery 的ajax 实现方法：

$(document).ready(function () {

            $("#btnLogin").click(function () {
                $.ajax({
                    type: "POST",
                    url: "Login.aspx",
                    dataType: "html",
                    data: {
                        name: $("#txtName").val(),
                        pass: $("#txtPwd").val()
                    },
                    success: function (data) {
                        //将返回的json数据 转换一下
                        var obj = eval("(" + data + ")");
                        //alert(obj.data);
                        if (obj.data == "1") {
                            //alert("登陆成功");
                            $("#span").text("登陆成功！");
                            //document.getElementById('span').innerHTML = '登陆成功';
                        }
                        else {
                            $("#span").innerHTMl = '登陆失败！';
                        }
                    },
                    error: function () {
                        alert("出错了");
                    }
                });
            });
        });

后台的方法处理：

protected void Page_Load(object sender, EventArgs e)
    {
        if (!string.IsNullOrEmpty(Request.Form["name"]))
        {
            string UserName = Request.Form["name"];
            string UserPwd = Request.Form["pass"];
            if (UserName == "123" && UserPwd == "123")
            {
                Response.Write("{'data':'1'}");
            }
            else
            {
                Response.Write("{'data':'2'}");
            }
            Response.End();
        }
    }

jQuery ajax 和 普通js ajax 笔记

jQuery ajax 和普通js ajax 笔记