zoukankan      html  css  js  c++  java
  • 学习笔记 之--AJAX核心对象 XMLHttpRequest

    实现AJAX功能,核心就是XMLHttpRequest,而且现在大多数浏览器都支持这个核心组件对象。

    实例:实现无刷新登陆验证

    1.前台代码

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function CheckUser() {
                //构建xhr对象。
                var xhr;
                if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                }
                else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //xhr的状态改变事件(xhr状态会自动改变,4代表 完成,200代表 ok)
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var ret = xhr.responseText; //获取返回信息
                        if (ret == "1") {
                            //window.location.href = "Default3.aspx"; 跳转到主页
                            alert("登陆成功");
                        }
                        else {
                            alert("登陆失败!用户名或者密码错误!");
                        }
                    }
                }

                xhr.open("post", "Handler.ashx?id=" + Math.random(), true);//true 代表异步请求
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); //设置请求头,必须在open之后设置
                xhr.send("name=" + document.getElementById("userName").value + "&pwd=" + document.getElementById("passWord").value);//发送信息到一般处理程序。当然 也可以发送到本身页面验证。
                return false;
            }
        </script>
        
    </head>
    <body>
        <form id="form1" runat="server" method="post">
        <div>
            <fieldset>
            <legend>AJAX登陆验证</legend>
            <table>
            <tr><td>用户名:</td><td><input type="text" id="userName" name="name"/></td></tr>
            <tr><td>密  码:</td><td><input type="text" id="passWord" name="pwd"/></td></tr>
            <tr><td></td><td align="left"><input type="submit" id="submit" value="登陆" onclick=" return CheckUser();" /></td></tr>
            </table>
            </fieldset>
        </div>
        </form>
    </body>
    </html>

    后台代码

    创建一般处理程序,Handler.ashx

    <%@ WebHandler Language="C#" class="Handler" %>

    using System;
    using System.Web;

    public class Handler : IHttpHandler {
        
        public void ProcessRequest (HttpContext context) {
            string name = context.Request.Form["name"];//用户名
            string pwd = context.Request.Form["pwd"];//密码
            if (name=="sg"&&pwd=="sg")//模拟验证,实际: 数据库验证
            {
                context.Response.Write("1");
            }
            else
            {
                context.Response.Write("0");
            }
          //context.Response.Write("Hello World");
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }

    }

  • 相关阅读:
    Linux磁盘分区、挂载
    crond任务调度
    Form组件使用
    Django路由系统
    Django中模板简单使用
    ORM常用操作
    IO多路复用
    vscode必装插件
    Flask-RESTful扩展
    flask-caching
  • 原文地址:https://www.cnblogs.com/net-study/p/3418046.html
Copyright © 2011-2022 走看看