上次有人留言说需要一个无刷新ajax留言本,下午花了点时间做了个,当然,只是一个基本的留言,很多判断没有做,需要自己去补充.以及还有很多UI效果没有写,所以看起来只是个留言的东西.如果想扩充,可以加评分,留言排序,留言等级评判等等.

由于写的时间很短,也没认真检查,有问题或者简易就留言吧(其实Z-blog的留言也是采用ajax无刷新留言)

ajax留言本核心代码:(已经写了注释,如果不明白,先去看相关帮助,如:DOM,XMLHTTP这些文档帮助

function add_msg(){   
    var guest_msg=document.getElementById("guest_msg").value;//取得留言内容   
    var guest_name=document.getElementById("guest_name").value;//取得留言者姓名   
    var guest_email=document.getElementById("guest_email").value;//取得留言邮件      
    if(guest_msg==""){alert("请输入留言");return;}   //留言空返回   
    if(guest_name==""){alert("请输入名字");return;}  //名字空返回   
    if(guest_email==""){alert("请输入邮件");return;}//邮件空返回   
    var reEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮件正则不匹配返回   
    if(!reEmail.test(guest_email)){alert("邮箱错误");return;}          
        var add_msg=function(){//添加信息到页面函数   
        var msg_box=document.getElementById("msg_box");//留言放的框   
        var msg=document.createElement("ul");//留言全部用ul存放   
        var li_msg=document.createElement("li");//留言内容,li存放   
        var li_name=document.createElement("li");//留言者名字,li存放   
        var li_email=document.createElement("li");//留言邮件,li存放   
        msg.appendChild(li_name);//留言名字节点添加到留言框   
        msg.appendChild(li_email);//留言邮件节点添加到留言框   
        msg.appendChild(li_msg);//留言内容节点添加到留言框   
        li_name.innerHTML="作者: "+guest_name;   
        li_email.innerHTML="email: "+guest_email;   
        li_msg.innerHTML="内容: "+guest_msg;   
        msg_box.insertBefore(msg,msg_box.firstChild);//把信息插入   
        }   
    var notice=document.getElementById("notice")   
    var xmlhttp;//创建xmlhttp对象   
    try{xmlhttp=new XMLHttpRequest();}   
    catch(e){xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}   
    xmlhttp.onreadystatechange=function(){   
    if (xmlhttp.readyState==4){   
        if (xmlhttp.status==200){//ajax成功   
            var data=xmlhttp.responseText;//获取返回数据   
            if(data==1){add_msg();notice.innerHTML="留言已经添加";}//若返回值为1,提示   
            else{notice.innerHTML="添加失败";}//若返回值不为1,提示   
        }   
        else{notice.innerHTML="添加失败";}//ajax失败   
    }   
    else{notice.innerHTML="正在添加...";}//正在提交   
    }   
    xmlhttp.open("post", "submit.asp", true);                       //xmlhttp的open方法   
    xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');       xmlhttp.send("guest_name="+escape(guest_name)+"&guest_email="+escape(guest_email)+"&guest_msg="+escape(guest_msg)); //xmlhttp的send方法   
    } 

下载地址：ajax-guestbook.rar （9.63 KB）