asp.net+ajax留言本

没有了解ajax的时候，觉得很神秘，了解了之后，不就那么回事么（说笑）

今天我们不用任何框架，来实现一个简单的留言本,已经在Firefox和IE下测试正常

ajax就是“Asynchronous JavaScript and XML”的全称，即异步的javascript和xml,和我高中球队名字一样

用ajax之前我们首先要创建XMLHttpRequest对象，这是实现ajax的关键对象

js代码如下：

 

 createXmlHttp()
{
    var xmlHttp;
    // 检测MSXMLHTTP版本，为了兼容IE各个版本
    var activeKey = new Array("MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");
    if(window.ActiveXObject)
    {
       for(var i=0;i<activeKey.length;i++)
       {
          try
          {
              xmlHttp = new ActiveXObject(activeKey[i]);
              if(xmlHttp!=null)
                 return xmlHttp;
          }
          catch(error)
          {
              throw new Error("您的浏览器版本过低，请更新浏览器");
          }
       }
    }
    else if(window.XMLHttpRequest)
    {
       xmlHttp = new XMLHttpRequest();
    } 
    return xmlHttp;  
} 

 

 

接着就是获取留言列表

 

 getList()
{
   var url = "Server.aspx?action=getList";
   var xmlhttp = createXmlHttp();
   xmlhttp.onreadystatechange=function()
   
{
        
     if(xmlhttp.readyState==4&&xmlhttp.status==200)  
        
     {
            
        $("guestbook").innerHTML = xmlhttp.responseText; 
     } 
  }
   xmlhttp.open("GET",url,true);
   xmlhttp.send(null);     

 

最后就是处理用户提交留言的

 

 PostComment()
{  
   var uname = $("uname");
   var ucontent = $("ucontent");
   if(uname.value=="")
   {
      alert("请输入昵称");
      return false;
   }
   if(ucontent.value=="")
   {
      alert("请输入内容");
      return false;
   }
   var url = "Server.aspx?action=postComment&uname="+ encodeURI(uname.value)+ "&ucontent=" + encodeURI(ucontent.value)
   var xmlhttp2 = createXmlHttp();
   xmlhttp2.open("GET",url,true);
   xmlhttp2.send(null);  
   uname.value = "";
   ucontent.value = "";
   alert("留言成功");
   getList();   
}

 

代码很简单就不解释了，其中Server.aspx是用来接收前台的请求，然后response回应，前台和后台的接收和回应都是靠XMLHttpRequest这个对象完成的,这只是个简单的例子，我们还可以增加其自动分页的功能等，但基本的结构是如此。

 

点击下载源码

 

Demo