1、AJAX简介

（1、没有AJAX会怎么样？普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面，比如实现显示服务器的时间。每次都要刷新页面的坏处：页面刷新打断用户操作、速度慢、增加服务器的流量压力。 如果没有AJAX，在youku看视频的过程中如果点击了“顶、踩”、评论、评论翻页，页面就会刷新，视频就会被打断。试想一个效果：在YOUKU网看视 频，然后看到一个顶踩的功能，看没有ajax会打断视频，然后将按钮用UpdatePanel包起来就不会打断视频了。用HttpWatch看没有 AJAX的时候服务器返回的是整个页面，有了AJAX服务器只返回几个按钮的内容。

   （2、AJAX（AsynchronousJavaScript and XML，异步JavaScript和XML）是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据，就像JavaScript版的WebClient一样，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据，这样页面就不会刷新了。XMLHTTPRequest是AJAX的核心对象。
 
2、 XMLHTTPRequest

    （1、开发一个AJAX功能需要开发服务端和客户端两
块程序。以一个显示服务端时间为例。首先开发一个GetDate1.ashx，输出当前时间。在HTML页面中放一个按
钮，在按钮的onclick中创建XMLHTTP向GetDate1.ashx发送请求，获得返回的数据并且显示到界面上。下面的代码非常重要，是精华来
着，必背：

  1.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.  3 <head>
  4.  4     <title>AJAX01</title>
  5.  5     <script type="text/javascript">
  6.  6         function btnClick() {
  7.  7             //alert(1);
  8.  8             // 1 创建XMLHTTP对象，相当于WebClient
  9.  9             var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10. 10
  11. 11             if (!xmlhttp) {
  12. 12                 alert("创建xmlhttp对象异常");
  13. 13                 return;
  14. 14             }
  15. 15
  16. 16             // 2 “准备”01AJAX.ashx发出Post请求。这里还没有发出请求
  17. 17             //XMLHTTP默认（也推荐）不是同步请求的，也就是open方法并不像WebClient的DownloadString
  18. 18             //那样把服务器返回的数据拿到才返回，
  19. 19             //是异步的，因此需要监听onreadystatechange事件
  20. 20
  21. 21
  22. 22             xmlhttp.open("POST", "01AJAX.ashx?id=" + encodeURI('AJAX服务器') + "&ts=" + new Date(), false);
  23. 23
  24. 24             xmlhttp.onreadystatechange = function () {
  25. 25                 if (xmlhttp.readyState == 4) {//readyState == 4 表示服务器返回数据了
  26. 26                     if (xmlhttp.status == 200) {//如果状态码为200则是成功
  27. 27                         //接收服务器的返回数据，没有用send的返回值，而是在onreadystatechange事件里来接收
  28. 28                         document.getElementById("txtTime").value = xmlhttp.responseText; //responseText属性为服务器返回的文本
  29. 29                     }
  30. 30                     else {
  31. 31                         alert("AJAX服务器返回错误!");
  32. 32                     }
  33. 33                 }
  34. 34             }
  35. 35             //不要以为if(xmlhttp.readyState == 4) 在send之前执行！！！！
  36. 36             //if (xmlhttp.readyState == 4)只有在服务器返回值以后才会执行，而!!send之后过一会儿服务器才会返回数据
  37. 37             xmlhttp.send(); //这时才开始发送请求
  38. 38         }
  39. 39     </script>
  40. 40 </head>
  41. 41 <body>
  42. 42     <input type="text" id="txtTime" />
  43. 43     <input type="button" id="btn" value="button" onclick="btnClick()" />
  44. 44 </body>
  45. 45 </html>
  1.  1 using System;
  2.  2 using System.Collections.Generic;
  3.  3 using System.Linq;
  4.  4 using System.Web;
  5.  5
  6.  6 namespace AJAX
  7.  7 {
  8.  8     /// <summary>
  9.  9     /// _01AJAx 的摘要说明
  10. 10     /// </summary>
  11. 11     public class _01AJAx : IHttpHandler
  12. 12     {
  13. 13
  14. 14         public void ProcessRequest(HttpContext context)
  15. 15         {
  16. 16             context.Response.ContentType = "text/plain";
  17. 17             string id = context.Request["id"];
  18. 18             context.Response.Write(DateTime.Now.ToString()+"---"+id);
  19. 19         }
  20. 20
  21. 21         public bool IsReusable
  22. 22         {
  23. 23             get
  24. 24             {
  25. 25                 return false;
  26. 26             }
  27. 27         }
  28. 28     }
  29. 29 }
   （2、不使用UpdatePanel、JQuery等AJAX库编写一个AJAX程序。 也可以在xmlhttp.open中向服务器传递参数：
xmlhttp.open("POST","GetDate1.ashx?id=1&
amp;name="+"encodeURL('中国')",
false)，如果传递给服务器的请求里有中文，则需要使用Javascript函数encodeURI来进行URL编码。
 
          （3、发出请求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。只有在服务器返回值以后才会执
       行，而!!send之后过一会儿服务器才会返回数据。
          （4、 xmlhttp.open("GET","GetDate1.ashx?id=1&name="+"encodeURL('中国')", false)，如果这样单纯滴传两个静态参数的话，浏览器可能会保持一
       种提取缓存的状态，所以最好传一个动态参数，随意一个参数。这是一个AJAX缓冲存在的问题。如果用POST的方式，就不会发生缓冲的问题。
 案例1：无刷新异步操作-->汇率转换

  1.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.  3 <head>
  4.  4     <title>02 huilv question</title>
  5.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  6.  6     <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
  7.  7     <script type="text/javascript">
  8.  8         function btnOnclick() {
  9.  9             var moneyType = $("#selectedID").val();
  10. 10             var account = $("#myaccount").val();
  11. 11             //alert(account);
  12. 12             //alert(moneyType);
  13. 13             var xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");
  14. 14             if (!xmlhttp) {
  15. 15                 alert("error from create xmlhttp!");
  16. 16                 return;
  17. 17             }
  18. 18             xmlhttp.open("POST", "02" + encodeURI('汇率问题') + ".ashx?moneyType=" + moneyType + "&account=" + account + "&ts=" + new Date(), false);
  19. 19             xmlhttp.onreadystatechange = function () {
  20. 20                 if (xmlhttp.readyState == 4) {
  21. 21                     alert(xmlhttp.responseText);
  22. 22                     if (xmlhttp.status == 200) {
  23. 23                         alert(xmlhttp.responseText);
  24. 24                         //$("#result").text = xmlhttp.responseText;
  25. 25                         $("#result").val(xmlhttp.responseText);
  26. 26                     }
  27. 27                 }
  28. 28             }
  29. 29             xmlhttp.send();
  30. 30         }
  31. 31
  32. 32     </script>
  33. 33 </head>
  34. 34 <body>
  35. 35     <input id="myaccount" type="text" name="name" value="" />
  36. 36     <select id="selectedID">
  37. 37         <option value="1" selected="selected">dollar</option>
  38. 38         <option value="2">Japan</option>
  39. 39         <option value="3">Hongkong</option>
  40. 40     </select>
  41. 41     <input type="button" name="name" value="check" onclick="btnOnclick()" />
  42. 42     <input type="text" name="name" value=" " id="result"/>
  43. 43 </body>
  44. 44 </html>
  1.  1 using System;
  2.  2 using System.Collections.Generic;
  3.  3 using System.Linq;
  4.  4 using System.Web;
  5.  5
  6.  6 namespace AJAX
  7.  7 {
  8.  8     /// <summary>
  9.  9     /// _02汇率问题 的摘要说明
  10. 10     /// </summary>
  11. 11     public class _02汇率问题 : IHttpHandler
  12. 12     {
  13. 13
  14. 14         public void ProcessRequest(HttpContext context)
  15. 15         {
  16. 16             context.Response.ContentType = "text/plain";
  17. 17             //context.Response.Write("Hello World");
  18. 18             //get two accounts from html
  19. 19             string moneyType = context.Request["moneyType"];
  20. 20             int account = Convert.ToInt32(context.Request["account"]);
  21. 21
  22. 22             if (moneyType == "1")//dollar
  23. 23             {
  24. 24                 context.Response.Write(account/7);
  25. 25             }
  26. 26             else if(moneyType=="2")//Japan
  27. 27             {
  28. 28                 context.Response.Write(account*10);
  29. 29             }
  30. 30             else//Hongkong
  31. 31             {
  32. 32                 context.Response.Write(account*10/9);
  33. 33             }
  34. 34         }
  35. 35
  36. 36         public bool IsReusable
  37. 37         {
  38. 38             get
  39. 39             {
  40. 40                 return false;
  41. 41             }
  42. 42         }
  43. 43     }
  44. 44 }

