Ajax+jQuery实现LightBox与服务器通信

     LightBox效果又叫windows关机效果。就是像windows关机时一样，桌面上的应用失效而只能点击关机等框内的几个按钮。在网页中其实就是利用了两个层。其中一个设置成半透明遮住整个屏幕，另一个放在其上面用来显示内容。

     在写之前看过了cloudgamer的效果，自认JavaScript功力远不及他。参考了他的效果之后写了这个简单版并加入了LightBox与服务器的通信。
     为了方便演示，我把代码都写到一个文件里了，css也直接写在行内。
     首先是覆盖层：

< div  id ="coverLayer"  style =" display:none; background:#000000;  position:absolute; " ></ div >     

     先不让他显示、黑色背景、绝对定位。

     然后是LightBox：

1      < div  id ="lightBox"  style =" display:none; width:300px; height:200px;position:absolute;z-index:1001; background:#ffffff; left:50%; top:50%; margin-left:-150px; margin-top:-100px; border:#00FFFF double 4px;" >
2          < a  id ="discover"  href ="#"  onclick ="discover();" > 关闭 </ a >
3          < form  id ="formLogin" >
4          < p > 用户名： < input  id ="tbUserName"  name ="tbUserName"  type ="text"   /></ p >
5          < p > 密码： < input  id ="tbPassword"  name ="tbPassword"  type ="password"   /></ p >
6          < p >< input  id ="btnLogin"  name =""  type ="button"  value ="登录"  onclick ="Login();"   /></ p >
7          </ form >
8      </ div >
9

     要与数据库通信，我放了一个表单在里面获取输入。两个文本框、一个按钮。还有一个关闭LightBox的连接。对于LightBox的样式。首先还是不让其显示，高、宽这样的就不用说了。绝对定位。设置z-index为1001保证他显示在最上面。白色背景。left:50%; top:50%; margin-left:-150px; margin-top:-100px;让其居中。这是css中一种比较常见的设置块状容器居中的方法。当然，这和容器的定位有关。cloudgamer的文章中也讲到了这种方法。要了解更多的关于css的东西可以去标准之路 http://www.aa25.cn/ 或者蓝色理想 http://www.blueidea.com/等地方。当然园子里也很多。（好像有点啰嗦-_-）之后是为了好看设置了一个4像素的边框。

     再是要一个开启LightBox的链接

< a  id ="cover"  href ="#"  onclick ="cover();" > 登录 </ a >

     单击他就执行cover（）；覆盖函数。

     最后加了一个select用于在IE中屏蔽的测试

1    < form  >      
2       < label > select
3          < select  name ="select"  id ="select"   >
4              < option > 测试Select覆盖 </ option >
5              < option > 测试Select覆盖 </ option >
6          </ select >  
7       </ label >
8   </ form >

 

     之后是JavaScript。
     先看一下cover（）；覆盖函数，这个函数只是让遮盖层和LightBox显示出来，并影藏所有的select，以免在IE中效果有误。

 1 < script type = " text/javascript "   >
 2      function  cover()
 3      {
 4        $("select").each(function(){this.style.visibility="hidden";})
 5        //选择所有的select并设置为隐藏
 6         $("#coverLayer").fadeTo("fast",0.5,function(){$("#coverLayer").css("display","block");})
 7                        .width(Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth))
 8                        .height(Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight));
 9        //显示覆盖层 并设置其高和宽
10        $("#lightBox").show();
11        //显示LightBox层
12    }
13 < / script>

     关于遮盖层的高和宽的设置cloudgamer已经有很详细的讲述了。我也是参考他的做法。这里就不多讲了。有兴趣大家可以直接去看：http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html

     再是discover（）；故名思议，这个函数的功能刚好和上一个相反，所以只需要把两个层设成影藏并重新显示刚才影藏的select就可以了。

