.NET运用AJAX 总结及其实例

简介: 原文 http://www.cnblogs.com/daomul/archive/2013/04/29/3046449.html 1、AJAX简介      (1、没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间。

原文 http://www.cnblogs.com/daomul/archive/2013/04/29/3046449.html

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一样,在页面中 XMLHTTP Request 来发出 Http 请求和获得服务器的返回数据,这样页面就不会刷新了。 XMLHTTPRequest是AJAX的核心对象
 
2、  XMLHTTPRequest

    (1、开发一个AJAX功能需要 开发服务端和客户端两 块程序。以一个显示服务端时间为例。首先开发一个GetDate1.ashx,输出当前时间。在HTML页面中放一个按 钮,在按钮的onclick中创建XMLHTTP向GetDate1.ashx发送请求,获得返回的数据并且显示到界面上。下面的代码非常重要,是精华来 着,必背:
javascript代码
复制代码
 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>AJAX01</title>
 5     <script type="text/javascript">
 6         function btnClick() {
 7             //alert(1);
 8             // 1 创建XMLHTTP对象,相当于WebClient
 9             var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
10             
11             if (!xmlhttp) {
12                 alert("创建xmlhttp对象异常");
13                 return;
14             }
15             
16             // 2 “准备”01AJAX.ashx发出Post请求。这里还没有发出请求
17             //XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不像WebClient的DownloadString
18             //那样把服务器返回的数据拿到才返回,
19             //是异步的,因此需要监听onreadystatechange事件
20 
21 
22             xmlhttp.open("POST", "01AJAX.ashx?id=" + encodeURI('AJAX服务器') + "&ts=" + new Date(), false);
23             
24             xmlhttp.onreadystatechange = function () {
25                 if (xmlhttp.readyState == 4) {//readyState == 4 表示服务器返回数据了
26                     if (xmlhttp.status == 200) {//如果状态码为200则是成功
27                         //接收服务器的返回数据,没有用send的返回值,而是在onreadystatechange事件里来接收
28                         document.getElementById("txtTime").value = xmlhttp.responseText; //responseText属性为服务器返回的文本
29                     }
30                     else {
31                         alert("AJAX服务器返回错误!");
32                     }
33                 }
34             }
35             //不要以为if(xmlhttp.readyState == 4) 在send之前执行!!!!
36             //if (xmlhttp.readyState == 4)只有在服务器返回值以后才会执行,而!!send之后过一会儿服务器才会返回数据
37             xmlhttp.send(); //这时才开始发送请求
38         }
39     </script>
40 </head>
41 <body>
42     <input type="text" id="txtTime" />
43     <input type="button" id="btn" value="button" onclick="btnClick()" />
44 </body>
45 </html>
复制代码
ashx代码
复制代码
 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace AJAX
 7 {
 8     /// <summary>
 9     /// _01AJAx 的摘要说明
10     /// </summary>
11     public class _01AJAx : IHttpHandler
12     {
13 
14         public void ProcessRequest(HttpContext context)
15         {
16             context.Response.ContentType = "text/plain";
17             string id = context.Request["id"];
18             context.Response.Write(DateTime.Now.ToString()+"---"+id);
19         }
20 
21         public bool IsReusable
22         {
23             get
24             {
25                 return false;
26             }
27         }
28     }
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:无刷新异步操作-->汇率转换
html代码
复制代码
 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>02 huilv question</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 btnOnclick() {
 9             var moneyType = $("#selectedID").val();
10             var account = $("#myaccount").val();
11             //alert(account);
12             //alert(moneyType);
13             var xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");
14             if (!xmlhttp) {
15                 alert("error from create xmlhttp!");
16                 return;
17             }
18             xmlhttp.open("POST", "02" + encodeURI('汇率问题') + ".ashx?moneyType=" + moneyType + "&account=" + account + "&ts=" + new Date(), false);
19             xmlhttp.onreadystatechange = function () {
20                 if (xmlhttp.readyState == 4) {
21                     alert(xmlhttp.responseText);
22                     if (xmlhttp.status == 200) {
23                         alert(xmlhttp.responseText);
24                         //$("#result").text = xmlhttp.responseText;
25                         $("#result").val(xmlhttp.responseText);
26                     }
27                 }
28             }
29             xmlhttp.send();
30         }
31 
32     </script>
33 </head>
34 <body>
35     <input id="myaccount" type="text" name="name" value="" />
36     <select id="selectedID">
37         <option value="1" selected="selected">dollar</option>
38         <option value="2">Japan</option>
39         <option value="3">Hongkong</option>
40     </select>
41     <input type="button" name="name" value="check" onclick="btnOnclick()" />
42     <input type="text" name="name" value=" " id="result"/>
43 </body>
44 </html>
复制代码
ashx代码
复制代码
 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace AJAX
 7 {
 8     /// <summary>
 9     /// _02汇率问题 的摘要说明
10     /// </summary>
11     public class _02汇率问题 : IHttpHandler
12     {
13 
14         public void ProcessRequest(HttpContext context)
15         {
16             context.Response.ContentType = "text/plain";
17             //context.Response.Write("Hello World");
18             //get two accounts from html
19             string moneyType = context.Request["moneyType"];
20             int account = Convert.ToInt32(context.Request["account"]);
21 
22             if (moneyType == "1")//dollar
23             {
24                 context.Response.Write(account/7);
25             }
26             else if(moneyType=="2")//Japan
27             {
28                 context.Response.Write(account*10);
29             }
30             else//Hongkong
31             {
32                 context.Response.Write(account*10/9);
33             }
34         }
35 
36         public bool IsReusable
37         {
38             get
39             {
40                 return false;
41             }
42         }
43     }
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()。为了兼容不同的浏览 器需要编写很多代码,下面的兼容浏览器也不是很完整的:
  
兼容不同浏览器的XMLhttpresquest对象
复制代码
 1 function CreateXmlHttp()
 2 
 3         {
 4 
 5             varxmlhttp;
 6 
 7             //非IE浏览器创建XmlHttpRequest对象
 8 
 9             if (window.XmlHttpRequest)
10 
11             {
12 
13                 xmlhttp =new XmlHttpRequest();
14 
15             }
16 
17             //IE浏览器创建XmlHttpRequest对象
18 
19             if (window.ActiveXObject)
20 
21             {
22 
23                 try
24 
25                 {
26 
27                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
28 
29                 }
30 
31                 catch (e)
32 
33                 {
34 
35                     try
36 
37                     {
38 
39                         xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
40 
41                     }
42 
43                     catch (ex) {alert("AJAX创建失败!");}
44 
45                 }
46 
47             }
48 
49             return xmlhttp;
50 
51         }
复制代码

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

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

JQuery改进汇率兑换问题
复制代码
 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>02 huilv question</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 btnOnclick_01() {//just test ,nothing
 9             $.post("01AJAX.ashx", function (data, textSize) {
10                 if (textSize == "success") {
11                     alert(data);
12                 } else {
13                     alert("AJAX create a error!!!");
14                 }
15             });
16 
17         }
18         function btnOnclick_02() {// huilv question
19             var account = $("#myaccount").val();
20             var moneyType = $("#selectedID").val();
21             $.post("03JQuery" + encodeURI('汇率问题') + ".ashx", { "account": account, "moneyType": moneyType }, function (data, textSize) {
22                 if (textSize == "success") {
23                     alert(data);
24                 } else {
25                     alert("AJAX create a error!!!");
26                 }
27             });
28 
29         }
30     </script>
31 </head>
32 <body>
33     <input id="myaccount" type="text" name="name" value="" />
34     <select id="selectedID">
35         <option value="1" selected="selected">dollar</option>
36         <option value="2">Japan</option>
37         <option value="3">Hongkong</option>
38     </select>
39     <input type="button" name="name" value="Just_test" onclick="btnOnclick_01()" />
40     <input type="button" name="name" value="check" onclick="btnOnclick_02()" />
41     <input type="text" name="name" value=" " id="result"/>
42 </body>
43 </html>
复制代码

 4、练习

 练习1:JQuery实现Ajax 根据商品名称自动显示价格
html代码
复制代码
 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>search the price problem</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             $("#myinput").blur(function () {
10                 var name = $("#myinput").val();
11                 $.post("GetPrice.ashx", { "name": name }, function (data, istatus) {
12                     if (istatus == "success") {
13                         var myArray = data.split("|");
14                         if (myArray[0] == "ok") {
15                             $("#result").val(myArray[1]);
16                         }
17                         else if (myArray[0] == "none") {
18                             alert("No Sale!");
19                         } else {
20                             alert("error data!");
21                         }
22                     } else {
23                         alert("AJAX error!s");
24                     }
25                 });
26             });
27         });
28     </script>
29 </head>
30 <body>
31     <input id="myinput" type="text" name="name" value="" />
32     <input type="text" name="name" value=" " id="result"/>
33 </body>
34 </html>
复制代码
ashx代码
复制代码
 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     /// _02汇率问题 的摘要说明
11     /// </summary>
12     public class GetPrice : IHttpHandler
13     {
14 
15         public void ProcessRequest(HttpContext context)
16         {
17             context.Response.ContentType = "text/plain";
18             //context.Response.Write("Hello World");
19             string name = context.Request["name"];
20             var data = new buyTableAdapter().GetDataByName(name);
21             if(data.Count<=0)
22             {
23                 context.Response.Write("none|0");
24             }
25             else
26             {
27                 context.Response.Write("ok|"+data.Single().Price);
28             }
29             //context.Response.Write("happy");
30         }
31 
32         public bool IsReusable
33         {
34             get
35             {
36                 return false;
37             }
38         }
39     }
40 }
复制代码