！！！遇到问题总结：
        ☆xmlhttp.open("POST",
"02" + encodeURI('汇率问题') + ".ashx?moneyType=" + moneyType +
"&account=" + account + "&ts=" + new Date(),
false);这句代码中，用到中文字符都要用encodeURl来转化字符类型，不仅仅是参数，页面名称亦如是。

☆$("#result").val(xmlhttp.responseText);将xmlhttp获取得到的文本数据传给val()。

3、JQuery AJAX

      
（1、newActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法。非IE浏览器
中创建方法是newXmlHttpRequest()。为了兼容不同的浏览 器需要编写很多代码，下面的兼容浏览器也不是很完整的：

  1.  1 function CreateXmlHttp()
  2.  2
  3.  3         {
  4.  4
  5.  5             varxmlhttp;
  6.  6
  7.  7             //非IE浏览器创建XmlHttpRequest对象
  8.  8
  9.  9             if (window.XmlHttpRequest)
  10. 10
  11. 11             {
  12. 12
  13. 13                 xmlhttp =new XmlHttpRequest();
  14. 14
  15. 15             }
  16. 16
  17. 17             //IE浏览器创建XmlHttpRequest对象
  18. 18
  19. 19             if (window.ActiveXObject)
  20. 20
  21. 21             {
  22. 22
  23. 23                 try
  24. 24
  25. 25                 {
  26. 26
  27. 27                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  28. 28
  29. 29                 }
  30. 30
  31. 31                 catch (e)
  32. 32
  33. 33                 {
  34. 34
  35. 35                     try
  36. 36
  37. 37                     {
  38. 38
  39. 39                         xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
  40. 40
  41. 41                     }
  42. 42
  43. 43                     catch (ex) {alert("AJAX创建失败！");}
  44. 44
  45. 45                 }
  46. 46
  47. 47             }
  48. 48
  49. 49             return xmlhttp;
  50. 50
  51. 51         }

（2、采用JQueryAJAX方式可以高效化解浏览器问题：JQuery中提供了简化ajax使用的方法。$.ajax()函数是JQuery中提供的ajax访问函数，

$.post()是对$.ajax()的post方式提交ajax查询的封装，$.get()是对$.ajax()的get方式提交ajax查询的封装。推荐用post方式，因为post方式没有缓存的问题。
案例1：对前面的汇率问题进行修改简化

  1.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.  3 <head>
  4.  4     <title>02 huilv question</title>
  5.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  6.  6     <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
  7.  7     <script type="text/javascript">
  8.  8         function btnOnclick_01() {//just test ,nothing
  9.  9             $.post("01AJAX.ashx", function (data, textSize) {
  10. 10                 if (textSize == "success") {
  11. 11                     alert(data);
  12. 12                 } else {
  13. 13                     alert("AJAX create a error!!!");
  14. 14                 }
  15. 15             });
  16. 16
  17. 17         }
  18. 18         function btnOnclick_02() {// huilv question
  19. 19             var account = $("#myaccount").val();
  20. 20             var moneyType = $("#selectedID").val();
  21. 21             $.post("03JQuery" + encodeURI('汇率问题') + ".ashx", { "account": account, "moneyType": moneyType }, function (data, textSize) {
  22. 22                 if (textSize == "success") {
  23. 23                     alert(data);
  24. 24                 } else {
  25. 25                     alert("AJAX create a error!!!");
  26. 26                 }
  27. 27             });
  28. 28
  29. 29         }
  30. 30     </script>
  31. 31 </head>
  32. 32 <body>
  33. 33     <input id="myaccount" type="text" name="name" value="" />
  34. 34     <select id="selectedID">
  35. 35         <option value="1" selected="selected">dollar</option>
  36. 36         <option value="2">Japan</option>
  37. 37         <option value="3">Hongkong</option>
  38. 38     </select>
  39. 39     <input type="button" name="name" value="Just_test" onclick="btnOnclick_01()" />
  40. 40     <input type="button" name="name" value="check" onclick="btnOnclick_02()" />
  41. 41     <input type="text" name="name" value=" " id="result"/>
  42. 42 </body>
  43. 43 </html>

 4、练习

 练习1：JQuery实现Ajax 根据商品名称自动显示价格

  1.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.  3 <head>
  4.  4     <title>search the price problem</title>
  5.  5     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  6.  6     <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
  7.  7     <script type="text/javascript">
  8.  8         $(function () {
  9.  9             $("#myinput").blur(function () {
  10. 10                 var name = $("#myinput").val();
  11. 11                 $.post("GetPrice.ashx", { "name": name }, function (data, istatus) {
  12. 12                     if (istatus == "success") {
  13. 13                         var myArray = data.split("|");
  14. 14                         if (myArray[0] == "ok") {
  15. 15                             $("#result").val(myArray[1]);
  16. 16                         }
  17. 17                         else if (myArray[0] == "none") {
  18. 18                             alert("No Sale!");
  19. 19                         } else {
  20. 20                             alert("error data!");
  21. 21                         }
  22. 22                     } else {
  23. 23                         alert("AJAX error!s");
  24. 24                     }
  25. 25                 });
  26. 26             });
  27. 27         });
  28. 28     </script>
  29. 29 </head>
  30. 30 <body>
  31. 31     <input id="myinput" type="text" name="name" value="" />
  32. 32     <input type="text" name="name" value=" " id="result"/>
  33. 33 </body>
  34. 34 </html>
  1.  1 using System;
  2.  2 using System.Collections.Generic;
  3.  3 using System.Linq;
  4.  4 using System.Web;
  5.  5 using AJAX.DAL.DataSet1TableAdapters;
  6.  6
  7.  7 namespace AJAX
  8.  8 {
  9.  9     /// <summary>
  10. 10     /// _02汇率问题 的摘要说明
  11. 11     /// </summary>
  12. 12     public class GetPrice : IHttpHandler
  13. 13     {
  14. 14
  15. 15         public void ProcessRequest(HttpContext context)
  16. 16         {
  17. 17             context.Response.ContentType = "text/plain";
  18. 18             //context.Response.Write("Hello World");
  19. 19             string name = context.Request["name"];
  20. 20             var data = new buyTableAdapter().GetDataByName(name);
  21. 21             if(data.Count<=0)
  22. 22             {
  23. 23                 context.Response.Write("none|0");
  24. 24             }
  25. 25             else
  26. 26             {
  27. 27                 context.Response.Write("ok|"+data.Single().Price);
  28. 28             }
  29. 29             //context.Response.Write("happy");
  30. 30         }
  31. 31
  32. 32         public bool IsReusable
  33. 33         {
  34. 34             get
  35. 35             {
  36. 36                 return false;
  37. 37             }
  38. 38         }
  39. 39     }
  40. 40 }

