Ajax的两种编写方式

第一种：采用最基本的Ajax步骤来写：

 1  <!-- 
 2              控制显示类型的JavaScript代码//-----------Ajax
 3       -->
 4         
 5        <script type="text/javascript">
 6         
 7             //----获取Ajax内置对象
 8             function creatAjax(){
 9                 
10                 var ajax = null;
11                 try{
12                     //------IE浏览器内核内置对象
13                     ajax = new ActiveXObject("microsoft.xmlhttp");
14                 }catch(e){
15                     //------火狐浏览器内核内置对象
16                     ajax = new XMLHttpRequest();
17                 }
18                 return ajax;
19             }
20         
21             
22             
23             function changeIsShow(linkId,isShow){
24     
25                 var showTitle = isShow==1?"不显示":"显&nbsp;&nbsp;&nbsp;示";
26                 
27                 var showImg = "&nbsp;&nbsp;<IMG onclick=changeIsShow("+linkId+","+(isShow == 1?"0":"1")+") border=0 align=absMiddle src="+(isShow==1?"../Images/edit.gif":"../Images/XiuGai.gif")+" width=14 height=14>";
28                 
29                 var obAjax = creatAjax();
30                 
31                 var url = "IsShowChangeInfoServlet?linkId="+linkId+"&isShow="+isShow+"&dates="+new Date()+"";
32                 //----发送异步请求 
33                 obAjax.open("get",url);
34                 
35                 //-----发送请求体中的数据
36                 obAjax.send(null);
37                 
38                 //------监听状态
39                 obAjax.onreadystatechange = function(){
40                     
41                     //-----判断服务器是否接受数据
42                     if(obAjax.readyState == 4){
43                         
44                         //-----判断服务器是否返回数据
45                         if(obAjax.status == 200){
46                             
47                             //-----接受数据
48                             var recrive = obAjax.responseText;
49                             
50                             if(recrive == 1){
51                                 
52                                 document.getElementById("isShowInfo" + linkId).innerHTML = showTitle+showImg;
53                             }else{
54                                 
55                                 alert("对不起，修改失败！！！");
56                             }
57                         }
58                     }
59                 }           
60             }
61             
62         </script>

 

第二种：采用JQuery的Ajax的get方式（较简洁）：

 1  <script>
 2         
 3         function changeIsShowJQ(linkId,isShow){
 4             
 5             alert(111);
 6             var showTitle = isShow==1?"不显示":"显&nbsp;&nbsp;&nbsp;示";
 7                 
 8             var showImg = "&nbsp;&nbsp;<IMG onclick=changeIsShowJQ("+linkId+","+(isShow == 1?"0":"1")+") border=0 align=absMiddle src="+(isShow==1?"../Images/edit.gif":"../Images/XiuGai.gif")+" width=14 height=14>";
 9                 
10             var url = "IsShowChangeInfoServlet?linkId="+linkId+"&isShow="+isShow+"&dates="+new Date()+"";
11             
12             //---调用JQuery的Ajax的get方式
13             $.get(url,null,function(receive){
14                 
15                 if(receive == 1){
16                     
17                     $("#isShowInfo" + linkId).html(showTitle + showImg);
18                 }else{
19                     
20                     alert("对不起，修改失败");
21                 }
22             });
23         }
24         
25         
26         </script>

 

posted @ 2017-02-06 16:09  枫七七  阅读(154)  评论(0)  编辑  收藏  举报