今天下了一个.net Ajax开发包,该开发包包括ASP2.0和目前ASP1.1版使用的Ajax,接下来,开工。

1. 新建一个项目,在引用中添加引用Ajax.dll,Ajax.dll位于下载的压缩包里面。

  2.建立HttpHandler,在web.config里面加上

<configuration>
  <system.web>
    <httpHandlers>
    <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
    </httpHandlers>  
    ...
  <system.web>
</configuration>

  3.新建一个类DemoMethods,这个类实现获取客户端MAC地址:

using System;
using System.Web;namespace AjaxSample
{
 /// <summary>
 /// Summary description for Methods.
 /// </summary>
 public class DemoMethods
 {
  
  [Ajax.AjaxMethod]
  public string GetCustomerMac(string clientIP) //para IP is the client's IP 
  { 
   string mac = "";   System.Diagnostics.Process process = new System.Diagnostics.Process();
   process.StartInfo.FileName = "nbtstat";
   process.StartInfo.Arguments = "-a "+clientIP;
   process.StartInfo.UseShellExecute = false;
   process.StartInfo.CreateNoWindow = true;
   process.StartInfo.RedirectStandardOutput = true;
 
   process.Start();
 
   string output = process.StandardOutput.ReadToEnd();
   int length = output.IndexOf("MAC Address = ");   if(length>0)
   {
    mac = output.Substring(length+14, 17);
   }
 
   process.WaitForExit();
 
   return mac.Replace("-", "").Trim();
  }
 }}

  4.写javascript,新建一个名为default,js文件如下:

function GetMac()
{
 var clientIP="192.168.0.1";
 document.getElementById("Mac").value=DemoMethods.GetCustomerMac(clientIP).value
 alert(DemoMethods.GetCustomerMac(clientIP).value);
}

  5.在某个Aspx页面放上一个html 的button

  在页面上<head>中引用default.js :   <script language="javascript" src="default.js"></script>

  在INPUT的onclick事件中加上onclick="javascript:GetMac()"

<INPUT style="Z-INDEX: 101; LEFT: 392px; POSITION: absolute; TOP: 176px" type="button"
    value="客户端获取IP" onclick="javascript:GetMac();">  6.修改Global.asax的Application_Start事件,设置Ajax的HandlerPath :
protected void Application_Start(Object sender, EventArgs e)
  {
     Ajax.Utility.HandlerPath = "ajax";
  }

      运行看看效果。是不是没有刷新就在服务器端取到客户端的MAC地址??

      需要注意的是:该版本的.net Ajax需要手工在中Global.asax加上Ajax.Utility.HandlerPath = "ajax"; 配置文件web.config必须加上HttpHandler的配置信息!

问题

As we 都知道,所谓基于AJAX的“无刷新应用”,一般就是指WEB应用中利用XmlHttp组件来实现一定的基于JavaScript后台异步数据传递的无刷新页面切换,以代替传统的基于HTML链接的“有刷新”页面切换。

这样的无刷新效果真的很酷,但是爱思考的开发者尝试一些时间之后就会发现一个最大的问题:我既然是无刷新了,那么对于一组无刷新的功能来说,也就是从打开网页起,所有的效果都是在当前页面的后台通过JavaScript异步调用XmlHttp来传递数据并替换当前页中的显示内容,没有传统的“有刷新”页面切换。但是,如果在某个状态,因为网络问题页面暂停载入了需要手动刷新,或者,用户想手动刷新一下当前页面获取更新的数据,或者哪怕是不小心按了一下“F5”或浏览器上的Refresh按钮会怎样呢?对了,这就是本文的标题提出的担心。如果没有特殊处理,那么,手动刷新页面过后,网页上的内容自然就回到最初的显示的内容,而不是手动刷新之前我们真正想要的数据了。是不是心中突然又一口闷气呢?:)大可不必~~

分析

对于以上问题,当然是有解决办法的!如著名的AJAX应用网站http://www.backbase.com/就是一个很好的范例,大家可以亲自体验,无论在哪个页面手动刷新,都不会发生我们前面担心的问题~~发现没有呢?发现其中的玄机没?对了,就是“#”!!我们可以看到,每一次无刷新的页面切换之后,浏览器地址栏的内容都会改变,变成了什么呢?改变的内容都是在相同的网址(对于BackBase,自然都是http://www.backbase.com/这个首页了)之后,加上了#xxxx,这是什么呢?熟悉HTML的读者该想起来了,什么时候会出现这个“#”呢?对了,就是对我们来说最可爱最熟悉的,我们的万维网超链接的的鼻祖“<a>”。

不知道还有多少读者记得“#”原本的用处,那就是当前页面的内部定位功能。忘记了的朋友可以试试将下面的HTML建一个test.html,看看简单的效果。

<a name="top">top</a>
<a href="#bottom">go to bottom</a>
<div style="height:800px"> </div>
<a name="middle">middle</a>
<a href="javascript:var tmp = document.location = 'test.html#top'">go to top</a>
<div style="height:800px"> </div>
<a name="bottom">bottom</a>
<a href="test.html#middle">go to middle</a>

如果href中指定的“#”后的内name在指定页中没有定义,浏览器则简单的定位到指定页的页首。除了以一个链接的形式来调转之外,也可以通过修改document.location = ‘test.html#top’ 这样的方式来重订向。凡是这样跳转的页面,因为实际上还是在当前页面内,因此,网页是不会有物理刷新的。OK,这就是我们实现“可刷新的无刷新应用”的方案。

模式

作为一个设计模式,基于#链接的“可刷新的无刷新应用”的方案对于任意的AJAX框架,或者直接使用未经封装的XmlHttp都是同等适用的。这就要求我们在执行任意一个AJAX回调时,注意利用#标签改变当前页的url地址,那么,当用户刷新页面时,由于url中#后的参数不同,就可以在刷新时通过解析和判断当前的#后的参数来获得“可刷新的无刷新”效果。