！！！遇到问题总结：

☆发现错误，调试了半天，但是根本无法进入到应该处理的代码段进行调试。后来经过一番查找，得出原因！！！

我是直接从之前的其他页面拷贝整个ashx 文件然后修改成到现在的文件，VS2010 没有自动帮我修改ashx文件所指向的类，必须手工进行修改。

解决方法：右键点击该 ashx 文件，选择“查看标记”，在打开的编辑界面中，修改 Class 项，改为新项目所指向命名空间下的类名。

 练习2：无刷新评论帖子
    方法1：评论采用AJAX，但采用Repeater动态显示列表

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ReviewByRepeater.aspx.cs" Inherits="AJAX.ReviewByRepeater1" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title></title>
  8.     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  9.     <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
  10.     <script type="text/javascript">
  11.         $(function () {
  12.             $("#Button1").click(function () {
  13.                 var msg = $("#TextArea1").val();
  14.                 $.post("ReviewByRepeater.ashx", { "msg": msg }, function (data, istaus) {
  15.                     if (istaus != "success") {
  16.                         alert("failed!");
  17.                         return;
  18.                     }
  19.                     if (data == "ok") {
  20.                         var newComment = $("<li>PostDate:" + new Date() + "IP:me,内容：" + msg + "</li>");
  21.                         $("#ulCommentId").append(newComment);
  22.                         alert("success!");
  23.                     }
  24.                     else {
  25.                         alert("error!");
  26.                     }
  27.                 });
  28.             });
  29.         });
  30.     </script>
  31. </head>
  32. <body>
  33.     <form id="form1" runat="server">
  34.     <div>
  35.         <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
  36.             DeleteMethod="Delete" InsertMethod="Insert"
  37.             OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
  38.             TypeName="AJAX.DAL.DataSet1TableAdapters.T_PostsTableAdapter"
  39.             UpdateMethod="Update">
  40.             <DeleteParameters>
  41.                 <asp:Parameter Name="Original_ID" Type="Int64" />
  42.             </DeleteParameters>
  43.             <InsertParameters>
  44.                 <asp:Parameter Name="IPAdrr" Type="String" />
  45.                 <asp:Parameter Name="Msg" Type="String" />
  46.                 <asp:Parameter Name="PostDate" Type="DateTime" />
  47.             </InsertParameters>
  48.             <UpdateParameters>
  49.                 <asp:Parameter Name="IPAdrr" Type="String" />
  50.                 <asp:Parameter Name="Msg" Type="String" />
  51.                 <asp:Parameter Name="PostDate" Type="DateTime" />
  52.                 <asp:Parameter Name="Original_ID" Type="Int64" />
  53.             </UpdateParameters>
  54.         </asp:ObjectDataSource>
  55.         <ul id="ulCommentId">
  56.         <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
  57.             <ItemTemplate><li>Posdate:<%#Eval("PostDate") %>,IP:<%#Eval("IPAdrr") %>,内容：<%#Eval("Msg") %></li></ItemTemplate>
  58.         </asp:Repeater>
  59.         </ul>
  60.         <br />
  61.         <textarea id="TextArea1" cols="20" rows="2"></textarea>
  62.         <input id="Button1" type="button" value="button" />
  63.     </div>
  64.     </form>
  65. </body>
  66. </html>
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using AJAX.DAL.DataSet1TableAdapters;
  6.  
  7. namespace AJAX
  8. {
  9.     /// <summary>
  10.     /// ReviewByRepeater 的摘要说明
  11.     /// </summary>
  12.     public class ReviewByRepeater : IHttpHandler
  13.     {
  14.  
  15.         public void ProcessRequest(HttpContext context)
  16.         {
  17.             context.Response.ContentType = "text/plain";
  18.             //context.Response.Write("Hello World");
  19.             string msg = context.Request["msg"];
  20.             new T_PostsTableAdapter().Insert(context.Request.UserHostAddress,msg,DateTime.Now);
  21.             context.Response.Write("ok");
  22.         }
  23.  
  24.         public bool IsReusable
  25.         {
  26.             get
  27.             {
  28.                 return false;
  29.             }
  30.         }
  31.     }
  32. }

