你的位置:首页 > ASP.net教程

[ASP.net教程]学习.net与ajax的详细案例总结


昨天看了一天的ajax,今天又看了两个小时,终于弄出来个门道,其实ajax不是难,不是枯燥,而是自己不会用,这是根本所在

下面分享学习经验,以下是我程序代码的下载地址:http://vdisk.weibo.com/s/BQ2aD 或者这个地址 http://download.csdn.net/detail/heikeyuit/5398845

首先了解什么是ajax。

AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
通过 AJAX,您的 JavaScript 可使用JavaScript的AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
 
一提到javascript,大家都会想到浏览器的兼容性问题,其实ajax也需要考虑到这个问题。因为不同浏览器使用的web的javascript的类不一样,所以产生的效果也不会一样的。下面不瞎说了,直接引入代码供大家参考。
复制代码
     {      var //非IE浏览器创建      if(window.= new //IE浏览器创建      if (window.ActiveXObject) {        try {          = new ActiveXObject("Microsoft.);        }        catch (e) {          try {            = new ActiveXObject("ms);          }          catch (ex) { }        }      }      if (!"创建);        return false;      }      //       false);             = function () {        if () {          if (//如果是状态码则显示成功            //document.getElementById("Text1").value =             xxxxx = 在此处我们可以将我们传递的参数返回给我们的html标签,或者其他变量处理问题          } //responseText为服务器返回的文本          else {            alert("AJAX服务器返回错误");          }        }      }      //开始发送请求    }
复制代码

这只是前台的代码,就这些代码就已经足够了,实现了局部刷新页面的功能,剩下的后台代码是根据项目的不同而定,我在这里不必引入了。

大家看到这些代码感觉怎么样,对于刚学习javascript或者ajax的同学,要想记住这些代码,真的是很难啊,还有怎么去理解这些东西呢,我上面基本都有注释,大家一般可以理解。但是如果每个页面都需要局部刷新的话,这样就会感觉每个页面都要写这样的代码是不是很麻烦啊,jQuery帮助我们完成了很多东西,这样可以减轻我们开发项目的难度,以下是使用jQuery的代码:

复制代码
$.ajax({  type: "POST",  url: "some.php",  data: "name=John&location=Boston",  success: function(msg){   alert( "Data Saved: " + msg );  }});
复制代码

另一种方式

$.post("test.php", { name: "John", time: "2pm" },  function(data){   alert("Data Loaded: " + data);  });

是不是很简单啊,在这里我们这是调用他写好的函数,我们就可以实现我们的无刷新代码了,现在感觉是不是无刷新页面是不是很简单了,但是我们这只是传递个小数据而已,如果从数据库中提取数据时就会很麻烦的,以下引入我的部分代码,让大家思考一下

以下是我实现无刷新评论并显示的前台和后台代码:

复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxComment.aspx.cs" Inherits="ajax学习.无刷新评论.AjaxComment1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head runat="server">  <title></title>  <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>  <script type="text/javascript">    $(function () {      $("#btnComment").click(function () {        var comment = $("#txtComment").val();                $.post("AjaxComment.ashx",{"msg":comment},        function (data, status) {          if (status != "success") {            alert("发表评论失败,请重试");            return;          }          if (data == "ok") {            var newComment = $("<li>评论日期:"+new Date().toString()+",IP:,"+"本机"+"内容:"+comment+"</li>");            $("#ulComment").append(newComment);            alert("评论发表成功");          }          else {            alert("评论发表有问题");          }        });      });    });  </script></head><body>  <form id="form1" runat="server">  <div>    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"       DeleteMethod="Delete" InsertMethod="Insert"       OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"       TypeName="ajax学习.DataSetCommentTableAdapters.T_CommentTableAdapter"       UpdateMethod="Update">      <DeleteParameters>        <asp:Parameter Name="Original_Id" Type="Int64" />      </DeleteParameters>      <InsertParameters>        <asp:Parameter Name="IP" Type="String" />        <asp:Parameter Name="Msg" Type="String" />        <asp:Parameter Name="PostDate" Type="String" />      </InsertParameters>      <UpdateParameters>        <asp:Parameter Name="IP" Type="String" />        <asp:Parameter Name="Msg" Type="String" />        <asp:Parameter Name="PostDate" Type="String" />        <asp:Parameter Name="Original_Id" Type="Int64" />      </UpdateParameters>    </asp:ObjectDataSource>    <ul id="ulComment">    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">      <ItemTemplate>        <li>评论日期:<%#Eval("PostDate")%>,IP:<%#Eval("IP")%>,内容:<%#Eval("Msg")%><br/></li>      </ItemTemplate>    </asp:Repeater>    </ul>  <textarea id="txtComment" cols="20" rows="10"></textarea><br/>  <input id="btnComment" type="button"    value="提交" />  </div>  </form></body></html>
复制代码

 

后台代码(AjaxComment.ashx)

复制代码
using System;using System.Collections.Generic;using System.Linq;using System.Web;using ajax学习.DataSetCommentTableAdapters;using System.Web.Services;namespace ajax学习.无刷新评论{  /// <summary>  /// AjaxComment 的摘要说明  /// </summary>  [WebService(Namespace = "http://tempuri.org/")]  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  public class AjaxComment : IHttpHandler  {    public void ProcessRequest(HttpContext context)    {      context.Response.ContentType = "text/plain";      string msg = context.Request["msg"];      new T_CommentTableAdapter().Insert(context.Request.UserHostAddress,msg,DateTime.Now.ToString());//使用的是强类型DataSet      context.Response.Write("ok");    }    public bool IsReusable    {      get      {        return false;      }    }  }}
复制代码

大家看完前台代码是不是有疑问了,如果传递很多字段,很多属性的数据时,该怎么办呢,如果每个数据都是这样的自己split()一下的话,那么做大项目的话肯定会累屎了,下面jQuery有帮我们做了件好事情,就是json的使用,下面我引入我的使用无刷新评论的json代码

前台代码:

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head>  <title></title>  <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>  <script type="text/javascript">    $(function () {      $.post("PagedServices.ashx", { "action": "getpagecount" }, function (data, status) {        for (var i = 1; i <=data; i++) {          var td = $("<td><a href=''>" + i + "</a></td>");          $("#trPage").append(td);        }        $("#trPage td").click(function (e) {          e.preventDefault();//不要导向链接地址          $.post("PagedServices.ashx", { "action": "getpagedata", "pagenum": $(this).text()},          function (data, status) {            var comments = $.parseJSON(data);            $("#ulComments li").remove();            for (var i = 0; i < comments.length; i++) {              var comment = comments[i];              var li = $("<li>" + comment.Id + "---" + comment.IP + "---" + comment.Msg + "---" + comment.PostDate + "</li>");              $("#ulComments").append(li);            }          });        });      });    });  </script></head><body>  <ul id="ulComments"></ul>  <table><tr id="trPage"></tr></table></body></html>
复制代码

后台代码:

复制代码
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using ajax学习.DataSetCommentTableAdapters;using System.Web.Script.Serialization;namespace ajax学习.无刷新分页{  /// <summary>  /// PagedServices 的摘要说明  /// </summary>  [WebService(Namespace = "http://tempuri.org/")]  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  public class PagedServices : IHttpHandler  {    public void ProcessRequest(HttpContext context)    {      context.Response.ContentType = "text/plain";       // context.Response.Write("Hello World");      string action=context.Request["action"];      var adapter = new T_CommentTableAdapter();      if (action == "getpagecount")      {                int count=adapter.SelectCount().Value;        int pagecount=count/10;        if(count%10!=0)        {          pagecount++;        }        context.Response.Write(pagecount);      }      else if(action=="getpagedata")      {        string pagenum=context.Request["pagenum"];        int iPageNum = Convert.ToInt32(pagenum);        var data = adapter.GetPagedData((iPageNum - 1) * 10 + 1, iPageNum * 10);        List<Comments> list=new List<Comments> ();        foreach(var row in data)        {          list.Add(new Comments() { Id = (int)row.Id, IP = row.IP, Msg = row.Msg, PostDate = row.PostDate, });        }        JavaScriptSerializer jss = new JavaScriptSerializer();        context.Response.Write(jss.Serialize(list));      }     }    public bool IsReusable    {      get      {        return false;      }    }  }  public class Comments  {    public int Id { get; set; }    public string IP{get;set;}    public string Msg{get;set;}    public string PostDate{get;set;}  }}
复制代码

这样我们真的是省了很多力气啊,是不是jQuery很强大啊。。。。。。。。。。。。。

然后吧,微软感觉我必须封装自己的ajax,这样使得开发者做项目变得容易一些,微软真的是帮我们封装好了一个,但是对于高手来说,大家都不想用,感觉这样的代码太呆板,一点不灵活,我再下面引入代码,供新手参考:(不了解ajax运行原理的新手一样可以使用ajax快速开发新的项目)

复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatPanel.aspx.cs" Inherits="ajax学习.UpdatePanel.UpdatPanel" %><%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head runat="server">  <title></title></head><body>  <form id="form1" runat="server">  <asp:ScriptManager ID="ScriptManager1" runat="server">  </asp:ScriptManager>  <div>    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>    <asp:Button ID="Button1" runat="server" Text="普通刷新页面显示当前时间"       onclick="Button1_Click" />  </div>  <div>      <asp:UpdatePanel ID="UpdatePanel1" runat="server">      <ContentTemplate>        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Button ID="Button2" runat="server" onclick="Button2_Click"           Text="Ajax无刷新显示当前时间" />        <br />      </ContentTemplate>    </asp:UpdatePanel>  </div>  </form></body></html>
复制代码

但是微软后来真的是开发一个很好地工具,那就是ajax与WCF的结合,废话少说,引入代码,供大家思考

复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WCF_Ajax.aspx.cs" Inherits="ajax学习.WCF之Ajax.WCF_Ajax" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head runat="server">  <title></title>    <script language="javascript" type="text/javascript">// <![CDATA[    function Button1_onclick() {      PersonService.GetPerson(1, function (data) {        alert(data.Name);      },      function () {        alert("失败");      });    }// ]]>  </script></head><body>  <form id="form1" runat="server">  <div>      <asp:ScriptManager ID="ScriptManager1" runat="server">      <Services>        <asp:ServiceReference Path="./PersonService.svc" /> //注意路径处理问题,      </Services>    </asp:ScriptManager>    <input id="Text1" type="text" />    <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />    <br />    </div>  </form></body></html>
复制代码

后台代码:(PersonService.svc)

复制代码
using System;using System.Collections.Generic;using System.Linq;using System.Runtime.Serialization;using System.ServiceModel;using System.ServiceModel.Activation;using System.ServiceModel.Web;using System.Text;namespace ajax学习.WCF之Ajax{  [ServiceContract(Namespace = "")]  [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  public class PersonService  {    // 要使用 HTTP GET,请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json)    // 要创建返回 //   请添加 [WebGet(ResponseFormat=WebMessageFormat.//   并在操作正文中包括以下行:    //     WebOperationContext.Current.OutgoingResponse.ContentType = "text/    [OperationContract]    public void DoWork()    {      // 在此处添加操作实现      return;    }    [OperationContract]    public Person GetPerson(int id)    {      return new Person(){Name="Tom",Age=30};    }    // 在此处添加更多操作并使用 [OperationContract] 标记它们  }  public class Person  {    public string Name { get; set; }    public int Age{get;set;}  }}
复制代码

使用了WCF后我们就可以在javascript中直接调用后台封装的属性和方法了,就这样,很简单吧,言归正传,学会才是硬道理,我将我的代码程序上传到网上了,大家如果不懂的话,可以自己调试一下。以下是我程序代码的下载地址:http://vdisk.weibo.com/s/BQ2aD 或者这个地址 http://download.csdn.net/detail/heikeyuit/5398845