Ajax基础

  • A+
所属分类:ASP.NET

Ajax基础

Ajax

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

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

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

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

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

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

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

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

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

网页端:

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             用户名:<asp:TextBox ID="TextBox1" runat="server">  
  5.   
  6.             </asp:TextBox><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />  
  7.             <asp:Button ID="Button1" runat="server" Text="Button" />  
  8.   
  9.         </div>  
  10.     </form>  
  11. </body>  
  12. </html>  
  13. <script type="text/javascript">  
  14.     $("#Button1").click(function () {  
  15.         var oTxt = $("#TextBox1").val();  
  16.         //1、引用Jquery  
  17.   
  18.         //2、编写ajax基本格式  
  19.   
  20.         $.ajax({  
  21.             url: "aaaa1.ashx",//要连接到哪个服务端  
  22.             data: { "id": oTxt },//将什么数据传递到服务端  
  23.             type: "POST",//用什么样的传递方式传过去  
  24.             dataType: "json",//返回的数据类型是什么类的  
  25.             success: function (bbb) {  
  26.                 if (bbb.has == 0) {  
  27.                     $("#Label1").text("恭喜!用户名可用!");  
  28.                 }  
  29.                 else {  
  30.                     alert(bbb.nickname);  
  31.                     $("#Label1").text(bbb.pwd+","+bbb.nickname+","+bbb.sex+","+bbb.birthday+","+bbb.nation);  
  32.                 }  
  33.             },  
  34.             error: function () {  
  35.                 $("#Label1").text("无法连接到服务器!");  
  36.             }  
  37.         });  
  38.         return false;  
  39.     });  
  40. </script>  

一般处理程序:

  1. public void ProcessRequest(HttpContext context)  
  2.     {  
  3.         string Uname = context.Request["id"];  
  4.   
  5.         using (Data0617DataContext con = new Data0617DataContext())  
  6.         {  
  7.             Users u = con.Users.Where(r => r.UserName == Uname).FirstOrDefault();  
  8.   
  9.             if (u != null)  
  10.             {  
  11.                   
  12.                 //json字符串格式  
  13.                 context.Response.Write("{\"has\":\"1\",\"pwd\":\"" + u.PassWord + "\",\"nickname\":\"" + u.NickName + "\",\"sex\":\"" + u.Sex + "\",\"birthday\":\"" + u.Birthday + "\",\"nation\":\"" + u.Nation + "\"}");  
  14.             }  
  15.             else  
  16.             {  
  17.                 context.Response.Write("{\"has\":\"0\"}");  
  18.             }  
  19.             context.Response.End();  
  20.         }  
  21.     }  
钰玺
  • 版权声明:本站原创文章,于2016年11月29日08:44:37,由 发表,共 2450 字。
  • 转载请注明:Ajax基础 | YuXi

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: