DIV弹出层+Ajax 实践Button OnClientClick验证

DIV层

<div id="divPlusAddress" runat="server" style="visibility:hidden;">
<div id="divCover" style="left:0px; top:0px; width:100%; height:100%; background-color:Gray; position:absolute;filter:alpha(opacity=50);"></div>
 <div style="z-index:5; top:100px; left:200px; position:absolute; width:300px; height:150px; background-color:White;">
 <ul style="list-style:none;">
 <li><span style="margin-left:10px;">地址:</span><span style="margin-left:10px;"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></span>
 </li>
 <li><span style="margin-left:10px;">备注:</span><span style="margin-left:10px;"><asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Width="148px"></asp:TextBox></span>
 </li>
 <li><span style="margin-left:80px;"><asp:Button id="btnclientAdd" runat="server" OnClick="Button1_Click" OnClientClick="return checkAddress();" style="width:50px;" Text="添加" /></span>
     <span><input type="button" id="btnClientCancel" value="取消" style="width:50px;" onclick="btnCancel();"/></span>
 </li>
 </ul>
 </div>
 </div

JS脚本

function plusAddress(){
  try{
  document.getElementById("ctl00_ContentPlaceHolder1_divPlusAddress").style.visibility="visible";
  document.getElementById("ctl00_ContentPlaceHolder1_TextBox1").value="";
  document.getElementById("ctl00_ContentPlaceHolder1_TextBox2").value=""}
  catch(e){alert(e);}}
function callSrv(url,callBack){
  var xmlHttpObj=getxmlHttpObj();
  xmlHttpObj.onreadystatechange=state_Change;
  function state_Change(){
   if(xmlHttpObj.readyState==4&&xmlHttpObj.status==200){
   callBack(xmlHttpObj);}}
 xmlHttpObj.open("GET",url,false);
 xmlHttpObj.send(null);}
function btnCancel(){
document.getElementById("ctl00_ContentPlaceHolder1_divPlusAddress").style.visibility="hidden";}
function checkAddress(){
  var isExit=false;
  if(document.getElementById("ctl00_ContentPlaceHolder1_TextBox1").value==""){
  alert('地址不能为空');
  return false;}
  this.callBack=function(_xmlHttp){
  try{
    if(_xmlHttp.responseText=='Existed')
     alert('此地址已存在');
     else{isExit=true;}}
  catch(e){alert(e);}finally{}}
callSrv("../CheckAddress.ashx?strID="+document.getElementById("ctl00_ContentPlaceHolder1_TextBox1").value,this.callBack);
return isExit;}function getxmlHttpObj(){
   var xmlHttp=null;
    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("Your browser does not support ajax");}}}
    else if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest();} 
    return

 

ashx就不贴了，

这是本人第一个用XmlHttpRequest 实现的Ajax程序，本程序是对公司的老系统进行改造，时间有限只应用Ajax进行验证，通过后直接调用PostBack进行处理。

思路：设置div runat="server" 样式 visibility="hidden" 使用 asp:Button 添加 OnClientClick事件，验证使用的是Ajax,当通过所有验证，则执行Button的OnClick服务端事件。

其中验证的Ajax代码写的非常乱，即不是面向对象也不是面向过程，这就是javaScript。。。