ajax新手请教《adding ajax》中的例子

例子中有四个文件，分别是
addcomment.php
<?php
/*
 * Created on 2011-4-14
 *
 * To change the template for this generated file go to
 * Window - Preferences - PHPeclipse - PHP - Code Templates
 */
 $comment = $_POST['comment'];
 $submit = $_POST['submitbutton']; if(empty($submit)){
  echo $comment;
 }
 else{
  echo $submit.':'.$comment;
 }
?>
test.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Timers, Ajax, and Fade, oh my</title>
<link rel="stylesheet" href="events.css" type="text/css" media="screen"/>
<script type="text/javascript" src="addingajax.js"></script>
<script type="text/javascript" src="comment.js"></script>
</head>
<body>
<div id="list">
<h1>Current Commetns:</h1>
</div>
<form action="addcomment.php" id="commmentform" method="post">
<fieldset>
<legend>Comment:</legend> <textarea id="comment" name="comment" cols="65" rows="10"></textarea><br><br>
<input type="submit" id="previewbutton" value="Preview" name="submitbutton" />
<input type="submit" id="save" value="Save" name="submitbutton" />
</fieldset>
</form>
<div id="preview">
</div>
</body>
</html>
comment.jsvar commentCount = 0;
var xmlHttp;function yellowColor(val){
var r = "ff";
var g = "ff";
var b = val.toString(16);
var newval = "#"+r+g+b;
return newval;
}aaManageEvent(window, "load", function(){
aaManageEvent(document.getELementById('save'), "click", saveComment);
});
function saveComment(evnt){
//取消冒泡阶段的事件
evnt = evnt?evnt:window.event;
aaCancelEvent(evnt);
if(!xmlHttp) xmlHttp = aaGetXmlHttpRequest();
if(!xmlHttp) return; var commentText = document.getElementById("comment").value;
modText = commentText.split(/\n/).join("<br>");
var param = "comment=" + modText;
var url = "addcomment.php?" + param;
xmlHttp.open('POST', url, true);
//发送评论
xmlHttp.onreadystatechange = addComment;
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
return false;
}
//向现有的列表添加评论，并伴随着颜色的闪烁效果
function addComment(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var modText = xmlHttp.responseText;
//console.log(modText);
var newDiv = document.createElement("div");
commentCount++;
newDiv.setAttribute("id", "div"+commentCount);
newDiv.setAttribute("class", "comment");
newDiv.innerHTML = modText; //把对象放到页面上去
document.getElementById("list").appendChild(newDiv); //启动闪烁效果计数器
var ctrObj = new Counter("div"+commentCount, 0, 255);
ctrObj = countDown();
}
}function Counter(id, start, finish){
this.count = this.start = start;
this.finish = finish;
this.id = id;
this.countDown = function(){
this.count+=25;
if(this.count >= this.finish){
document.getElementById(this.id).style.background = "transparent";
this.countDown = null;
return;
}
document.getElementById(this.id).sytle.backgroundColor = yellowColor(this.count);
setTimeout(aaBindEventListener(this, this.countDown), 100);
}
}aaManageEvent(window, "load", function(){
aaManageEvent(document.getElementById('comment'), "keyup", echoPreview)
});function echoPreview(){
var commentText = document.getElementById("comment").value;
modText = comment.split(/\n/).join("<br>");
var previewElem = document.getElementById("preview");
previewElem.innerHTML = modText;
}
addingajax.js
//获取xmlhttprequest对象
function aaGetXmlHttpRequest(){ var xmlHttpObj; if(window.XMLHttpRequest){
xmlHttpObj = window.XMLHttpRequest();
}
esle{
try{
xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
xmlHttpObj = false;
}
}
} return xmlHttpObj;
}
//检查IE版本
function aaScreenIE(){
if(navigator.appName == 'Microsoft Internet Explorer'){
msie = navigator.appVersion.split("MSIE");
version = parseFloat(mise[1]);
if(version >= 6.0) return false;
}
else{
return false;
} return true;
}
//可整合事件处理
//注册事件监听
function aaManageEvent(eventObj, event, eventHandler){
if(eventObj.addEventListener){
eventObj.addEventListener(event, eventHandler, false)
}
else if(event.attachEvent){
event = "on"+event;
eventObj.attachEvent(event, eventHandler);
}}
//停止事件监听
function aaStopEvent(eventObj, event, eventHandler){
if(eventObj.removeEventListener){
eventObj.removeEventListener(event, eventHandler, false);
}
else if(eventObj.detachEvent){
eventObj.detachEvent(event, eventHandler);
}
}
//停止默认的事件处理
function aaCancelEvent(event){
if(event.preventDefault){
event.preventDefault();
event.stopPropagation();
}
else{
event.returnValue = false;
evnet.cancelBubble = true;
}
}
//为作为事件处理器调用的方法绑定对象上
function aaBindEventListener(obj, method){
return function(event){method.call(obj, event || window.event)};
}
请问高手为什么达不到书中说的评论预览，ajax发送方法及黄色闪烁的效果。请高手指教，分不多请各位帮忙一下。

