首页 > > 网络编程 > Asp.Net编程 >

AJAX基础

2018-06-22 07:40:56来源：未知阅读 ()

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

准备：使用ajax需要一个一般处理程序项，里面执行要执行的C#代码，是以ashx结尾的。

xml:可扩展的标记语言
主要作用：就是记录一些数据，
为什么要用它来记录数据？
因为它是通用的，数据在不同语言之间的传递

劣势：
1、结构繁琐，同样的数据，要编写的内容较多，而且内容量较大
2、获取数据时比较麻烦，需要一个一个的去找标记，然后获取标记中的内容

json:
主要作用：也是记录数据，并且将数据在不同语言之间传递
与xml的区别：
1、结构清晰，类似于实体类的结构组合方式
2、获取数据时，类似实体类的取值方式

实例：

网页端：

<body>
    <form id="form1" runat="server">
        <div>
            用户名：<asp:TextBox ID="TextBox1" runat="server">

            </asp:TextBox><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
            <asp:Button ID="Button1" runat="server" Text="Button" />

        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    $("#Button1").click(function () {
        var oTxt = $("#TextBox1").val();
        //1、引用Jquery

        //2、编写ajax基本格式

        $.ajax({
            url: "aaaa1.ashx",//要连接到哪个服务端
            data: { "id": oTxt },//将什么数据传递到服务端
            type: "POST",//用什么样的传递方式传过去
            dataType: "json",//返回的数据类型是什么类的
            success: function (bbb) {
                if (bbb.has == 0) {
                    $("#Label1").text("恭喜！用户名可用！");
                }
                else {
                    alert(bbb.nickname);
                    $("#Label1").text(bbb.pwd+","+bbb.nickname+","+bbb.sex+","+bbb.birthday+","+bbb.nation);
                }
            },
            error: function () {
                $("#Label1").text("无法连接到服务器！");
            }
        });
        return false;
    });
</script>

一般处理程序：

public void ProcessRequest(HttpContext context)
    {
        string Uname = context.Request["id"];

        using (Data0617DataContext con = new Data0617DataContext())
        {
            Users u = con.Users.Where(r => r.UserName == Uname).FirstOrDefault();

            if (u != null)
            {
                
                //json字符串格式
                context.Response.Write("{\"has\":\"1\",\"pwd\":\"" + u.PassWord + "\",\"nickname\":\"" + u.NickName + "\",\"sex\":\"" + u.Sex + "\",\"birthday\":\"" + u.Birthday + "\",\"nation\":\"" + u.Nation + "\"}");
            }
            else
            {
                context.Response.Write("{\"has\":\"0\"}");
            }
            context.Response.End();
        }


    }