慕容星空小站

     摘要: 最近因为项目需要，研究了一下邮件的发送和接收，发现现在这方面的问题很多.虽然网上这方面的资料很多，但是真正应用起来仍然会发现不少问题，而且很多人都抱怨书上或者网上的一些代码应用起来是失败的，并且针对附件方面的处理不太完善，针对这种情况我把最近研究所得做一个小小的总结，希望能对大家有所帮助。 首先来谈谈发送邮件的问题。 发送邮件现在应用得最多的两种情况就是利用.NET自带的发送邮件和利用jmai...  阅读全文

     摘要: 泛型1、 什么是泛型？　泛型允许你在编译时间实现类型安全。它们允许你创建一个数据结构而不限于特定的数据类型。即通过参数化类型来实现在同一份代码上操作多种数据类型。泛型编程是一种编程范式，它利用“参数化类型”将类型抽象化，从而实现更为灵活的复用。之所以我们称它为泛型，是因为我们在定义的时候，只为它所包含的对象指派了一个类型占位符，而不是将它定义为确定的类型，只有在创建该集合的实例时，才会给它指派一个...  阅读全文

 

     最近老总提了一个小功能，在搜索网吧列表的时候加上网吧所属代理商这个条件，原有的搜索条件是一个地区二级联动，现在需要根据不同的地区显示不同的代理商集合。
即在触发地区下拉框的onchange事件时，代理商的下拉框选项也相应的改变，比如选择地区 湖南—〉长沙，那么代理商下拉框只显示长沙的代理商。
    本来认为这个很好实现，但实际改起来的时候发现问题多多，主要问题是原有的地区联动是用js实现的，它的数据源是一个xml文件，当然如果下拉框是服务器端控件那么问题是很好解决的，现在是html控件一下子似乎还真有些不好改，想了几种办法实现起来都不理想，最后将思路转向用ajax来实现问题才迎刃而解，现在仔细一想，像这种情况似乎只有用ajax才能比较好的解决，如果是在地区下拉框的onchange事件里向后台进行一次提交，将地区下拉框的id传过去的话，实际上产生的回发会将地区联动下拉框重新初始化。
    现在我具体谈谈这个ajax实现的过程。
    首先页面当然需要定义一个下拉框的html控件。

接下来当然是定义XmlHttpRequest对象。
   

这个在我的多篇blog文章里都有阐述，就不多说了。

接下来当然是利用该对象来发送条件，获得数据,并且将获得的数据绑定到agent这个下拉框。
在地区下拉框的onchange事件里面触发函数AjaxSend()；

另外顺便介绍一下UserAjax接收到该地区编号后获取数据返回字符串的过程。

这样，一个比较棘手的问题用ajax就获得了完美解决，并且不会因向后台回发而导致下拉框初始化，导致选项改变，亲爱的朋友，看了这个例子，你对ajax是不是也有了
更好的认识呢？

 

     摘要: 在写这篇文章之前，曾经写过一篇关于AJAX技术的随笔，不过涉及到的方面很窄，对AJAX技术的背景、原理、优缺点等各个方面都很少涉及null。这次写这篇文章的背景是因为公司需要对内部程序员做一个培训。项目经理找到了我，并且征询我培训的主题，考虑到之前Javascript、CSS等WEB开发技术都已经讲解过了，所以决定针对AJAX这一块做一个比较系统的培训，所以这篇文章实际上是一个培训的材料。 在这...  阅读全文

1 、文件上传

最近做广告发布系统，不可避免的遇到上传图片文件的问题。基本原理是将图片上传到服务器，然后将它的路径保存在数据库，显示的时候从服务器取出该路径，让img直接指向这个路径即可。当然在上传的时候需要判断文件类型，比如是jpg、gif，swf等。在这里我是用正则表达式来验证的，该方法非常有效，而直接用endwith方法来判断有时候会出现一些莫名其妙的问题。

其次是上传权限的设置，如果是在本地，需要对虚拟目录下该文件夹设置写入权限，在该目录上鼠标右键->属性->安全->everyone->写入即可。
如果是在服务器，除了需要有该文件夹的写入权限之外，还要在web.config里面设置一下。

在system.web节点里面添加如下代码：
<identity impersonate="true" userName="UserName" password="PassWord" />

 在javascript中，event事件是一个必不可少的讨论话题，它在和用户的交互中起到了很重要的作用。今天我们就来讨论一下JavaScript中的事件处理，并且结合它来阐叙Ajax框架实现拖动效果的原理了。
