DIV层
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<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
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
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
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<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脚本
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
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。。。