方法2：评论和列表均采用AJAX，完全静态操作

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  6.     <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             $.post("ReviewByAjax.ashx", function (data, istaus) {
  10.                 alert(data);
  11.                 //alert(istaus);
  12.                 if (istaus != "success") {
  13.                     $("#bodyComment").append($("<li>加载失败</li>"));
  14.                 }
  15.                 var mydata = data.split("$");
  16.                 for (var i = 0; i < mydata.length; i++) {
  17.                     var rowdata = mydata[i].split("|");
  18.                     var comment = $("<li> IP:" + rowdata[0] + ",PostDate:" + rowdata[1]
  19.                         + ",内容：" + rowdata[2]+"</li>");
  20.                     $("#bodyComment").append(comment);
  21.                 }
  22.             });
  23.         });
  24.     </script>
  25. </head>
  26. <body id="bodyComment">
  27.  
  28. </body>
  29. </html>
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using AJAX.DAL.DataSet1TableAdapters;
  6. using System.Text;
  7.  
  8. namespace AJAX
  9. {
  10.     /// <summary>
  11.     /// ReviewByAjax1 的摘要说明
  12.     /// </summary>
  13.     public class ReviewByAjax : IHttpHandler
  14.     {
  15.  
  16.         public void ProcessRequest(HttpContext context)
  17.         {
  18.             context.Response.ContentType = "text/plain";
  19.             //context.Response.Write("Hello World");
  20.             var comments = new T_PostsTableAdapter().GetData();
  21.             StringBuilder sb = new StringBuilder();
  22.             foreach (var comment in comments)
  23.             {
  24.                 sb.Append(comment.IPAdrr).Append("|").Append(comment.PostDate)
  25.                     .Append("|").Append(comment.Msg).Append("$");
  26.             }
  27.             context.Response.Write(sb.ToString().Trim('$'));
  28.         }
  29.  
  30.         public bool IsReusable
  31.         {
  32.             get
  33.             {
  34.                 return false;
  35.             }
  36.         }
  37.     }
  38. }

总结：如果想要控制用户的评论，例如禁止用户输入粗话等不文明用语，可以在ashx文件中添加  if(Msg.Contains("粗话")){return;}

 5、Json
 
         （1、ajax传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程。因此ajax中有一个事实上的数据传输标准json,json将复杂对像序 列化为一个字符串，在浏览端再将字符串反序列化为javascript可以读取的对像，看一下json的格式，json被几乎所有语言支持。

（2、c#中将.net对像序列化为json字符串的方法： javascriptserializer().serialize(p),javascriptSerializer在System.web.extensions.dll中，是net3.x中新增的类，如果在.net2.0则需要用第三方的组件。

（3、Jquery ajax得到的data是Json格式数据，用$.parseJSON（data)方法将json格式数据解析为javaScript对像。

 练习1：用Json实现类中数据的传递

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  6.     <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             $.post("JsonText01.ashx", function (data, istaus) {
  10.                 var post = $.parseJSON(data);
  11.  
  12.                 /*例子测试 1 */
  13.                 //alert(post.PostDate);
  14.                 /*例子测试 2 */
  15.                 //alert(post[0]);
  16.                 /*例子测试 3 */
  17.                 alert(post[1].PostDate);
  18.             });
  19.         });
  20.     </script>
  21. </head>
  22. <body id="bodyComment">
  23.  
  24. </body>
  25. </html>
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Script.Serialization;
  6.  
  7. namespace AJAX
  8. {
  9.     /// <summary>
  10.     /// JsonText01 的摘要说明
  11.     /// </summary>
  12.     public class JsonText01 : IHttpHandler
  13.     {
  14.  
  15.         public void ProcessRequest(HttpContext context)
  16.         {
  17.             context.Response.ContentType = "text/plain";
  18.             //context.Response.Write("Hello World");
  19.             JavaScriptSerializer jss=new JavaScriptSerializer();
  20.  
  21.             /*测试用例1
  22.             string myJson = jss.Serialize(new Post() { PostDate = "2012-09-10",Msg="send new Mag!" });
  23.             context.Response.Write(myJson);*/
  24.  
  25.             /*测试用例2
  26.             string myJson = jss.Serialize(new string[] {"2012-09-10", "send new Mag!" });
  27.             context.Response.Write(myJson);*/
  28.  
  29.             /*测试用例3*/
  30.             Post[] posts = new Post[]
  31.                                {
  32.                                    new Post() {PostDate = "2012-09-10", Msg = "send old Mag!"},
  33.                                    new Post() {PostDate = "2013-01-12", Msg = "send new Mag!"}
  34.                                };
  35.             string myJson = jss.Serialize(posts);
  36.             context.Response.Write(myJson);
  37.         }
  38.         //q1:
  39.         //JavaScriptSerializer要引用using System.Web.Script.Serialization;
  40.  
  41.         public bool IsReusable
  42.         {
  43.             get
  44.             {
  45.                 return false;
  46.             }
  47.         }
  48.     }
  49.     public class Post
  50.     {
  51.         public string PostDate { set; get; }
  52.         public string Msg { get; set; }
  53.     }
  54. }

总结：JavaScriptSerializer要引用using System.Web.Script.Serialization;但是using System.Web.Script.Serialization;引用的前提是引用System.web.extensions.dll

