.NET运用AJAX 总结及其实例

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代码 
      
    
<!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" 3 head 4     title>AJAX01</ 5     script type="text/javascript" 6         function btnClick() {
           //alert(1);
            1 创建XMLHTTP对象，相当于WebClient
           var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP); 
           
           if (!xmlhttp) {
               alert(创建XMLhttp对象异常);
               return;
           }
           
            2 “准备”01AJAX.ashx发出Post请求。这里还没有发出请求
           XMLHTTP默认（也推荐）不是同步请求的，也就是open方法并不像WebClient的DownloadString
           那样把服务器返回的数据拿到才返回，
           是异步的，因此需要监听onreadystatechange事件


           xmlhttp.open(POST,01AJAX.ashx?id=" + encodeURI('AJAX服务器) + &ts= Date(),255)">false23             
           xmlhttp.onreadystatechange  () {
                (xmlhttp.readyState == 4) {readyState == 4 表示服务器返回数据了
                    (xmlhttp.status 200如果状态码为200则是成功
                       接收服务器的返回数据，没有用send的返回值，而是在onreadystatechange事件里来接收
                       document.getElementById(txtTime).value = xmlhttp.responseText; responseText属性为服务器返回的文本
                   }
                   else {
                       alert(AJAX服务器返回错误!32 33                 }
35             不要以为if(xmlhttp.readyState == 4) 在send之前执行！！！！
           if (xmlhttp.readyState == 4)只有在服务器返回值以后才会执行，而!!send之后过一会儿服务器才会返回数据
           xmlhttp.send(); 这时才开始发送请求
       }
   script40 41 body42     input ="text" id="txtTime" />
   ="button"="btn" value onclick="btnClick()" 44 45 html> 
      
    

ashx代码

using Sy stem; using System.Collections.Generic; using System.Linq; 4 using System.Web; 5 6 namespace AJAX 7 { 8 /// summary 9 /// _01AJAx 的摘要说明 10 /// 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 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&name="+"encodeURL('中国')",false)，如果传递给服务器的请求里有中文，则需要使用Javascript函数encodeURI来进行URL编码。

（3、发出请求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。只有在服务器返回值以后才会执

行，而!! send之后过一会儿服务器才会返回数据。

（4、 xmlhttp.open(" GET",false)，如果这样单纯滴传两个静态参数的话，浏览器可能会保持一

种提取缓存的状态，所以最好传一个动态参数，随意一个参数。这是一个AJAX缓冲存在的问题。如果用POST的方式，就不会发生缓冲的问题。

案例1：无刷新异步操作-->汇率转换

HTML代码

>02 huilv questionsrc="js/jquery-1.4.2.js" type></ 6     ="js/jquery-1.4.2-vsdoc.js" 7      8          btnOnclick() {
 moneyType  $(#selectedID).val();
10              account #myaccountalert(account);
12             alert(moneyType);
13             14             15 error from create xmlhttp!16                 17 18 02汇率问题.ashx?moneyType=&account=19 20                 ) {
21                     alert(xmlhttp.responseText);
22                     23                         alert(xmlhttp.responseText);
24                         $("#result").text = xmlhttp.responseText;
25                         $(#result).val(xmlhttp.responseText);
26 27             xmlhttp.send();
30 31 
32     33 34 35     id="myaccount" name="name"="" 36     select ="selectedID"37         option value="1" selected="selected">dollaroption38         ="2">Japan39         ="3">Hongkong40     select41     ="check"="btnOnclick()" =" "="result"43 >

ashx代码

/// _02汇率问题的摘要说明 public class _02汇率问题 : IHttpHandler //context.Response.Write("Hello World"); //get two accounts from html string moneyType = context.Request["moneyType"]; 20 int account = Convert.ToInt32(context.Request["account"]); if (moneyType == "1")//dollar context.Response.Write(account/7); else if(moneyType=="2")//Japan context.Response.Write(account*10); 29 30 else//Hongkong 31 32 context.Response.Write(account*10/9); 35 36 37 38 39 42 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对象

function CreateXmlHttp() 2 4 5 varxmlhttp; 6 //非IE浏览器创建XMLHttpRequest对象 8 if (window.XmlHttpRequest) 10 12 13 xmlhttp =new XmlHttpRequest(); 14 16 //IE浏览器创建XMLHttpRequest对象 18 if (window.ActiveXObject) 22 try 24 { 26 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 28 30 catch (e) 32 34 35 try 36 { 38 xmlhttp = new ActiveXObject("msxml2.XMLHTTP"); 40 42 catch (ex) {alert("AJAX创建失败！");} 44 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改进汇率兑换问题

btnOnclick_01() {just test,nothing 9 $.post(01AJAX.ashx (data,textSize) { 10 (textSize success11 alert(data); } 13 alert(AJAX create a error!!! }); 18 btnOnclick_02() { huilv question 20 03JQuery.ashxaccount: account,0)">moneyType: moneyType },128)">22 30 33 34 35 36 38 ="Just_test"="btnOnclick_01()" ="btnOnclick_02()"

4、练习

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

HTML代码

>search the price problem 8 $( $(#myinput).blur( name $.post(GetPrice.ashxname: name },istatus) { 12 (istatus 13 myArray data.split(|14 (myArray[0] ok $().val(myArray[1]); 16 } 17 else none alert(No Sale! } 20 error data! } AJAX error!s }); }); 28 31 ="myinput"ashx 代码

using AJAX.DAL.DataSet1TableAdapters; 8 9 /// 10 11 /// public class GetPrice : IHttpHandler string name = context.Request["name"]; 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 32 33 34 35 36 37 38 39 40 }

！！！遇到问题总结：

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

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

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

练习2：无刷新评论帖子

方法1：评论采用AJAX，但采用Repeater动态显示列表

HTML代码

ashx代码

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

ashx代码

总结：如果想要控制用户的评论，例如禁止用户输入粗话等不文明用语，可以在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实现类中数据的传递

ashx代码

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

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

ashx代码

分页的sql语句

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

aspx代码

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;
 System.Collections.Generic;
 System.Linq;
 System.Web;
 System.Web.Security;
 System.Web.SessionState;

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

        }
        调用Session信息开始
        void Session_Start(HttpContext.Current.Session.Abandon();结束Session
        }
        每次请求都会触发
        void Application_BeginRequest(通过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();
            }

        }

        void Application_AuthenticateRequest(程序发生异常的时候，就会被捕获，抛出异常(ASP.NET错误处理：错误页和Application_Error)
        void Application_Error(/*如果在aspx页面中 throw new exception("error");
                   HttpContext.Current.Server.GetLastError()获得异常信息，
             *   然后用log4Net记录到错误处理机制中
             */
        }
        Session时间到后终止
        void Session_End(程序结束的时候执行的代码（只执行一次）
        void Application_End( 
    
  

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

来源：http://www.cnblogs.com/daomul/archive/2013/04/29/3046449.html

.NET运用AJAX 总结及其实例

相关推荐