解决方案 »

  1.   

    其中取消冒泡阶段的事件老是不行，直接跳到php页去了。
      

  2.   

    为什么不用JQUERY呢？写得大丢，看着都感觉头大。而且还发现不少错的地方。第一条获取XMLHTTP。连NEW都没用！xmlHttpObj = window.XMLHttpRequest();//这句没有没有new;
    直接:
      try
    {  return new XMLHttpRequest();}
     catch {
       try...
     }
    直接用JQ，前台部分修改为：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Timers, Ajax, and Fade, oh my</title>
    <link rel="stylesheet" href="events.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
      $("#clientsbt").click(function(){
         $.ajax({
       url:'addcomment.php',
       cache:false,
       type:'post',
       data:{"submitbutton":$("#save").val(),"comment":$("#comment").val()},
       success:function(data){alert(data);},
       error:function(e,y){alert(y);}
     });
    });
     });
    </script>
    </head>
    <body>
    <div id="list">
        <h1>Current Commetns:</h1>
    </div>
    <form action="addcomment.php" id="commmentform" method="post">
        <fieldset>
            <legend>Comment:</legend>        <textarea id="comment" name="comment" cols="65" rows="10"></textarea><br><br>
            <input type="submit" id="previewbutton" value="Preview" name="submitbutton" />
            <input type="submit" id="save" value="Save" name="submitbutton" />
        </fieldset>
    </form>
    <div id="preview">
    </div>
    </body>
    </html>
      

  3.   

    ID写错了：改正下：
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Timers, Ajax, and Fade, oh my</title>
    <link rel="stylesheet" href="events.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
      $("#save").click(function(){
         $.ajax({
           url:'addcomment.php',
           cache:false,
           type:'post',
           data:{"submitbutton":$("#save").val(),"comment":$("#comment").val()},
           success:function(data){alert(data);},
           error:function(e,y){alert(y);}
         });
        });
     });
    </script>
    </head>
    <body>
    <div id="list">
        <h1>Current Commetns:</h1>
    </div>
    <form action="addcomment.php" id="commmentform" method="post">
        <fieldset>
            <legend>Comment:</legend>        <textarea id="comment" name="comment" cols="65" rows="10"></textarea><br><br>
            <input type="submit" id="previewbutton" value="Preview" name="submitbutton" />
            <input type="submit" id="save" value="Save" name="submitbutton" />
        </fieldset>
    </form>
    <div id="preview">
    </div>
    </body>
    </html>
    怎么有2个提交呢？
      

  4.   

    我是按书中的例子做的，就是没有达到书中说的评论预览，ajax发送方法及黄色闪烁的效果。不知道错在哪？
      

  5.   

    evnet.cancelBubble = true;
    是不是这句写错了？
      

  6.   

    这个不是取消非IE的冒泡事件吗？可就是没效果！按提交就跳到php页去了。对了我还少传了一events.css