Ajax 留言板模拟

作者：msf 来源：ITPOW（原创）日期：2007-1-31

这一节我们利用 Ajax 制作一个留言板模拟，之所以叫模拟，是由于没有将留言内容存入数据库，而只是假像地处理，因为这里着重讨论 Ajax，暂时就不涉及数据库操作。

这里我们模拟了留言失败的情况，每次提交有 50% 的可能性会留言失败，便于观察不同的处理结果。

下面是服务器端代码（注意：即使指定了 charset，还是要把文件的存储编码设定为 utf-8，记事本有选择编码的功能，一些网页编辑器会根据其中的 charset 自动选择编码）：

<%option explicit%>
<%response.expires = 0%>
<%
response.contentType = "text/xml"

Randomize()
dim rslt
if Rnd() >= 0.5 then
rslt = "0" '我们用 0 表示成功
else
rslt = "1" '我们用 1 表示失败
end if
%><?xml version="1.0" encoding="utf-8"?>
<root>
<rslt><%=rslt%></rslt>
<msgTitle><![CDATA[<%=request.Form("msgTitle")%>]]></msgTitle>
<msgContent><![CDATA[<%=request.Form("msgContent")%>]]></msgContent>
<contact><![CDATA[<%=request.Form("contact")%>]]></contact>
</root>

下面是客户端代码（POST 数据时仍然需要使用 encodeURIComponent，否则 & 之类的字符将会当作特殊字符。）：

<?xml version="1.0" encoding="utf-8"?>
<!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=utf-8" />
<title>留言板</title>
<style type="text/css">
body
{
    text-align:center;
}

.pageBody
{
    margin:0px auto 0px auto;
}

#processing
{
    display:none;
    text-align:center;
}

#msgForm
{
    text-align:left;
}
</style>
</head>

<body>

<div class="pageBody">
  <div id="processing">正在处理...</div>
  <form action="http://www.itpow.com/c/2007/01/CDPWES5VUCQCZOU3/process.asp" method="post" id="msgForm" onsubmit="javascript:return SubmitMsg();">
    <div>留言标题：<input type="text" size="20" name="msgTitle" /></div>
    <div>留言内容：<textarea cols="18" rows="18" name="msgContent"></textarea></div>
    <div>您的联系方式：<input type="text" size="20" name="contact" /></div>
    <div><input type="submit" value="提交" /></div>
  </form>
</div>

<script type="text/javascript" language="javascript">
<!--
function CreateHTTPObject()
{
    var xmlhttp;
    
    try
    {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
            xmlhttp = false;
        }
    }
    
    if (!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
        try
        {
            xmlhttp = new XMLHttpRequest();
        }
        catch (e)
        {
            xmlhttp=false;
        }
    }
    
    if (!xmlhttp && window.createRequest)
    {
        try
        {
            xmlhttp = window.createRequest();
        }
        catch (e)
        {
            xmlhttp=false;
        }
    }
    
    return xmlhttp;
}


function OnReadyStateChng(xmlhttp)
{
    if (xmlhttp.readyState == 4)
    {
        if (xmlhttp.status == 200)
        {
            if (xmlhttp.responseXML.getElementsByTagName("rslt")[0].firstChild.nodeValue == "0")
            {
                alert("留言成功！" +
                      "\n留言标题："+xmlhttp.responseXML.getElementsByTagName("msgTitle")[0].firstChild.nodeValue +
                      "\n留言内容："+xmlhttp.responseXML.getElementsByTagName("msgContent")[0].firstChild.nodeValue +
                      "\n您的联系方式："+xmlhttp.responseXML.getElementsByTagName("contact")[0].firstChild.nodeValue);
            }
            else
            {
                alert("留言失败，请重试！");
            }
        }
        else
        {
            alert("HTTP 错误，状态码：" + xmlhttp.status);
        }
    }
}


function SubmitMsg()
{
    var xmlhttp = CreateHTTPObject();
    if (!xmlhttp)
    {
        return true; //无法创建 xmlhttp 对象，无法通过 Ajax 来处理，故返回 true，让网页来提交数据。
    }
    
    var msgForm = document.getElementById("msgForm");
    var processing = document.getElementById("processing");
    
    //隐藏表单，显示处理进程
    msgForm.style.display = "none";
    processing.style.display = "block";
    
    //Ajax 提交
    xmlhttp.open("POST", msgForm.action, true);
    xmlhttp.onreadystatechange = function () {OnReadyStateChng(xmlhttp);};
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //这一句是用post方法发送的时候必须写的
    xmlhttp.send(GetMsgData(msgForm));
    
    //显示表单，隐藏处理进程
    msgForm.style.display = "block";
    processing.style.display = "none";
    
    return false; //Ajax 处理完成，不用再提交。
}


function GetMsgData(msgForm)
{
    return "msgTitle=" + encodeURIComponent(msgForm.msgTitle.value) + "&msgContent=" + encodeURIComponent(msgForm.msgContent.value) + "&contact=" + encodeURIComponent(msgForm.contact.value);
}
-->
</script>

</body>

</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]