原生态Ajax无刷新评论和顶踩代码（记事本打造，无验证）-优快云博客

本文介绍如何使用 JavaScript 和 AJAX 实现网页上的点赞和评论功能。通过创建 XMLHttpRequest 对象来发送异步请求，实现无需刷新页面即可更新点赞数量及添加评论。文中详细解释了请求的发送与响应处理过程。

 
           <br><script type=
           "text/javascript"
           >

 
           var 
           xhr=
           false
           ; 
          
           var 
           actionType; 
          
           //todo: 
          
           var 
           sId=1; 
          
           function 
           createXmlHttp() {
           //创建xhr对象 
          
           var 
           xhobj = 
           false
           ; 
          
           try 
           { 
          
           xhobj = 
           new 
           ActiveXObject(
           "Msxml2.XMLHTTP"
           ); 
           // ie msxml3.0+ 
          
           } 
           catch 
           (e) { 
          
           try 
           { 
          
           xhobj = 
           new 
           ActiveXObject(
           "Microsoft.XMLHTTP"
           ); 
           //ie msxml2.6 
          
           } 
           catch 
           (e2) { 
          
           xhobj = 
           false
           ; 
          
           } 
          
           } 
          
           if 
           (!xhobj && 
           typeof 
           XMLHttpRequest != 
           'undefined'
           ) {
           // Firefox, Opera 8.0+, Safari 
          
           xhobj = 
           new 
           XMLHttpRequest(); 
          
           } 
          
           return 
           xhobj; 
          
           } 
          
           window.onload=
           function
           (){ 
          
           xhr=
           new 
           createXmlHttp(); 
          
           } 
          
           function 
           doSupport(isSupport){ 
          
           xhr.open(
           "POST"
           ,
           "DoSupport.ashx"
           ,
           true
           ); 
          
           xhr.setRequestHeader(
           "Content-Type"
           ,
           "application/x-www-form-urlencoded"
           ); 
          
           xhr.onreadystatechange=watching; 
          
           if
           (isSupport){ 
          
           actionType=1; 
          
           xhr.send(
           "sId="
           +sId+
           "&isSup="
           +actionType); 
          
           } 
          
           else
           { 
          
           actionType=0; 
          
           xhr.send(
           "sId="
           +sId+
           "&isSup="
           +actionType); 
          
           }    
          
           } 
          
           function 
           watching(){ 
          
           if
           （xhr.readyState>=4）{ 
          
           if
           (xhr.status==200){ 
          
           var 
           resText=xhr.responseText; 
          
           var 
           resArr=resText.split(
           ","
           ); 
          
           if
           (resArr[0]==
           "ok"
           ){ 
          
           if
           (actionType==1){ 
          
           document.getElementById(
           "spanSup"
           ).innerHtml=resArr[1]; 
          
           } 
          
           else
           { 
          
           document.getElementById(
           "spanDisSup"
           ).innerHtml=resArr[1]; 
          
           } 
          
           } 
          
           else
           { 
          
           //todo: 
          
           }    
          
           }    
          
           } 
          
           } 
          
           function 
           AddComment(){ 
          
           xhr.open(
           "POST"
           ,
           "DoAddComments.ashx"
           ,
           true
           ); 
          
           xhr.setreadystatechange=watchingComments; 
          
           xhr.setRequestHeader(
           "Content-Type"
           ,
           "application/x-www-form-urlencoded"
           ); 
          
           var 
           urlData=
           "sId"
           +sId+
           "&txtContents="
           +document.getElementByIdea(
           "txtComments"
           ).value; 
          
           xhr.send(urlData); 
          
           } 
          
           function 
           watchingComments(){ 
          
           if
           (xhr.readyStates>=4){ 
          
           if
           (xhr.status==200){ 
          
           var 
           resText=xhr.responseText; 
          
           if
           (resText==
           "ok"
           ){ 
          
           var 
           commentsTable=document.getElementById(
           "txtComments"
           );
           //获取评论的表格对象 
          
           var 
           newRow=commentsTable.insertRow(commentsTable.row.length); 
          
           var 
           nTd1=newRow.insertCell(); 
          
           var 
           nTd2=newRow.insertCell(); 
          
           nTd1.innerHtml=nowLoginUser; 
          
           nTd2.innerHtml=document.getElementById(
           "txtComments"
           ).value; 
          
           } 
          
           else
           { 
          
           //todo: 
          
           } 
          
           } 
          
           else
           { 
          
           alert(xhr.status); 
          
           } 
          
           } 
          
           } 
          
           <script>

View Code

 1 <br><script type="text/javascript">
 2 ?
 3     var xhr=false;
 4     var actionType;
 5     //todo:
 6     var sId=1;
 7 　　function createXmlHttp() {//创建xhr对象
 8             var xhobj = false;
 9             try {
10                 xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
11             } catch (e) {
12                 try {
13                     xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
14                 } catch (e2) {
15                     xhobj = false;
16                 }
17             }
18             if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
19                 xhobj = new XMLHttpRequest();
20             }
21             return xhobj;
22         }
23     window.οnlοad=function(){
24         xhr=new createXmlHttp();
25     }
26     function doSupport(isSupport){
27         xhr.open("POST","DoSupport.ashx",true);
28         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
29         xhr.onreadystatechange=watching;
30         if(isSupport){
31             actionType=1;
32             xhr.send("sId="+sId+"&isSup="+actionType);
33         }
34         else{
35             actionType=0;
36             xhr.send("sId="+sId+"&isSup="+actionType);
37         }   
38     }
39     function watching(){
40         if（xhr.readyState>=4）{
41             if(xhr.status==200){
42                 var resText=xhr.responseText;
43                 var resArr=resText.split(",");
44                 if(resArr[0]=="ok"){
45                     if(actionType==1){
46                         document.getElementById("spanSup").innerHtml=resArr[1];
47                     }
48                     else{
49                         document.getElementById("spanDisSup").innerHtml=resArr[1];
50                     }
51                 }
52                 else{
53                     //todo:
54                 }   
55             }   
56         }
57     }
58     function AddComment(){
59         xhr.open("POST","DoAddComments.ashx",true);
60         xhr.setreadystatechange=watchingComments;
61         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
62         var urlData="sId"+sId+"&txtContents="+document.getElementByIdea("txtComments").value;
63         xhr.send(urlData);
64     }
65     function watchingComments(){
66         if(xhr.readyStates>=4){
67             if(xhr.status==200){
68                 var resText=xhr.responseText;
69                 if(resText=="ok"){
70                     var commentsTable=document.getElementById("txtComments");//获取评论的表格对象
71                     var newRow=commentsTable.insertRow(commentsTable.row.length);
72                     var nTd1=newRow.insertCell();
73                     var nTd2=newRow.insertCell();
74                     nTd1.innerHtml=nowLoginUser;
75                     nTd2.innerHtml=document.getElementById("txtComments").value;
76                 }
77                 else{
78                     //todo:
79                 }
80             }
81             else{
82                 alert(xhr.status);
83             }
84         }
85          
86     }
87  
88  
89  
90 <script>