AJAX 方法

★注意不可以用webfrom里面的控件

效果图：

{第一种方法  没有封装}

（一）建立一个webfrom窗口《Defauila.aspx》

  <title></title>
 <%--   <script src="Script/jquery-1.7.1.min.js"></script>--%>
    <script type="text/javascript">
        function myXMLHttpRequest()
        {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
                
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");               
            }

            xmlhttp.onreadystatechange = function ()
            {
                
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    document.getElementById("sp").innerHTML = xmlhttp.responseText;                   
                    
                }
            }
            var url = "../AJAX练习/xiangying.aspx?username=" + document.getElementById("t").value;//路径，要写的非常详细
            
            xmlhttp.open("GET", url, true);     //除了GET方法还有一种POST    （1）true 部分刷新
                                                                           （2）falst 全部刷新
            xmlhttp.send();

        }
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>
                用户名：
            </td>
            <td>
               <input onkeyup="myXMLHttpRequest()" id="t" type="text">
            </td>
           <td>
                <span id="sp"></span>
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

(二 )再建立一个新的webfrom窗体《Defauil2.aspx》

public partial class xiangying : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string userna = Request["username"].ToString();
        if (userna=="abc")
        {
            Response.Write("√");
        }
        else
        {
            Response.Write("×");
        }
    }
}

｛第二种方法  已经封装好的｝

（一）

  <title></title>
    <script src="Js/jquery-1.11.2.js" type="text/javascript" ></script>

    <script>

        $(document).ready(
            function () {
                $("#txtUid").blur(
                    function () {
                        var txt = $(this).val();
                        //ajax发送文本信息出去
                        $.ajax({
                            url:"Default2.aspx",//接收请求的页面
                            type: "POST",//请求发送方式
                            data: { uid: txt },//数据
                            datatype: "XML",//接收回送的信息格式设定
                            success: function (data) {//回调函数
                                var c = $(data).text();
                                alert(c);
                                var name = $(data).find("#name").text();
                                alert(name);
                                if (c == 0) {
                                    $("#Literal1").html("用户名可用");
                                }
                                else {
                                    $("#Literal1").html("用户名不可用");
                                }
                            }
                            });
                    }
                    );
            }
            );

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:TextBox ID="txtUid" runat="server"></asp:TextBox>
        <div id="Literal1"></div>
        
        <br />
    
    </div>
    </form>
</body>
</html>

（在添加一个显示窗口）

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string uid = Request["uid"].ToString();

        string count = "0";
        //根据uid查询数据库
        if (uid == "张三")
        {
            count = "1";
        }

        Response.Write("<?xml version='1.0'?>");
        Response.Write("<count id='count'>"+count+"</count>");
        Response.Write("<name id='name'>" + uid + "</name>");
        Response.End();
        
    }
}

 

posted @ 2015-08-02 15:27  王文姿  阅读(218)  评论(0)  编辑  收藏  举报