练习2：用Json实现无刷新评论列表分页

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Script.Serialization;
  6. using AJAX.DAL.DataSet1TableAdapters;
  7. //高效分页
  8. namespace AJAX
  9. {
  10.     /// <summary>
  11.     /// JsonText02 的摘要说明
  12.     /// </summary>
  13.     public class JsonText02 : IHttpHandler
  14.     {
  15.  
  16.         public void ProcessRequest(HttpContext context)
  17.         {
  18.             context.Response.ContentType = "text/plain";
  19.             string action = context.Request["action"];
  20.  
  21.             if (action == "getpagecount")  //如果请求的参数是getpagecount（获取页数）
  22.             {
  23.                 var adapter = new T_PostsTableAdapter();
  24.                 int count = adapter.ScalarQuery().Value;  //获取数据总条数
  25.                 int pageCount = count / 10;   //每页只显示10条
  26.  
  27.                 if (count % 10 != 0)    //如果数据不够10条，则只显示第一页
  28.                 {
  29.                     pageCount++;
  30.                 }
  31.                 context.Response.Write(pageCount);   //返回页数
  32.             }
  33.             else if (action == "getpagedata")   //如果请求的的参数是getpagedata（获取评论内容）
  34.             {
  35.                 string pagenum = context.Request["pagenum"];   //获取客户端点击的是哪一页
  36.                 int iPageNum = Convert.ToInt32(pagenum);
  37.                 var adapter = new T_PostsTableAdapter();
  38.                 // (iPageNum-1)*10+1  第一条数据，（iPageNum）*10 最后一条数据;
  39.                 var data = adapter.GetPageData((iPageNum - 1) * 10 + 1, (iPageNum) * 10);
  40.  
  41.                 List<Comment> list = new List<Comment>();   //由于数据过于复杂所引发异常，定义一个Comment的类，内有postDate,comment两个属性；
  42.                 foreach (var row in data)   //遍历data
  43.                 {
  44.                     list.Add(new Comment()
  45.                     {
  46.                         PostDate = row.PostDate.ToShortDateString(),
  47.                         Msg = row.Msg,
  48.                         IPAdrr = row.IPAdrr
  49.                     });
  50.                 }
  51.                 JavaScriptSerializer jss = new JavaScriptSerializer();
  52.                 context.Response.Write(jss.Serialize(list));  //返回序列化的数据;
  53.             }
  54.         }
  55.  
  56.         public bool IsReusable
  57.         {
  58.             get
  59.             {
  60.                 return false;
  61.             }
  62.         }
  63.     }
  64.  
  65.     public class Comment
  66.     {
  67.         public string PostDate { get; set; }
  68.         public string Msg { get; set; }
  69.         public string IPAdrr { get; set; }
  70.     }
  71. }
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  6.     <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
  7.     <style type="text/css">
  8.         ul
  9.         {
  10.             list-style: none;
  11.             margin: 0px;
  12.             padding: 0px;
  13.         }
  14.         li
  15.         {
  16.             border-bottom: 1px dashed #000;
  17.             padding: 5px;
  18.             font-family: "微软雅黑";
  19.             font-size: 12px;
  20.         }
  21.         .column
  22.         {
  23.             width: 80%;
  24.             margin: 100px auto;
  25.             padding: 10px;
  26.             border: 1px solid #000;
  27.         }
  28.         p
  29.         {
  30.             background: #CCC;
  31.             padding: 10px;
  32.         }
  33.         .divstyle
  34.         {
  35.             min-height: 50px;
  36.             padding: 10px;
  37.         }
  38.         .trPage
  39.         {
  40.         }
  41.     </style>
  42.     <script type="text/javascript" language="javascript">
  43.         $(function () {
  44.             //请求默认显示第一页数据
  45.             $.post("JsonText02.ashx", { "action": "getpagedata", "pagenum": "1" }, function (data, status) {
  46.                 alert(1);
  47.                 if (status == "success") {
  48.                     var comments = $.parseJSON(data);
  49.                     $("#ulComments li").remove();   //首先清空上一次的数据;
  50.                     for (var i = 0; i < comments.length; i++) {
  51.                         var comment = comments[i];
  52.                         var li = $("<li><p>回复日期:" + comment.PostDate + "&nbsp;&nbsp;&nbsp;&nbsp;回复IP地址：" + comment.IPAdrr + "</p><div class='divstyle'>" + comment.Msg + "</div></li>");
  53.  
  54.                         $("#ulComments").append(li);
  55.                     }
  56.                 }
  57.             });
  58.             $.post("JsonText02.ashx", { "action": "getpagecount" }, function (data, status) {
  59.                 for (var i = 1; i <= data; i++) {
  60.                     var td = $("<td><a href=''>" + i + "</a></td>");
  61.                     $(".trPage").append(td);
  62.                 }
  63.  
  64.                 //给链接添加click事件
  65.                 $(".trPage td").click(function (e) {
  66.                     e.preventDefault();
  67.  
  68.                     $.post("JsonText02.ashx", { "action": "getpagedata", "pagenum": $(this).text() }, function (data, status) {
  69.                         var comments = $.parseJSON(data);  //使用JSON序列化数据;
  70.                         $("#ulComments li").remove();   //首先清空上一次的数据;
  71.  
  72.                         for (var i = 0; i < comments.length; i++) {   //遍历响应的数据data
  73.                             var comment = comments[i];   //取到每条评论
  74.  
  75.                             //最后向ul中加载li（数据的内容）
  76.                             var li = $("<li><p>回复日期:" + comment.PostDate + "&nbsp;&nbsp;&nbsp;&nbsp;回复IP地址：" + comment.IPAdrr + "</p><div class='divstyle'>" + comment.Msg + "</div></li>");
  77.                             $("#ulComments").append(li);
  78.                         }
  79.                     });
  80.                 });
  81.             });
  82.         });
  83.     </script>
  84. </head>
  85. <body>
  86.     <div class="column">
  87.         <table>
  88.             <tr class="trPage">
  89.             </tr>
  90.         </table>
  91.         <ul id="ulComments">
  92.         </ul>
  93.         <table>
  94.             <tr class="trPage">
  95.             </tr>
  96.         </table>
  97.     </div>
  98. </body>
  99. </html>
  1. select * from
  2. (
  3.   SELECT ID, PostDate, Msg,IPAdrr,Row_Number() over(order by PostDate desc) rownum
  4. FROM dbo.T_Posts
  5. )t
  6. where t.rownum>=@startRowIndex and t.rownum<=@endRowIndex