1      function  discover()
2      {
3        $("select").each(function(){this.style.visibility="visible";})
4        $("#coverLayer").fadeOut("normal",function(){$("#coverLayer").css("display","none");})
5        $("#lightBox").fadeOut("normal",function(){$("#lightBox").css("display","none");})
6    }
7
8

 

 

     到这里LightBox效果就基本实现了。接下来要做的是用Ajax让LightBox和服务端通信。首先创建XMLHttpRequest对象：

 1 var  xmlHttp;
 2
 3 function  CreateXMLHttpRequest()
 4 {
 5    if (window.ActiveXObject)
 6    {
 7        xmlHttp=new ActivXObjct("Microsoft.XMLHTTP");
 8    }
 9    else
10        if (window.XMLHttpRequest)
11        {
12            xmlHttp=new XMLHttpRequest();
13        }
14        
15}
16

    这里的变量xmlHttp是全局的，下面还会再用到。因为IE和其他标准浏览器的XMLHttpRequest对象不一样，所以我用了两个条件判断来兼容IE。

     创建了XMLHttpRequest对象以后就要用它向服务端发送请求了

 1 function  Login()
 2 {
 3    CreateXMLHttpRequest();
 4
 5    var strUserName=$("#tbUserName").val();
 6    var strPassword=$("#tbPassword").val();
 7    var url="/test/Ajax.aspx?userName="+strUserName+"&password="+strPassword;
 8    xmlHttp.open("GET",url,true);                
 9    xmlHttp.onreadystatechange=CallBack;
10    xmlHttp.send(null);
11}
12

     首先获取表单上的值，并根据获得的值构造请求用的url。再用get方法发送请求。这些似乎都是Ajax的标准代码了。发送了请求我们再看服务器要怎么响应了。

 1      protected   void  Page_Load( object  sender, EventArgs e)
 2      {
 3        //string strAction = Request.QueryString["action"];
 4        //switch (strAction)
 5        //{
 6        //    case login:
 7        //        {
 8        string strUserName = Request.QueryString["userName"];
 9        string strPassword = Request.QueryString["password"];
10        LoginCallBack(strUserName,strPassword);
11                    //break;
12        //        }
13        //}
14
15
16    }
17
18      protected   void  LoginCallBack( string  strUserName, string  strPassword)
19      {
20        string strCommandText = "SELECT * FROM admin WHERE name='" + strUserName + "' AND password='" + strPassword + "'";
21        SqlConnection myConnection = new SqlConnection(strCONNECTION_STRING);
22        SqlCommand myCommand = new SqlCommand(strCommandText, myConnection);
23        SqlDataReader myReader;
24        myConnection.Open();
25        myReader = myCommand.ExecuteReader();
26        if (myReader.Read())
27        {
28            Session["UserName"] = myReader.GetString(1);
29            Session["Password"] = myReader.GetString(2);
30            Response.ContentType = "text/plain";
31            Response.AppendHeader("Cache-Control", "no-cache");
32            Response.AppendHeader("Pragma", "no-cache");
33            Response.Write("欢迎：" + Session["UserName"]);
34            Response.End();
35        }
36        else
37        {
38            Response.Write("登录失败");

39        }

 

40    }
41 }
42

     第一步当然是获得查询参数。之后再作为函数的参数用函数对其进行处理。我这里是模仿了一个登录。至于怎么样从数据库中查出数据以及查出什么数据不是我们这篇文章要讨论的问题。这里不多说。关键是下面几句

1              Response.ContentType  =   " text/plain " ;
2              Response.AppendHeader( " Cache-Control " ,  " no-cache " );
3              Response.AppendHeader( " Pragma " ,  " no-cache " );
4              Response.Write( " 欢迎： "   +  Session[ " UserName " ]);
5              Response.End();
6 

     第一句是设置XMLHttpRequest对象返回的类型。我这里设置的是纯文本。也可以设置成“text/xml”。这样返回的就是xml类型的。在客户端可以用DOM获取里面的内容。接下去的两句是设置首部，使浏览器不会在本地缓存结果。之所以要设置两个是为了向后兼容。然后那句大家就应该很熟悉了——输出内容。最后是关闭或者说结束response对象。

     现在服务端已经返回数据了，看在客户端的接收。

Code
 1 function CallBack()
 2 {
 3     if(xmlHttp.readyState==4)
 4     {
 5         if(xmlHttp.status==200)
 6         {
 7             var strMeesage=xmlHttp.responseText;
 8             InsertMessage(strMeesage);
 9         }
10     }
11 }
12 

这里很简单，直接获取responseText，然后仍给InsertMessage（）去处理

1  function  InsertMessage(message)
2  {
3      $( " #formLogin " ).remove();
4      $( " #lightBox " ).append( " <div> " + message + " </div> " );
5  }
6 

这也很简单，把刚才登录的表单移除，再直接把内容扔到一个div里送显。这样基本上就是完成了！

ps。这里和服务端的交互只是个演示。在实际运用时可千万别直接就这样。我是说直接把登录的用户名和密码都用明文直接放到url里！哈哈。。。