.NET运用AJAX 总结及其实例

最新推荐文章于 2024-07-05 11:41:32 发布

weixin_30735391

最新推荐文章于 2024-07-05 11:41:32 发布

阅读量50

点赞数

文章标签： json javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/lsgsanxiao/p/4747027.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一样，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据，这样页面就不会刷新了。XMLHTTPRequest是AJAX的核心对象。

2、 XMLHTTPRequest

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

 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" οnclick="btnClick()" /> 44 </body> 45 </html>

 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：无刷新异步操作-->汇率转换

 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" οnclick="btnOnclick()" /> 42 <input type="text" name="name" value=" " id="result"/> 43 </body> 44 </html>

 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()。为了兼容不同的浏览器需要编写很多代码，下面的兼容浏览器也不是很完整的：

 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：对前面的汇率问题进行修改简化

 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" οnclick="btnOnclick_01()" /> 40 <input type="button" name="name" value="check" οnclick="btnOnclick_02()" /> 41 <input type="text" name="name" value=" " id="result"/> 42 </body> 43 </html>

4、练习

练习1：JQuery实现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>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>

 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动态显示列表

<%@ 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>

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，完全静态操作

<!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>

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实现类中数据的传递

<!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>

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实现无刷新评论列表分页

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

<!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>

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实现无刷新删除评论

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

<%@ 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=""> <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="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="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="border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;"> <tr runat="server" style="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;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="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地址禁止

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重写

SEO(Search Engine Optimization): 搜索引擎优化
URL重写(URLRewrite 伪静态)：搜索引擎优化也方便用户看
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() { 
这个当然不用说大家都知道的一种就是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方法是受保护的。

转载于:https://www.cnblogs.com/lsgsanxiao/p/4747027.html

weixin_30735391

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
.NET运用AJAX 总结及其实例

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

扫一扫