练习3：用Json实现无刷新删除评论

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using AJAX.DAL.DataSet1TableAdapters;
  6.  
  7. namespace AJAX
  8. {
  9.     /// <summary>
  10.     /// JsonDelete03 的摘要说明
  11.     /// </summary>
  12.     public class JsonDelete03 : IHttpHandler
  13.     {
  14.  
  15.         public void ProcessRequest(HttpContext context)
  16.         {
  17.             context.Response.ContentType = "text/plain";
  18.             //context.Response.Write("Hello World");
  19.             string id = context.Request["ID"];
  20.             new T_PostsTableAdapter().DeleteById(Convert.ToInt32(id));
  21.         }
  22.  
  23.         public bool IsReusable
  24.         {
  25.             get
  26.             {
  27.                 return false;
  28.             }
  29.         }
  30.     }
  31. }
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonDelete03.aspx.cs" Inherits="AJAX.JsonDelete031" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6.     <title></title>
  7.     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
  8.     <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
  9.     <script type="text/javascript">
  10.         $(function () {
  11.             $("input[isDelete=true]").click(function () {
  12.                 var myID = $(this).attr("id");
  13.                 $.post("JsonDelete03.ashx", { "ID": myID }, function (data, istaus) {
  14.                     if (istaus == "success") {
  15.                         alert("删除成功！");
  16.                         //在这里，$(this)指的不是控件本身而是这个位置
  17.                         $("input[id=" + myID + "]").parent().parent().remove("tr");
  18.                     }
  19.                     else {
  20.                         alert("删除失败，请联系管理员");
  21.                     }
  22.                 });
  23.             });
  24.         });
  25.     </script>
  26. </head>
  27. <body>
  28.     <form id="form1" runat="server">
  29.     <div>
  30.         <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete"
  31.             InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
  32.             TypeName="AJAX.DAL.DataSet1TableAdapters.T_PostsTableAdapter" UpdateMethod="Update">
  33.             <DeleteParameters>
  34.                 <asp:Parameter Name="Original_ID" Type="Int64" />
  35.             </DeleteParameters>
  36.             <InsertParameters>
  37.                 <asp:Parameter Name="IPAdrr" Type="String" />
  38.                 <asp:Parameter Name="Msg" Type="String" />
  39.                 <asp:Parameter Name="PostDate" Type="DateTime" />
  40.             </InsertParameters>
  41.             <UpdateParameters>
  42.                 <asp:Parameter Name="IPAdrr" Type="String" />
  43.                 <asp:Parameter Name="Msg" Type="String" />
  44.                 <asp:Parameter Name="PostDate" Type="DateTime" />
  45.                 <asp:Parameter Name="Original_ID" Type="Int64" />
  46.             </UpdateParameters>
  47.         </asp:ObjectDataSource>
  48.     </div>
  49.     <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="ObjectDataSource1"
  50.         InsertItemPosition="LastItem">
  51.  
  52.         <edititemtemplate>
  53.             <tr style="">
  54.                 <td>
  55.                     <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
  56.                     <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
  57.                 </td>
  58.                 <td>
  59.                     <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
  60.                 </td>
  61.                 <td>
  62.                     <asp:TextBox ID="IPAdrrTextBox" runat="server" Text='<%# Bind("IPAdrr") %>' />
  63.                 </td>
  64.                 <td>
  65.                     <asp:TextBox ID="MsgTextBox" runat="server" Text='<%# Bind("Msg") %>' />
  66.                 </td>
  67.                 <td>
  68.                     <asp:TextBox ID="PostDateTextBox" runat="server"
  69.                         Text='<%# Bind("PostDate") %>' />
  70.                 </td>
  71.             </tr>
  72.         </edititemtemplate>
  73.         <emptydatatemplate>
  74.             <table runat="server"
  75.                 style="border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
  76.                 <tr>
  77.                     <td>
  78.                         未返回数据。</td>
  79.                 </tr>
  80.             </table>
  81.         </emptydatatemplate>
  82.         <insertitemtemplate>
  83.             <tr style="">
  84.                 <td>
  85.                     <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
  86.                     <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
  87.                 </td>
  88.                 <td>
  89.                     &nbsp;</td>
  90.                 <td>
  91.                     <asp:TextBox ID="IPAdrrTextBox" runat="server" Text='<%# Bind("IPAdrr") %>' />
  92.                 </td>
  93.                 <td>
  94.                     <asp:TextBox ID="MsgTextBox" runat="server" Text='<%# Bind("Msg") %>' />
  95.                 </td>
  96.                 <td>
  97.                     <asp:TextBox ID="PostDateTextBox" runat="server"
  98.                         Text='<%# Bind("PostDate") %>' />
  99.                 </td>
  100.             </tr>
  101.         </insertitemtemplate>
  102.         <itemtemplate>
  103.             <tr style="color: #333333;">
  104.                 <td>
  105.                     <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
  106.                     <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
  107.                 <input type="button" isDelete="true" id='<%# Eval("ID") %>' value=" 无刷新删除" />
  108.                 </td>
  109.                 <td>
  110.                     <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
  111.                 </td>
  112.                 <td>
  113.                     <asp:Label ID="IPAdrrLabel" runat="server" Text='<%# Eval("IPAdrr") %>' />
  114.                 </td>
  115.                 <td>
  116.                     <asp:Label ID="MsgLabel" runat="server" Text='<%# Eval("Msg") %>' />
  117.                 </td>
  118.                 <td>
  119.                     <asp:Label ID="PostDateLabel" runat="server" Text='<%# Eval("PostDate") %>' />
  120.                 </td>
  121.             </tr>
  122.         </itemtemplate>
  123.         <layouttemplate>
  124.             <table runat="server">
  125.                 <tr runat="server">
  126.                     <td runat="server">
  127.                         <table ID="itemPlaceholderContainer" runat="server" border="1"
  128.                             style="border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
  129.                             <tr runat="server" style="color: #333333;">
  130.                                 <th runat="server">
  131.                                 </th>
  132.                                 <th runat="server">
  133.                                     ID</th>
  134.                                 <th runat="server">
  135.                                     IPAdrr</th>
  136.                                 <th runat="server">
  137.                                     Msg</th>
  138.                                 <th runat="server">
  139.                                     PostDate</th>
  140.                             </tr>
  141.                             <tr ID="itemPlaceholder" runat="server">
  142.                             </tr>
  143.                         </table>
  144.                     </td>
  145.                 </tr>
  146.                 <tr runat="server">
  147.                     <td runat="server"
  148.                         style="text-align: center;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
  149.                         <asp:DataPager ID="DataPager1" runat="server">
  150.                             <Fields>
  151.                                 <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
  152.                                     ShowLastPageButton="True" />
  153.                             </Fields>
  154.                         </asp:DataPager>
  155.                     </td>
  156.                 </tr>
  157.             </table>
  158.         </layouttemplate>
  159.         <selecteditemtemplate>
  160.             <tr style="font-weight: bold;color: #333333;">
  161.                 <td>
  162.                     <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
  163.                     <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
  164.                 </td>
  165.                 <td>
  166.                     <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
  167.                 </td>
  168.                 <td>
  169.                     <asp:Label ID="IPAdrrLabel" runat="server" Text='<%# Eval("IPAdrr") %>' />
  170.                 </td>
  171.                 <td>
  172.                     <asp:Label ID="MsgLabel" runat="server" Text='<%# Eval("Msg") %>' />
  173.                 </td>
  174.                 <td>
  175.                     <asp:Label ID="PostDateLabel" runat="server" Text='<%# Eval("PostDate") %>' />
  176.                 </td>
  177.             </tr>
  178.         </selecteditemtemplate>
  179.     </asp:ListView>
  180.     </form>
  181. </body>
  182. </html>

6、微软中的AJAX应用

（1、ASP.NET中内置的简化AJAX开发的控件UPdatePanel

☆  放入ScriptManager,将要实现AJAX效果的控件放到UpdatePanel 中即可；

            ☆ UpdatePanel远离揭秘，用httpWatch看
                    原理：
                    缺点：通讯量傻瓜化过大，浪费流量，适合企业内部用。Timer就是实现定时AJAX效果，但是数据量也很大

            ☆ 只需要把无刷新更新的部分放到UPdatePanel中
    （2、用WCF简化AJAX代码量，让javascript写C#代码
 
    （3、UpdateProgress显示正在加载
 
7、WCF了解

1.开发步骤:
     ①添加一个Web项目 在Web项目中新建”新建项”→”Web”→”启用了AJAX的WCF服务”
     ②页面上拖放ScriptManager控件 Services属性中新增一项 Path属性设置为服务路径
     ③调用服务端方法时
             
Service1.DoWork(OnDoWorkSuccess, OnDoWorkFailed);Service1为服务类名
DoWork为方法名 OnDoWorkSuccess为成功时回调函数 OnDoWorkFailed为失败时回调函数
两个函数都有一个参数result 成功时参数作为返回值 失败时参数作为错误消息。服务器端还可以返回复杂对象
浏览器端可以直接从result读取复杂对象的字段值

 8、全局文件