!!!遇到问题总结:

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

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

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

 练习2:无刷新评论帖子
    方法1:评论采用AJAX,但采用Repeater动态显示列表
html代码
复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ReviewByRepeater.aspx.cs" Inherits="AJAX.ReviewByRepeater1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#Button1").click(function () {
                var msg = $("#TextArea1").val();
                $.post("ReviewByRepeater.ashx", { "msg": msg }, function (data, istaus) {
                    if (istaus != "success") {
                        alert("failed!");
                        return;
                    }
                    if (data == "ok") {
                        var newComment = $("<li>PostDate:" + new Date() + "IP:me,内容:" + msg + "</li>");
                        $("#ulCommentId").append(newComment);
                        alert("success!");
                    }
                    else {
                        alert("error!");
                    }
                });
            });
        });
    </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.DAL.DataSet1TableAdapters.T_PostsTableAdapter" 
            UpdateMethod="Update">
            <DeleteParameters>
                <asp:Parameter Name="Original_ID" Type="Int64" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="IPAdrr" Type="String" />
                <asp:Parameter Name="Msg" Type="String" />
                <asp:Parameter Name="PostDate" Type="DateTime" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="IPAdrr" Type="String" />
                <asp:Parameter Name="Msg" Type="String" />
                <asp:Parameter Name="PostDate" Type="DateTime" />
                <asp:Parameter Name="Original_ID" Type="Int64" />
            </UpdateParameters>
        </asp:ObjectDataSource>
        <ul id="ulCommentId">
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
            <ItemTemplate><li>Posdate:<%#Eval("PostDate") %>,IP:<%#Eval("IPAdrr") %>,内容:<%#Eval("Msg") %></li></ItemTemplate>
        </asp:Repeater>
        </ul>
        <br />
        <textarea id="TextArea1" cols="20" rows="2"></textarea>
        <input id="Button1" type="button" value="button" />
    </div>
    </form>
