购物系统之（重装上阵）

              前面我所介绍的购物系统，只能说在运用MSWeb控件的基础上将系统的优化做到最佳！

但是如果真正想将我们的应用系统做到最佳效果，只有将MSWeb控件全部的清楚掉！回归到最初的Html时代！运用代码和Html工具，涉及到和数据库交互我们就用Ajax技术来为我们完成使命！这样我们的系统才能算是最优的系统！

      首先我先声明下，我的购物系统从登陆，注册，到添加到结账页面全部都是Ajax异步技术！ 

 

 

    （第一集）“怎么办？全部改架构呗！”（强大的Ajax技术）

          （1）以前我们在数据层写的SQL语句全部都拿到SQLSERVER中的存储过程中实现了！

              存储过程没有什么高深的技术！，就是到形成订单的是时候用到了一个批量插入的算法，我到时候会一一讲解的，如果对大家受用的话就采纳下！

 

           （2）登陆

                    SQL 数据层(sqldataAccess)中首先本着一个原则就是数据全部参数化！这个从数据库中检索我们想要的数据进行判断就行了！数据检索和传递参数的过程和前面的一样！没有什么区别,但是到了Web 后台，我们就要在这动大手笔了！

                   首先我在页面的源中运用XMLHttpResquest()传值方法写了一段JS脚本！将用户输入的用户名添加到URL中，异步的传输到服务器，经服务器解析之后，带到Web页面，将这个值传递给Common层中我实现封装好的实体中，交给数据层处理 ，得到的结果。通过在这个JS的Funciton，我向XMLhTTP请求了一个回调函数，在得到后台的信号后，这个回调函数就执行我事先写好的方法，判断用户名是否存在，整个过程都是异步的实现，页面没有做任何的刷新，无论从视觉上还是从性能上都大大提高了我们的App!

                   这里我要注明下，在注册的时候 用户输入的密码必须要经过哈希，否则在传输的时候数据有可能会被黑客拦截的！

                  

            <script language="javascript" type="text/javascript">
   function  JudgeUser()
  {
     var oId = document.getElementById("Text1");
     var textCount = oId.value.indexOf("a<her");
    
     if(oId.value =="")
     {
       alert("用户名不能为空!");
       return false;
        
     }
    
     if(textCount>-1)
     {
    
       alert("用户名中不能含有非法字符！");
       return false;
     }
    
         SelectName();
  }
 
 
  function  JudgePwd()
  {                           
      var  oPwd = document.getElementById("Text2");
      var txtCount = oPwd.value.indexOf("a<her");
     
      if(oPwd.value =="")
       {
         alert("密码不能为空!");
         return false;
       }
                        
      if(txtCount>-1)
       {
         alert("用户名中不能含有非法字符!");
         return false;
       }
                         
  }        
 

</script>

<script language="javascript" type="text/javascript">

                  var xmlHttp;
  
                function  createXmlHttpResquest()
                  {
                 if(window.ActiveXObject)
                     {            
                       xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");    
                       
                     }
                 else  if(window.xmlHttpRequest)
                     {
                       xmlHttp = new  xmlHttpRequext();
                     } 
      
                 }                        
   
   
               function  SelectName()
                 {      
                     var  userName = document.getElementById("Text1").value;
                     var  pwd = document.getElementById("Text2").value;
                         
                    if(userName =="")
                    {
                       return;
                    }        
                             
                    var url = "Index.aspx?userName="+userName;
                                                       
                  createXmlHttpResquest();   
                  xmlHttp.onreadystatechange = handleStateChange;
                  xmlHttp.open("GET",url,true);
                  xmlHttp.send(null);
                    
                 }
                  
               function handleStateChange()
               {
                   if(xmlHttp.readyState ==4)
                   {
                     
                       if(xmlHttp.status == 200)
                       {
                          selectValue();
                         
                       }
                     
                      
                   }
                 
               }
              
              
              function  selectValue()
              {
                  var oId = document.getElementById("UserLogin1_Label1");
                  oId.innerText="查询中....";
                                  
                  var  readInfo = findValue();
                  
                  if(readInfo == 1)
                   {
                       oId.innerText ="用户名合法!";
                   }
                  
                   else if(readInfo ==2)
                   {
                     oId.innerText="用户名不存在!";
                   }
                 
                 
                
              }
             
             
              function  findValue()
              {
                 var  acceptId  = xmlHttp.responseXML;
                 var  textContent =acceptId.firstChild.firstChild.firstChild.nodeValue;
                                                     
                 if(textContent == "YES" )
                 {
                    return  1;
                 }
                
                 if(textContent =="NO")
                 {
                   return  2;
                 }
                 
               
              }
             

</script>

      

 

             这个只不过是做了几个有用的判断！如果还想实现什么功能判断，就是在加几个Function的问题！

      Web后台就是运用stringBuilder拼出字符串，以XML格式传到前台的JS中执行！

 

 

（第二集） “数据传输和参数传递没有问题，但是到了Web页面后台怎么拼出我想要的样式的表格啊？”

 

           这个是我在做的时候遇到的困难！怎么办？我总结了一个办法，大家想想，stringBuilder不就是一个很长的字符串！，我什么不可以拼啊？？甚至说这个字符串我到底应该拼到那，拼出HTML页面都是可以的！

还有什么不能拼的啊？？？

          这个思想给了我一个很大的想象空间！所有页面上要执行的动作我都能给它拼进来！包括和CSS交互！

      但是怎么拼啊？我就事先在一个页面的源里写了些HTML控件和动作,实现了之后我就一个一个把它加载到我的stringBuilder里，这样一来，我就实现了数据动态加载到页面上！而在真正的页面上我就放了几个DIV，大家想想这个速度，让页面去动态加载我的代码！而不是加载什么垃圾控件！ 性能上是一个质的飞跃！所有的数据都是以XML文档的形式传输的！