(1、"web" 全局应用程序类(注意文件名不要改)

①全局文件是对Web应用生命周期的一个事件响应的地方
②将Web应用启动时初始化的一些代码写到Application_Start中(如Log4Net等)
③Web应用关闭时Application_End调用
④Session启动时Session_Start调用
⑤Session结束(用户主动退出或者超时结束)时Session_End调用
⑥当一个用户请求来的时候Application_BeginRequest调用
⑦当应用程序中出现未捕获异常时Application_Error调用(通过HttpContext.Current.Server.GetLastError()获得异常信息 然后用Log4Net记录到日志中)

练习：禁止盗链和IP地址禁止

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Security;
  6. using System.Web.SessionState;
  7.  
  8. namespace AJAX
  9. {
  10.     public class Global : System.Web.HttpApplication
  11.     {
  12.         //程序启动的时候执行的代码
  13.         protected void Application_Start(object sender, EventArgs e)
  14.         {
  15.  
  16.         }
  17.         //调用Session信息开始
  18.         protected void Session_Start(object sender, EventArgs e)
  19.         {
  20.             //HttpContext.Current.Session.Abandon();//结束Session
  21.         }
  22.         //每次请求都会触发
  23.         protected void Application_BeginRequest(object sender, EventArgs e)
  24.         {
  25.             //通过HttpContext.Current.Request.Url查看来源
  26.             //用途1：可以在这里屏蔽IP地址
  27.             if(HttpContext.Current.Request.UserHostAddress=="127.0.0.1")
  28.             {
  29.                 HttpContext.Current.Response.Write("已屏蔽，请联系管理员");
  30.                 HttpContext.Current.Response.End();
  31.             }
  32.             //用途2：防盗链
  33.             if(HttpContext.Current.Request.Url.AbsolutePath.EndsWith("/JPG")&& HttpContext.Current.Request.UrlReferrer.Host!="localhost")
  34.             {
  35.                 //localhost：如果是正式上线则是域名地址
  36.                 HttpContext.Current.Response.WriteFile(HttpContext.Current.Server.MapPath("~/DSCF0802.JPG"));
  37.                 HttpContext.Current.Response.End();
  38.             }
  39.  
  40.         }
  41.  
  42.         protected void Application_AuthenticateRequest(object sender, EventArgs e)
  43.         {
  44.  
  45.         }
  46.         //程序发生异常的时候，就会被捕获，抛出异常(ASP.NET错误处理：错误页和Application_Error)
  47.         protected void Application_Error(object sender, EventArgs e)
  48.         {
  49.             /*如果在aspx页面中 throw new exception("error");
  50.                    HttpContext.Current.Server.GetLastError()获得异常信息，
  51.              *   然后用log4Net记录到错误处理机制中
  52.              */
  53.         }
  54.         //Session时间到后终止
  55.         protected void Session_End(object sender, EventArgs e)
  56.         {
  57.  
  58.         }
  59.         //程序结束的时候执行的代码（只执行一次）
  60.         protected void Application_End(object sender, EventArgs e)
  61.         {
  62.  
  63.         }
  64.     }
  65. }

9、URL重写

  1. SEO(Search Engine Optimization): 搜索引擎优化
  2. URL重写(URLRewrite 伪静态)：搜索引擎优化也方便用户看
  3. Site:cnblogs.com  能看百度收录了多少网页

！！！实现：当打开View-1.aspx、View-2.aspx重写，都是指向同一个页面

原理: 在Global.asax的Application_BeginRequest中读取请求的URL并使用HttpContext.Current.Rewrite()进行重写
　　Regex reg = new Regex(“.+View-(\d+).aspx”);
　　var m1 = reg.Match(HttpContext.Current.Request.Url.AbsolutePath);
　　if(macth.Success)
　　{
　　　　string id = match.Groups[1].Value;
　　　　HttpContext.Current.RewitePath(“View.aspx?id=” + id);
　　}

10、继续ajax

　　这个当然不用说大家都知道的一种就是ajax调后台的方法。
1、有参数的方法调用
示例代码如下：
前台jQuery代码：
$(function() {&nbsp;
 这个当然不用说大家都知道的一种就是ajax调后台的方法。
1、有参数的方法调用

示例代码如下：

前台jQuery代码：

$(function() {
  var browers = browersEstimate();
  var params = '{browersType:"' + browers + '"}';
  $.ajax({
      type: "POST",                   //提交方式
      url: "Default.aspx/RecordData",   //提交的页面/方法名
      data: params,                   //参数（如果没有参数：null）
      dataType: "json",                   //类型
      contentType: "application/json; charset=utf-8",     
      success: function(data) {     
              //返回的数据用data.d获取内容     
                alert(data.d);     
          },     
          error: function(err) {     
              alert(err);     
         });   
     });

这个是jquery下Ajax方法调用后台方法。

这个方法有几点需要说明：

type方式必须是post，再有就是后台的方法必须是静态的，方法声明要加上特性[System.Web.Services.WebMethod()]，传递的参数个数也应该和方法的参数相同。

asp.net后台方法：

[System.Web.Services.WebMethod()]
    public static void RecordData(string browersType)
    {
        if (BrowserControl.Counters == null)
        {
            BrowserControl.InitData(0);
        }

if (browersType == "")
        {
            browersType = "Other";
        }

BrowserControl.AddOneByBrowserType(browersType);
        if (BrowserControl.WriteInDataBase())
        {
            BrowserControl.OldTotalCount = BrowserControl.Counters.Count;
        }
        else
        {
            BrowserControl.OldTotalCount = 0;
        }
    }

2、无参数的方法调用

示例代码：

前台jQuery代码

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            //要用post方式     
            type: "Post",     
            //方法所在页面和方法名     
            url: "data.aspx/SayHello",     
            contentType: "application/json; charset=utf-8",     
            dataType: "json",     
            success: function(data) {     
                //返回的数据用data.d获取内容     
                alert(data.d);     
            },     
            error: function(err) {     
                alert(err);     
            }     
        });     
        //禁用按钮的提交     
        return false;     
    });     
});

asp.net后台方法

[System.Web.Services.WebMethod()]
public static string SayHello()     
{     
return "Hello Ajax!";     
}

3、返回数组方法的调用

示例代码：

asp.net 后台代码：

[System.Web.Services.WebMethod()]   
public static List GetArray()     
{     
  List li = new List();     
for (int i = 0; i < 10; i++)     
        li.Add(i + "");     
return li;     
}

前台JQuery代码：

/**/     
$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            type: "Post",     
            url: "data.aspx/GetArray",     
            contentType: "application/json; charset=utf-8",     
            dataType: "json",     
            success: function(data) {     
                //插入前先清空ul     
                $("#list").html("");     
                //递归获取数据     
                $(data.d).each(function() {     
                    //插入结果到li里面     
                    $("#list").append("" + this + "");     
                });     
                alert(data.d);     
            },     
            error: function(err) {     
                alert(err);     
            }     
        });     
        //禁用按钮的提交     
        return false;     
    });     
});