一、 Event对象
   1   Event对象的主要属性和方法
　　event代表事件的状态，专门负责对事件的处理，它的属性和方法能帮助我们完成很多和用户交互的操作，下面我们就来看看它的一些属性和方法。
        type：事件的类型，就是HTML标签属性中，没有“on”前缀之后的字符串，例如“Click”就代表单击事件。

　　srcElement：事件源，就是发生事件的元素。比如<a onclick="check()"></a> a这个链接是事件发生的源头，也就是该事件的srcElement。

　　button：声明了被按下的鼠标键，是一个整数。0代表没有按键，1代表鼠标左键，2代表鼠标右键，4代表鼠标的中间键，如果按下了多个鼠标键，就把这些值加在一起，所以3就代表左右键同时按下。

　　clientX/clientY：是指事件发生的时候，鼠标的横、纵坐标，返回的是整数，它们的值是相对于包容窗口的左上角生成的。

　　offsetX/offsetY：鼠标指针相对于源元素的位置，可以确定单击Image对象的哪个象素。

　　altKey，ctrlKey，shiftKey：顾名思义，这些属性是指鼠标事件发生的时候，是否同时按住了Alt、Ctrl或者Shift键，返回的是一个布尔值。

　　keyCode：返回keydown和keyup事件发生的时候，按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了回车键；

　　fromElement、toElement前者是指代mouseover事件移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素。

　　cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素，它用于检测是否接受上层元素的事件的控制。true代表不被上层元素的事件控制，false代表允许被上层元素的事件控制。

　　returnValue：一个布尔值属性，设置为false的时候可以阻止浏览器执行默认的事件动作，相当于<a href=”#” onclick=”ProcessMethod();return false;” />。

         attachEvent()和detachEvent()方法：为制定DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素。

   2    IE Event对象的一些说明
　　Event对象是一个全局属性
　　在IE中，不能把Event对象作为参数传递给事件处理程序，只能用window.event或者event来引用Event对象。因为在IE中，Event是window的一个属性，也就是说event是一个全局变量，这个变量提供了事件的细节。
 3 关于事件的起泡的概念

        IE中事件的起泡：IE中事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如，<div>标签包含了<a>，如果这两个标签都有 onclick事件的处理函数，那么执行的情况就是先执行<a>标签的onclick事件处理函数，再执行<div>的事件处理函数。如果希望<a>的事件处理函数执行完毕之后，不希望执行上层的<div>的onclick的事件处理函数了，那么就把 cancelBubble设置为false即可。
　　
二、 IE中拖动DOM元素的例子
/*
  该函数由mousedown事件处理调用
  它为随后发生的mousemove和mouseup事件注册了临时的捕捉事件处理程序
  并用这些事件处理程序拖动指定的文档元素
  第二个参数必须是mousedown事件的事件对象
*/
function beginDrag(elementToDrag,event)
{
  //该元素当前位于何处
  //该元素的样式性质必须具有left和top css属性
  //此外，我们假定他们用象素做单位
  //var x=parseInt(elementToDrag.style.left);
  //var y=parseInt(elementToDrag.style.top);
 
  //计算一个点和鼠标点击之间的距离，下面的嵌套的moveHandler函数需要这些值
  var deltaX=event.clientX-parseInt(elementToDrag.style.left);
  var deltaY=event.clientY-parseInt(elementToDrag.style.top);
 
//  注册mousedown事件后发生的mousemove和mouseup事件的处理程序
//  注意，它们被注册为文档的捕捉事件处理程序
//  在鼠标按钮保持按下的状态的时候，这些事件处理程序保持活动的状态
//  在按钮被释放的时候，它们被删除
  document.attachEvent("onmousemove",moveHandler);
  document.attachEvent("onmouseup",upHandler);
  
  //我们已经处理了该事件，不要让别的元素看到它
 event.cancelBubble=true;
 event.returnValue=false;
 
  /*
    这是在元素被拖动时候捕捉mousemove事件的处理程序，它响应移动的元素
   
  */
  function moveHandler(e) 
  {
    //把元素移动到当前的鼠标位置
    e=window.event;
    elementToDrag.style.left=(event.clientX-deltaX)+"px";
    elementToDrag.style.top=(event.clientY-deltaY)+"px";
   
    //不要让别的元素看到该事件
    event.cancelBubble=true;
   
  }
 
  /*
    该事件将捕捉拖动结束的时候发生的mouseup事件
  */
  function upHandler(e)
  {
    //注销事件处理程序
      document.detachEvent("onmouseup",upHandler);
      document.detachEvent("onmousemove",moveHandler);}
  
      event.cancelBubble=true;
    } 
   调用它的HTML文件代码：