</body>
</html>
复制代码
ashx代码
复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using AJAX.DAL.DataSet1TableAdapters;

namespace AJAX
{
    /// <summary>
    /// ReviewByRepeater 的摘要说明
    /// </summary>
    public class ReviewByRepeater : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string msg = context.Request["msg"];
            new T_PostsTableAdapter().Insert(context.Request.UserHostAddress,msg,DateTime.Now);
            context.Response.Write("ok");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
复制代码

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

html代码
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.post("ReviewByAjax.ashx", function (data, istaus) {
                alert(data);
                //alert(istaus);
                if (istaus != "success") {
                    $("#bodyComment").append($("<li>加载失败</li>"));
                }
                var mydata = data.split("$");
                for (var i = 0; i < mydata.length; i++) {
                    var rowdata = mydata[i].split("|");
                    var comment = $("<li> IP:" + rowdata[0] + ",PostDate:" + rowdata[1]
                        + ",内容:" + rowdata[2]+"</li>");
                    $("#bodyComment").append(comment);
                }
            });
        });
    </script>
</head>
<body id="bodyComment">

</body>
</html>
复制代码
ashx代码
复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using AJAX.DAL.DataSet1TableAdapters;
using System.Text;

namespace AJAX
{
    /// <summary>
    /// ReviewByAjax1 的摘要说明
    /// </summary>
    public class ReviewByAjax : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            var comments = new T_PostsTableAdapter().GetData();
            StringBuilder sb = new StringBuilder();
            foreach (var comment in comments)
            {
                sb.Append(comment.IPAdrr).Append("|").Append(comment.PostDate)
                    .Append("|").Append(comment.Msg).Append("$");
            } 
            context.Response.Write(sb.ToString().Trim('$'));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
复制代码

