通过AJAX实现无刷新提交功能(转)

原文来自：http://blog.csdn.net/delicacylee/archive/2007/09/08/1777335.aspx

这次通过XMLHttpRequest，JS和DIV浮动层来完成无刷新提交功能，功能效果类似于我们在使用新浪BLOG时登录的效果。 Test.asp是当前页面，你点击按钮弹出一个div窗口用于填写信息，再通过XMLHttpRequest进行异步处理，将参数传导 Handle.asp页面来进行数据存储或验证，并返回参数到文本框里！

终于感受到代码的伟大了，我顺便加了一个浮动层拖拽效果，让用户使用起来更方面，小弟初来乍到，还请各位大虾多多包涵啊。。。

Test.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浮动层测试</title>
<script language="javascript">
<!--
function ajaxSubmit(){
    var name = document.forms[0].txtName.value;
    //创建XMLHttpRequest对象
    var xmlhttp
    try{
        xmlhttp = new XMLHttpRequest();
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //创建请求结果处理程序
    xmlhttp.onreadystatechange = function(){
        if(4 == xmlhttp.readyState){
            if(200 == xmlhttp.status){
                var date = xmlhttp.responseText;
                Handling(date);
            }else{
                alert("error");
            }
        }
    }
    //打开连接，true代表异步提交
    xmlhttp.open("post","Handle.asp",true);
    //当方法为POST时需要设置HTTP头
    xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    //发送数据
    xmlhttp.send("txtName="+escape(name));
}

//处理程序
function Handling(date){
    esave.style.visibility="hidden";
    txtHouse.value += document.forms[0].txtName.value + "|";
    document.forms[0].txtName.value = "";
}

function mysub(){
    esave.style.visibility="visible";
}

var currentMoveObj = null;    //当前拖动对象
var relLeft;    //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
{
    currentMoveObj = obj;        //当对象被按下时，记录该对象
    currentMoveObj.style.position = "absolute";
    relLeft = event.x - currentMoveObj.style.pixelLeft;
    relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.onmouseup = function()
{
    currentMoveObj = null;    //当鼠标释放时同时释放拖动对象
}
function f_move(obj)
{
    if(currentMoveObj != null)
    {
        currentMoveObj.style.pixelLeft=event.x-relLeft;
        currentMoveObj.style.pixelTop=event.y-relTop;
    }
}
//-->
</script>
</head>
<body>
<div id="esave" style="position:absolute; top:20px; left:40px; z-index:10px; visibility:hidden;"onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<table border="0" cellpadding="0" cellspacing="0" width="180px">
<tr>
    <td height="50px" bgcolor="#6699FF" align="center" valign="middle" style="padding-top:20px;">
    <form name="theForm" method="post">
    <input type="text" name="txtName" value="" size="10" maxlength="10" /><br />
    <input type="button" name="submit" onclick="ajaxSubmit();" value="提交" />
    </form></td>
</tr>
</table>
</div>
<center>
<input type="text" value="" name="txtHouse" />
<input type="button" name="button" onclick="javascript:mysub();" value="添加房型信息" />
</center>
</body>
</html>

 Handle.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>逻辑处理页面</title>
</head>
<body>
<%
     '逻辑处理代码
%>
</body>
</html>

posted on 2008-05-30 02:58 Jarod.cn.LuLuLife 阅读(386) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。
网站导航:
 
<2024年12月>
日一二三四五六
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

导航

统计

公告

我的知识Blog!

常用链接

留言簿(3)

随笔档案

文章档案

Image

搜索

最新评论

阅读排行榜

评论排行榜