　<html>
　<head>
　    <title>Untitled Page</title>
　    <script type="text/javascript" src="dragIE.js"></script>
　</head>
　<body>
　<div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;">
　  <div style="background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" onmousedown="beginDrag(this.parentNode,event);">
　  拖动我&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
　  </div>
　  <div>
　  <p>This is a test.Testing,testing</p></div>
　</div>
　</body>
三、 DOM中的高级事件处理
 IE 6中的事件处理，并不是W3C DOM标准的事件处理模型，所以如果上述代码运行在Mozilla Firefox的浏览器中，就会失去作用，同时即将发布的IE 7也将支持W3C DOM的二级标准，所以掌握DOM的高级事件处理显得就很重要了，因为W3C DOM二级标准是未来Web的发展方向，同时W3C DOM的API非常常用，为未来更加复杂的Web开发提供了良好的基础。
（一）事件处理程序的作用域和事件的传播
　　在正式讨论DOM高级事件处理之前，我们有必要了解一下事件处理程序的作用域。事件处理程序的作用域要比普通的函数作用域复杂很多。普通的函数作用域链比较容易，例如在一个普通函数中查找一个变量a，那么JavaScript解释器会先在该函数的调用对象中查找是否有a这个变量，如果没有，将会在作用域链的下一个对象，一般是全局对象中查找。但是事件处理程序没这么简单，特别是用HTML的属性定义的，它们的作用域链的头部是调用它们的对象，而下一个对象并不是全局对象，而是触发事件处理程序的对象。这样就会出现一个问题，window和document都有一个方法open()，如果open()前面不加修饰，那么在事件处理的函数中将会调用document.open()方法，而不是常用的window.open()方法，所以使用的时候应该明确指明是 window.open()。
（二）事件传播和注册事件处理程序
1.事件传播
　　在二级DOM标准中，事件处理程序比较复杂，当事件发生的时候，目标节点的事件处理程序就会被触发执行，但是目标节点的父节点也有机会来处理这个事件。事件的传播分为三个阶段，首先是捕捉阶段，事件从 Document对象沿着DOM树向下传播到目标节点，如果目标的任何一个父节点注册了捕捉事件的处理程序，那么事件在传播的过程中就会首先运行这个程序。下一个阶段就是发生在目标节点自身了，注册在目标节点上的相应的事件处理程序就会执行；最后是起泡阶段，事件将从目标节点向上传回给父节点，同样，如果父节点有相应的事件处理程序也会处理。在IE中，没有捕捉的阶段，但是有起泡的阶段。可以用stopPropagating()方法来停止事件传播，也就是让其他元素对这个事件不可见，在IE 6中，就是把cancelBubble设置为true。
2.注册事件处理程序
　　和IE一样， DOM标准也有自己的事件处理程序，不过DOM二级标准的事件处理程序比IE的强大一些，事件处理程序的注册用addEventListner方法，该方法有三个参数，第一个是事件类型，第二个是处理的函数，第三个是一个布尔值，true表示制定的事件处理程序将在事件传播的阶段用于捕捉事件，否则就不捕捉，当事件发生在对象上才触发执行这个事件处理的函数，或者发生在该对象的字节点上，并且向上起泡到这个对象上的时候，触发执行这个事件处理的函数。例如：document.addEventListener("mousemove",moveHandler,true);就是在mousemove事件发生的时候，调用moveHandler函数，并且可以捕捉事件。
　　可以用addEventListener为一个事件注册多个事件处理的程序，但是这些函数的执行顺序是不确定，并不像C#那样按照注册的顺序执行。
在Mozilla Firefox中用addEventListener注册一个事件处理程序的时候，this关键字就表示调用事件处理程序的文档元素，但是其他浏览器并不一定是这样，因为这不是DOM标准，正确的做法是用currentTarget属性来引用调用事件处理程序的文档元素。
3.二级DOM标准中的Event
和IE不同的是，W3C DOM中的Event对象并不是window全局对象下面的属性，换句话说，event不是全局变量。通常在DOM二级标准中，event作为发生事件的文档对象的属性。Event含有两个子接口，分别是UIEvent和MutationEvent，这两个子接口实现了Event的所有方法和属性，而 MouseEvent接口又是UIEvent的子接口，所以实现了UIEvent和Event的所有方法和属性。下面，我们就看看Event、 UIEvent和MouseEvent的主要属性和方法。
　　1.Event
　　  type：事件类型，和IE类似，但是没有“on”前缀，例如单击事件只是“click”。
　　  target：发生事件的节点。
　　  currentTarget：发生当前正在处理的事件的节点，可能是Target属性所指向的节点，也可能由于捕捉或者起泡，指向Target所指节点的父节点。
　　  eventPhase：指定了事件传播的阶段。是一个数字。
　　  timeStamp：事件发生的时间。
　　  bubbles：指明该事件是否起泡。
　　  cancelable：指明该事件是否可以用preventDefault()方法来取消默认的动作。
　　  preventDefault()方法：取消事件的默认动作；
　　  stopPropagation()方法：停止事件传播。
　　2.UIEvent
　　  view：发生事件的window对象。
　　  detail：提供事件的额外信息，对于单击事件、mousedown和mouseup事件都代表的是点击次数。
　　3.MouseEvent
　　　button：一个数字，指明在mousedown、mouseup和单击事件中，鼠标键的状态，和IE中的button属性类似，但是数字代表的意义不一样，0代表左键，1代表中间键，2代表右键。
　　　altKey、ctrlKey、shiftKey、metaKey：和IE相同，但是IE没有最后一个。
clientX、clientY：和IE的含义相同，但是在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上 document.body.scrollLeft和document.body.scrollTop。
　　　screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要。
　　　relatedTarget：和IE中的fromElement、toElement类似，除了对于mouseover和mouseout有意义外，其他的事件没什么意义。
（三）兼容于两种主流浏览器的拖动DOM元素的例子
　　好了，刚才讲了这么多DOM编程和IE中的事件，那么如何编写兼容IE和Mozilla Firefox两种主流浏览器的拖拽程序呢？代码如下：
function beginDrag(elementToDrag,event)
{
  var deltaX=event.clientX-parseInt(elementToDrag.style.left);
  var deltaY=event.clientY-parseInt(elementToDrag.style.top);
 
if(document.addEventListener)
{
  document.addEventListener("mousemove",moveHandler,true);
  document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{
  document.attachEvent("onmousemove",moveHandler);
  document.attachEvent("onmouseup",upHandler);
 
}
 
  if(event.stopPropagation)   event.stopPropagation();
  else event.cancelBubble=true;
  if(event.preventDefault)  event.preventDefault();
  else event.returnValue=false;
 
  function moveHandler(e) 
  {
　　if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event
　　//全局属性，否则就用DOM二级标准的Event对象。
    elementToDrag.style.left=(event.clientX-deltaX)+"px";
    elementToDrag.style.top=(event.clientY-deltaY)+"px";
   
     if(event.stopPropagation)   event.stopPropagation();
    else event.cancelBubble=true;
   
  }
 
  function upHandler(e)
  {
       if(document.removeEventListener)
    {
      document.removeEventListener("mouseup",upHandler,true);
      document.removeEventListener("mousemove",moveHandler,true);}
      else
    {
      document.detachEvent("onmouseup",upHandler);
      document.detachEvent("onmousemove",moveHandler);}
    }
      if(event.stopPropagation)   event.stopPropagation();
    else event.cancelBubble=true;
   
最后我们来回顾一下事件执行过程中的三个阶段：
 1 捕捉阶段，事件从Document对象沿Dom解析的树向下传播给目标节点。

 2 目标节点触发阶段 事件处理程序在目标上的运行阶段 
 3 起泡阶段 事件从目标元素向上传播或者起泡回Document对象的文档层次。
 

 

关于ajax，是最近炒得非常火的一种技术，并且时下它也是非常流行。当然，它并不是什么新技术，而是在各种已有的技术和支持机制下的一个统一。在我的项目中，偶尔也会用到ajax，用来给用户一些无刷新的体验。用过几次之后，我个人决定对它的原理和运行机制做一个总结。
    ajax这个名字据说是Asynchronous JavaScript + XML的简写，实际上，它由下列几种技术组合而成。

   1.使用CSS和XHTML来表示。
   2. 使用DOM模型来交互和动态显示。
   3.使用XMLHttpRequest来和服务器进行异步通信。
   4.使用javascript来绑定和调用。

ajax的原理
  XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
  所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
  首先，我们先来看看XMLHttpRequest这个对象的属性。
  它的属性有：
  onreadystatechange  每次状态改变所触发事件的事件处理程序。
  responseText     从服务器进程返回数据的字符串形式。
  responseXML   从服务器进程返回的DOM兼容的文档数据对象。
  status                 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
  status Text         伴随状态码的字符串信息
  readyState         对象状态值，0—未初始化 1—正在加载  2—加载完毕 3—交互 4—完成。
  
  但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。
下面是面对不同浏览器分别创建的XMLHttpRequest对象。


这个过程分为三步，首先我们定义一个xmlHttp来引用创建的XMLHttpRequest。然后，我们尝试在微软的浏览器中创建该对象，先用Msxml.XMLHTTP对象来创建，如果失败再尝试用macrosoft.XMLHTTP来创建它．最后，我们面向非微软浏览器来创建该对象．
　这样，我们创建了一个XMLHttpRequest对象，下面我们来看如何发出一个XMLHttpRequest请求。
由上面可见，执行XMLHttpRequest实际上大多数代码还是用在处理浏览器的区别上面，针对不同的浏览器它还是要做出不同的处理，但是这样看上去也非常的直观。
 在上面的代码中，最关键的是：
xhr.onreadystatechage=callback   它定义了回调函数，一旦响应它就会自动执行。
xhr.open(""Get",url,true);   true表示您想要异步执行该请求。

对于callback来说，我们有：
 就是说，一旦服务器处理完XMLHttpRequest并返回给浏览器，用xhr.onreadystatechange指派的回调方法将自动调用。

上面差不多就是XMLHttpRequest的整个工作流程，它首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。

  知道了XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。
  现在，我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。至于现在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并没有什么太大的区别。

  
   自从W3C建立了DOM标准 (W3C DOM)之后，以及DOM和浏览器兼容之后，DOM在实际应用中越来越广泛。
   DOM是Document  Object Model的简称，中文名称为文档对象模型。它的主要作用是建立网页与 Script 或程序语言沟通的桥梁。

   我们平时可操作及建立文件的属性、方法及事件都以并且用“对象”来展现（例如，document 就代表“文件本身”这个对象，table 对象则代表 HTML 的表格对象等等）。这些对象可以由当今大多数的浏览器以 Script 来取用。

   DOM 常用来和JavaScript交互，也就是说程序以 JavaScript写成，但使用 DOM 来存取页面及其元素。它们两者之间的结合非常紧密，甚至可以说如果没有DOM，我们在使用javascript的时候是不可想象的，因为我们每解析一个节点一个元素都要耗费很多精力，DOM 本身是设计为一种独立的程序语言，以一致的 API 存取文件的结构表述；当然除了JavaScript，DOM可还可以与任何程序语言共同运作，如C/C++、VB、VBS。
   
   在和JavaScript进行交互的时候，DOM主要用来解析XML文档，当你的应用程序需要不断地导航、修改文档或随机地一次访问整个文档时，我们一般就使用DOM来解析。
   在使用DOM进行解析的时候，它在内存中构建起一棵完整的解析树，借此实现对整个XML文档的全面、动态访问。也就是说，它的解析是有层次的，即将所有的html中的元素都解析成树上层次分明的节点，然后我们可以对这些节点进行增删改查等操作，这是对DOM模型的作用的最完善的总结。
   和SAX不同，SAX是顺序解析的，与DOM相比，SAX解析器能提供更好的性能优势，它提供对XML文档内容的有效低级访问。
   SAX模型最大的优点是内存消耗小，因为整个文档无需一次加载到内存中，这使SAX解析器可以解析大于系统内存的文档。另外，你无需像在DOM中那样为所有节点创建对象。最后，SAX“推”模型可用于广播环境，能够同时注册多个ContentHandler，并行接收事件，而不是在一个管道中一个接一个地进行处理。但是SAX的一些缺点使它的流行性不如DOM。

   DOM的使用非常简单。你可以随机地访问XML文档，由于整个树都构建在内存中，因此可以通过DOM API修改这些节点，例如增加一个子节点或修改、删除一个节点。 
  不过，虽然内存树结构提供了很好的导航支持，但仍有一些解析策略问题需要仔细考虑。首先，整个XML文档必须一次解析完成，不可能只做部分解析；其次是效率问题，在内存中加载整个文档和构建完整树结构的成本很高，尤其当文档非常大的时候。典型地，DOM树的容量比文档容量要大一个数量级，所以它要消耗大量内存；第三，一般的DOM节点类型在互操作性上有优势，但对于对象类型绑定也许不是最好的。