 总结:如果想要控制用户的评论,例如禁止用户输入粗话等不文明用语,可以在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实现类中数据的传递
html代码
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.post("JsonText01.ashx", function (data, istaus) {
                var post = $.parseJSON(data);
                
                /*例子测试 1 */
                //alert(post.PostDate);
                /*例子测试 2 */
                //alert(post[0]);
                /*例子测试 3 */
                alert(post[1].PostDate);
            });
        });
    </script>
</head>
<body id="bodyComment">

</body>
</html>
复制代码
ashx代码
复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace AJAX
{
    /// <summary>
    /// JsonText01 的摘要说明
    /// </summary>
    public class JsonText01 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            JavaScriptSerializer jss=new JavaScriptSerializer();
            
            /*测试用例1
            string myJson = jss.Serialize(new Post() { PostDate = "2012-09-10",Msg="send new Mag!" });
            context.Response.Write(myJson);*/

            /*测试用例2
            string myJson = jss.Serialize(new string[] {"2012-09-10", "send new Mag!" });
            context.Response.Write(myJson);*/

            /*测试用例3*/
            Post[] posts = new Post[]
                               {
                                   new Post() {PostDate = "2012-09-10", Msg = "send old Mag!"},
                                   new Post() {PostDate = "2013-01-12", Msg = "send new Mag!"}
                               };
            string myJson = jss.Serialize(posts);
            context.Response.Write(myJson);
        }
        //q1:
        //JavaScriptSerializer要引用using System.Web.Script.Serialization;

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    public class Post
    {
        public string PostDate { set; get; }
        public string Msg { get; set; }
    }
}
复制代码

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

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

ashx代码
复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using AJAX.DAL.DataSet1TableAdapters;
//高效分页
namespace AJAX
{
    /// <summary>
    /// JsonText02 的摘要说明
    /// </summary>
    public class JsonText02 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string action = context.Request["action"];