4、返回Hashtable方法的调用

using System.Collections;     
[System.Web.Services.WebMethod()]    
public static Hashtable GetHash(string key,string value)     
{     
    Hashtable hs = new Hashtable();
    hs.Add("www", "yahooooooo");     
    hs.Add(key, value);          
    return hs;     
}

前台JQuery代码：

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            type: "Post",     
            url: "data.aspx/GetHash",     
            //记得加双引号      
            data: "{ 'key': 'haha', 'value': '哈哈！' }",     
            contentType: "application/json; charset=utf-8",     
            dataType: "json",     
            success: function(data) {     
                alert("key: haha ==> "+data.d["haha"]+" key: www ==> "+data.d["www"]);     
            },     
            error: function(err) {     
                alert(err + "err");     
            }     
        });     
        //禁用按钮的提交     
        return false;     
    });     
});

5、操作xml

xnl文件示例：   
 <?xml version="1.0" encoding="utf-8" ?>    
<data>    
  <item>    
    <id>1</id>    
    <name>qwe</name>    
  </item>    
  <item>    
    <id>2</id>    
    <name>asd</name>    
  </item>    
</data>

Jquery代码：

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            url: "XMLtest.xml",     
            dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了     
            success: function(xml) {     
                //清空list     
                $("#list").html("");     
                //查找xml元素     
                $(xml).find("data>item").each(function() {

$("#list").append("id:" + $(this).find("id").text() +"");

$("#list").append("Name:"+ $(this).find("name").text() + "");     
                })     
            },     
            error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数     
                alert(status);     
            }     
        });     
        //禁用按钮的提交     
        return false;     
    });     
});

6、调后台的另外一种方法：

js代码示例：

function test() {
        var browers = browersEstimate();
       __doPostBack("CE_RecordData", browers);
   }

后台页面代码示例：

protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        if (this.IsPostBack)
        {
            if ((Request.Form["__EVENTTARGET"] != null) && (Request.Form["__EVENTTARGET"] != ""))
            {
                if (Request.Form["__EVENTTARGET"].Substring(0, 3) == "CE_")
                {
                    String strEventArgument = Request.Form["__EVENTARGUMENT"];
                    Type type = this.GetType();
                   
MethodInfo mi = type.GetMethod(Request.Form["__EVENTTARGET"],
BindingFlags.Instance | BindingFlags.NonPublic);
                    if (mi != null)
                    {
                        mi.Invoke(this, new object[] { strEventArgument });
                    }
                }
            }
        }
    }

protected void CE_RecordData(string browersType)
    {   -----你需要做的操作----- }

如上代码解释：主要是js代码里面的方法名要与后台一致，方法参数个数也要一致，最重要的是页面的OnLoad事件的重写。在这里面调用的父类的OnLoad事件，重要是利用反射获取要调用的方法，和传递过来的参数。

type.GetMethod(Request.Form["__EVENTTARGET"],
BindingFlags.Instance |
BindingFlags.NonPublic);这一句里面的参数设置不能变更。必须是实例Instance和不公开的方法。可以看到对应的
CE_RecordData方法是受保护的。

　

.NET运用AJAX 总结及其实例的更多相关文章

  1. Ajax实现异步操作实例_针对XML格式的请求数据

    js分类中有一节[原生js异步请求,XML解析]主要说明了js前台是如何处理XML格式请求和如何接受由服务器返回的XML数据的解析,今天我将用一个实例来说明具体要如何操作. 前台的参数类型也是XML使 ...

  2. jQuery ajax - getJSON() 用法实例

    实例 从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据: $.getJSON("test.js", function(json){ aler ...

  3. PHP 和 AJAX MySQL 数据库实例

    HTML 表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. php中ajax的使用实例讲解

    一.总结 1.多复习:代码都挺简单的,就是需要复习,要多看 2.ajax原理:ajax就是部分更新页面,其实还在的html页面监听到事件后,然后传给服务器进行操作,这里用的是get方式来传值到服务器, ...

  5. ajax工作原理/实例

    ajax是什么? 是一种创建交互式网页应用的一种网页技术.简单来说,就是向服务器发起请求,获得数据使交互性和用户体验更好. ajax不是一种新的技术,是一些技术的集合体.有 1.XHTML和CSS 2 ...

  6. Nodejs 之Ajax的一个实例（sql单条件查询&并显示在Browser端界面上）

    1.Broswer端的Ajax <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

  7. Ajax Post 类实例

    以前总是ajax请求是这样的 data:"a=1&b=2&c=3..." 而Controller也总是这样的 Action(int a,int b,int c) 很 ...

  8. JQuery处理json与ajax返回JSON实例

    一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...

  9. [Javascript,JSON] JQuery处理json与ajax返回JSON实例

    转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...

随机推荐

  1. NSBundle的pathForResource:ofType: 返回值为nil问题

    一.问题描述 在处理XML的过程中,在项目中手动创建名为“data.xml”的文件,加入网上找的内容 <?xml version="1.0" encoding="u ...

  2. OKhttp的封装（下）

    OKhttpManager2.Class  请求工具类 package com.example.administrator.okhttp3; import android.os.Handler; im ...

  3. IOS - AFN

    #import "ViewController.h"#import "AFNetworking.h"#import "SSZipArchive.h&q ...

  4. 项目差异class文件提取-->上线用

    package fileReader; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStre ...

  5. JS中级 - 01：DOM节点

    1元素属性   1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...

  6. git 使用技巧

    让git不检测文件权限 在android根目录执行:repo forall -c git config core.filemode false即可 修改默认编辑器: git config –globa ...

  7. php支付宝接口用法

    现在流行的网站支持平台,支付宝当仁不让的老大了,现在我们就来告诉你如何使用支付宝api来做第三方支付,把支付宝放到自己网站来, alipay_config.php配置程序如下: <?php */ ...

  8. Delphi管理多线程之线程局部存储：threadvar

    尽管多线程能够解决许多问题,但是同时它又给我们带来了很多的问题.其中主要的问题就是:对全局变量或句柄这样的全局资源如何访问?另外,当必须确保一个线程中的某些事件要在另一个线程中的其他时间之前(或之后) ...

  9. .NET 在浏览器中下载TXT文件

    通常我们用浏览器打开Txt文件时候,浏览器会直接打开,我们想要txt下载到本地该怎么操作,用js也可以,单不能兼容所有的浏览器,所以我们可以在服务端做处理,代码如下: //TXT文件生成页面 publ ...

  10. SQL数据字符串的拆分

    一.概述: MSSQL字符串的拆分没有封装太多常用的方式,所以如果向数据库中插入用特殊字符分割字符串(比如CB0$CB2$CB3,CB0$CB2$CB3)时就可能需要数据库能够分割字符串,SQL中拆分 ...