            if (action == "getpagecount")  //如果请求的参数是getpagecount(获取页数)
            {
                var adapter = new T_PostsTableAdapter();
                int count = adapter.ScalarQuery().Value;  //获取数据总条数
                int pageCount = count / 10;   //每页只显示10条

                if (count % 10 != 0)    //如果数据不够10条,则只显示第一页
                {
                    pageCount++;
                }
                context.Response.Write(pageCount);   //返回页数
            }
            else if (action == "getpagedata")   //如果请求的的参数是getpagedata(获取评论内容)
            {
                string pagenum = context.Request["pagenum"];   //获取客户端点击的是哪一页
                int iPageNum = Convert.ToInt32(pagenum);
                var adapter = new T_PostsTableAdapter();
                // (iPageNum-1)*10+1  第一条数据,(iPageNum)*10 最后一条数据;
                var data = adapter.GetPageData((iPageNum - 1) * 10 + 1, (iPageNum) * 10);

                List<Comment> list = new List<Comment>();   //由于数据过于复杂所引发异常,定义一个Comment的类,内有postDate,comment两个属性;
                foreach (var row in data)   //遍历data
                {
                    list.Add(new Comment()
                    {
                        PostDate = row.PostDate.ToShortDateString(),
                        Msg = row.Msg,
                        IPAdrr = row.IPAdrr
                    });
                }
                JavaScriptSerializer jss = new JavaScriptSerializer();
                context.Response.Write(jss.Serialize(list));  //返回序列化的数据;
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    public class Comment
    {
        public string PostDate { get; set; }
        public string Msg { get; set; }
        public string IPAdrr { get; set; }
    }
}
复制代码
html代码
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <style type="text/css">
        ul
        {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        li
        {
            border-bottom: 1px dashed #000;
            padding: 5px;
            font-family: "微软雅黑";
            font-size: 12px;
        }
        .column
        {
            width: 80%;
            margin: 100px auto;
            padding: 10px;
            border: 1px solid #000;
        }
        p
        {
            background: #CCC;
            padding: 10px;
        }
        .divstyle
        {
            min-height: 50px;
            padding: 10px;
        }
        .trPage
        {
        }
    </style>
    <script type="text/javascript" language="javascript">
        $(function () {
            //请求默认显示第一页数据
            $.post("JsonText02.ashx", { "action": "getpagedata", "pagenum": "1" }, function (data, status) {
                alert(1);
                if (status == "success") {
                    var comments = $.parseJSON(data);
                    $("#ulComments li").remove();   //首先清空上一次的数据;
                    for (var i = 0; i < comments.length; i++) {
                        var comment = comments[i];
                        var li = $("<li><p>回复日期:" + comment.PostDate + "&nbsp;&nbsp;&nbsp;&nbsp;回复IP地址:" + comment.IPAdrr + "</p><div class='divstyle'>" + comment.Msg + "</div></li>");

                        $("#ulComments").append(li);
                    }
                }
            });
            $.post("JsonText02.ashx", { "action": "getpagecount" }, function (data, status) {
                for (var i = 1; i <= data; i++) {
                    var td = $("<td><a href=''>" + i + "</a></td>");
                    $(".trPage").append(td);
                }

                //给链接添加click事件
                $(".trPage td").click(function (e) {
                    e.preventDefault();

                    $.post("JsonText02.ashx", { "action": "getpagedata", "pagenum": $(this).text() }, function (data, status) {
                        var comments = $.parseJSON(data);  //使用JSON序列化数据;
                        $("#ulComments li").remove();   //首先清空上一次的数据;

                        for (var i = 0; i < comments.length; i++) {   //遍历响应的数据data
                            var comment = comments[i];   //取到每条评论

                            //最后向ul中加载li(数据的内容)
                            var li = $("<li><p>回复日期:" + comment.PostDate + "&nbsp;&nbsp;&nbsp;&nbsp;回复IP地址:" + comment.IPAdrr + "</p><div class='divstyle'>" + comment.Msg + "</div></li>");
                            $("#ulComments").append(li);
                        }
                    });
                });
            });
        });
    </script>
</head>
<body>
    <div class="column">
        <table>
            <tr class="trPage">
            </tr>
        </table>
        <ul id="ulComments">
        </ul>
        <table>
            <tr class="trPage">
            </tr>
        </table>
    </div>
</body>
</html>
复制代码
分页的SQl语句
select * from
(
  SELECT ID, PostDate, Msg,IPAdrr,Row_Number() over(order by PostDate desc) rownum 
FROM dbo.T_Posts
)t 
where t.rownum>=@startRowIndex and t.rownum<=@endRowIndex

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

ashx代码
复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using AJAX.DAL.DataSet1TableAdapters;

namespace AJAX
{
    /// <summary>
    /// JsonDelete03 的摘要说明
    /// </summary>
    public class JsonDelete03 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string id = context.Request["ID"];
            new T_PostsTableAdapter().DeleteById(Convert.ToInt32(id));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
复制代码
aspx代码
复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonDelete03.aspx.cs" Inherits="AJAX.JsonDelete031" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[isDelete=true]").click(function () {
                var myID = $(this).attr("id");
                $.post("JsonDelete03.ashx", { "ID": myID }, function (data, istaus) {
                    if (istaus == "success") {
                        alert("删除成功!");
                        //在这里,$(this)指的不是控件本身而是这个位置
                        $("input[id=" + myID + "]").parent().parent().remove("tr");
                    }
                    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.DAL.DataSet1TableAdapters.T_PostsTableAdapter" UpdateMethod="Update">
            <DeleteParameters>
                <asp:Parameter Name="Original_ID" Type="Int64" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="IPAdrr" Type="String" />
                <asp:Parameter Name="Msg" Type="String" />
                <asp:Parameter Name="PostDate" Type="DateTime" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="IPAdrr" Type="String" />
                <asp:Parameter Name="Msg" Type="String" />
                <asp:Parameter Name="PostDate" Type="DateTime" />
                <asp:Parameter Name="Original_ID" Type="Int64" />
            </UpdateParameters>
        </asp:ObjectDataSource>
    </div>
    <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="ObjectDataSource1"
        InsertItemPosition="LastItem">
        
        <edititemtemplate>
            <tr style="background-color: #999999;">
                <td>
                    <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
                    <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
                </td>
                <td>
                    <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
                </td>
                <td>
                    <asp:TextBox ID="IPAdrrTextBox" runat="server" Text='<%# Bind("IPAdrr") %>' />
                </td>
                <td>
                    <asp:TextBox ID="MsgTextBox" runat="server" Text='<%# Bind("Msg") %>' />
                </td>
                <td>
                    <asp:TextBox ID="PostDateTextBox" runat="server" 
                        Text='<%# Bind("PostDate") %>' />
                </td>
            </tr>
        </edititemtemplate>
        <emptydatatemplate>
            <table runat="server" 
                style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                <tr>
                    <td>
                        未返回数据。</td>
                </tr>
            </table>
        </emptydatatemplate>
        <insertitemtemplate>
            <tr style="">
                <td>
                    <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
                    <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
                </td>
                <td>
                    &nbsp;</td>
                <td>
                    <asp:TextBox ID="IPAdrrTextBox" runat="server" Text='<%# Bind("IPAdrr") %>' />
                </td>
                <td>
                    <asp:TextBox ID="MsgTextBox" runat="server" Text='<%# Bind("Msg") %>' />
                </td>
                <td>
                    <asp:TextBox ID="PostDateTextBox" runat="server" 
                        Text='<%# Bind("PostDate") %>' />
                </td>
            </tr>
        </insertitemtemplate>
        <itemtemplate>
            <tr style="background-color: #E0FFFF;color: #333333;">
                <td>
                    <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
                    <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
                <input type="button" isDelete="true" id='<%# Eval("ID") %>' value=" 无刷新删除" />
                </td>
                <td>
                    <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
                </td>
                <td>
                    <asp:Label ID="IPAdrrLabel" runat="server" Text='<%# Eval("IPAdrr") %>' />
                </td>
                <td>
                    <asp:Label ID="MsgLabel" runat="server" Text='<%# Eval("Msg") %>' />
                </td>
                <td>
                    <asp:Label ID="PostDateLabel" runat="server" Text='<%# Eval("PostDate") %>' />
                </td>
            </tr>
        </itemtemplate>
        <layouttemplate>
            <table runat="server">
                <tr runat="server">
                    <td runat="server">
                        <table ID="itemPlaceholderContainer" runat="server" border="1" 
                            style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                            <tr runat="server" style="background-color: #E0FFFF;color: #333333;">
                                <th runat="server">
                                </th>
                                <th runat="server">
                                    ID</th>
                                <th runat="server">
                                    IPAdrr</th>
                                <th runat="server">
                                    Msg</th>
                                <th runat="server">
                                    PostDate</th>
                            </tr>
                            <tr ID="itemPlaceholder" runat="server">
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr runat="server">
                    <td runat="server" 
                        style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
                        <asp:DataPager ID="DataPager1" runat="server">
                            <Fields>
                                <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
                                    ShowLastPageButton="True" />
                            </Fields>
                        </asp:DataPager>
                    </td>
                </tr>
            </table>
        </layouttemplate>
        <selecteditemtemplate>
            <tr style="background-color: #E2DED6;font-weight: bold;color: #333333;">
                <td>
                    <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
                    <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
                </td>
                <td>
                    <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
                </td>
                <td>
                    <asp:Label ID="IPAdrrLabel" runat="server" Text='<%# Eval("IPAdrr") %>' />
                </td>
                <td>
                    <asp:Label ID="MsgLabel" runat="server" Text='<%# Eval("Msg") %>' />
                </td>
                <td>
                    <asp:Label ID="PostDateLabel" runat="server" Text='<%# Eval("PostDate") %>' />
                </td>
            </tr>
        </selecteditemtemplate>
    </asp:ListView>
    </form>
</body>
</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地址禁止

Global.asax
复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;

namespace AJAX
{
    public class Global : System.Web.HttpApplication
    {
        //程序启动的时候执行的代码
        protected void Application_Start(object sender, EventArgs e)
        {

        }
        //调用Session信息开始
        protected void Session_Start(object sender, EventArgs e)
        {
            //HttpContext.Current.Session.Abandon();//结束Session
        }
        //每次请求都会触发
        protected void Application_BeginRequest(object sender, EventArgs e)
        {
            //通过HttpContext.Current.Request.Url查看来源
            //用途1:可以在这里屏蔽IP地址
            if(HttpContext.Current.Request.UserHostAddress=="127.0.0.1")
            {
                HttpContext.Current.Response.Write("已屏蔽,请联系管理员");
                HttpContext.Current.Response.End();
            }
            //用途2:防盗链
            if(HttpContext.Current.Request.Url.AbsolutePath.EndsWith("/JPG")&& HttpContext.Current.Request.UrlReferrer.Host!="localhost")
            {
                //localhost:如果是正式上线则是域名地址
                HttpContext.Current.Response.WriteFile(HttpContext.Current.Server.MapPath("~/DSCF0802.JPG"));
                HttpContext.Current.Response.End();
            }

        }

        protected void Application_AuthenticateRequest(object sender, EventArgs e)
        {

        }
        //程序发生异常的时候,就会被捕获,抛出异常(ASP.NET错误处理:错误页和Application_Error)
        protected void Application_Error(object sender, EventArgs e)
        {
            /*如果在aspx页面中 throw new exception("error");
                   HttpContext.Current.Server.GetLastError()获得异常信息,
             *   然后用log4Net记录到错误处理机制中
             */
        }
        //Session时间到后终止
        protected void Session_End(object sender, EventArgs e)
        {

        }
        //程序结束的时候执行的代码(只执行一次)
        protected void Application_End(object sender, EventArgs e)
        {

        }
    }
}
复制代码

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);
  }

 

 

 

目录
相关文章
|
7月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
55 1
|
7月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
113 0
|
7月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
328 2
|
7月前
|
JSON 前端开发 JavaScript
介绍几个常见的 AJAX 实例,帮助你更好地理解和运用 AJAX 技术
介绍几个常见的 AJAX 实例,帮助你更好地理解和运用 AJAX 技术
106 2
|
7月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
96 0
|
开发框架 .NET API
Hangfire .NET任务调度框架实例
# 1、介绍 Hangfire是一个开源的.NET任务调度框架,提供了内置集成化的控制台(后台任务调度面板),可以直观明了的查看作业调度情况。 # 2、Nuget安装 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231031-119e3068.png?x-cos-security-token=baeOYKJ0BOuKXaDG6L8qKX7pdH823CLaaefd8181d9b33eccf4b2a2f35cd15dd7jLbyf
98 0
Hangfire .NET任务调度框架实例
|
开发框架 前端开发 .NET
用ajax和asp.net实现智能搜索功能
用ajax和asp.net实现智能搜索功能
80 0
|
调度
Quartz.NET 任务调度框架的demo实例
​ # 1、新建项目 简单实例,新建一个控制台程序 # 2、Nuget安装Quartz ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231031-52d48c93.png?x-cos-security-token=baeOYKJ0BOuKXaDG6L8qKX7pdH823CLa740df95695ddd90763a204f7cd7172afjLbyfjQS2rqYm0waz5Rlsx3p2jhWg-yj9JZ3WKDq32bpX
66 0
解决.NET Core Ajax请求后台传送参数过大请求失败问题
解决.NET Core Ajax请求后台传送参数过大请求失败问题
|
开发框架 前端开发 JavaScript
【Asp.net】 Ajax小例子
【Asp.net】 Ajax小例子
105 0