用JavaScript实现的Ajax

用JavaScript实现的Ajax，在性能上要比使用jQuery的ajax方法快一些，，所以说一般情况下，，个人建议还是个人用javascript实现ajax请求较好，javascript主要是利用XMLHttpRequest对象发送异步请求，首先需要定义XMLHttpRequest对象：

[javascript] view plain copy 

1. <script type="text/javascript">  
2. //定义XMLHttpRequest对象  
3. if(window.XMLHttpRequest){  
4.     //兼容Mozilla、Safari等非IE浏览器  
5.     var xmlhttprequest = new XMLHttpRequest();  
6. }else{  
7.     if(window.ActiveXObject){  
8.         //兼容IE浏览器  
9.         try{  
10.             var xmlhttprequest = new ActiveXObject('Msxml12.XMLHTTP');  
11.         }catch(e){  
12.             try{  
13.                 xmlhttprequest = new ActiveXObject('Microsoft.XMLHTTP');  
14.             }catch(e){  
15.             }  
16.         }  
17.     }  
18. }  
19. </script>  

然后就是使用该对象，在这里定义了两个，一个是GET方式发送，一个是POST方式发送：

GET方式：

[javascript] view plain copy 

1. function jsAjaxGet(){  
2.     var ul = document.getElementById("jsajaxget");  
3.     //调用XMLHttpRequest对象的open方法，打开与服务器之间的同步通信连接  
4.       
5.     /** 
6.      * 建立异步连接 
7.      * xmlhttprequest.open(Method,Url,Async,User,Password)方法 
8.      * Method:表示Http方法，POST,GET,PUT,PROPFIND 
9.      * Url:参数请求的url 
10.      * Async:可选项，设置是否为异步通信， 
11.      *      默认true表示可以异步， 
12.      *      取false,表明异步发出请求之后不需要等待服务端的响应，继续执行其他操作。 
13.      * User,password:可选项，表示请求的文件需要进行服务器进行验证 
14.      */  
15.     xmlhttprequest.open("GET","Ajax_javascript.action",false);  
16.     /** 
17.      * 向服务器发送请求 
18.      * xmlhttprequest.send(null) 
19.      * 只有一个参数，该参数传递客户端发送给服务器的请求数据 
20.      * 该方法一般是在POST方式下传递参数，多个参数用&隔开 
21.      */  
22.     xmlhttprequest.send(null);  
23.       
24.     ul.innerHTML += "<li>status:" + xmlhttprequest.status + "</li>";  
25.     ul.innerHTML += "<li>statusText:" + xmlhttprequest.statusText + "</li>";  
26.     ul.innerHTML += "<li>return:" + xmlhttprequest.responseText + "</li>";  
27. }  

POST方式：

[javascript] view plain copy 

1. function jsAjaxPost(){  
2.     var ul = document.getElementById("jsajaxpost");  
3.     //调用XMLHttpRequest对象的open方法，打开与服务器之间的同步通信连接  
4.       
5.     /** 
6.      * 建立异步连接 
7.      * xmlhttprequest.open(Method,Url,Async,User,Password)方法 
8.      * Method:表示Http方法，POST,GET,PUT,PROPFIND 
9.      * Url:参数请求的url 
10.      * Async:可选项，设置是否为异步通信， 
11.      *      默认true表示可以异步， 
12.      *      取false,表明异步发出请求之后不需要等待服务端的响应，继续执行其他操作。 
13.      * User,password:可选项，表示请求的文件需要进行服务器进行验证 
14.      */  
15.     xmlhttprequest.open("POST","Ajax_javascript.action",false);  
16.     /** 
17.      * 设置请求的消息头 
18.      * application/x-www-form-urlencoded表示传递的是表单值 
19.      * 一般使用POST都必须设置此项，否则服务器无法识别传递过来的数据 
20.      * 虽然该值表示表单值，但是也可以一text/xml或者application/xml类型给服务器直接发送XML数据 
21.      * 甚至也可以application/json类型发送JavaScript对象数据 
22.      */  
23.     xmlhttprequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');  
24.     /** 
25.      * 设置User-Agent为XMLHTTP便于服务器能够识别出XMLHttpRequest异步请求 
26.      * 和其他客户端的普通请求 
27.      */  
28.     xmlhttprequest.setRequestHeader('User-Agent','XMLHTTP');  
29.        
30.     /** 
31.      * 向服务器发送请求 
32.      * xmlhttprequest.send(null) 
33.      * 只有一个参数，该参数传递客户端发送给服务器的请求数据 
34.      * 该方法一般是在POST方式下传递参数，多个参数用&隔开 
35.      */  
36.     xmlhttprequest.send("user=goomoon&com=fantong");  
37.       
38.     ul.innerHTML += "<li>status:" + xmlhttprequest.status + "</li>";  
39.     ul.innerHTML += "<li>statusText:" + xmlhttprequest.statusText + "</li>";  
40.     ul.innerHTML += "<li>return:" + xmlhttprequest.responseText + "</li>";  
41. }  

写完ajax方法之后，接下来就是定义了连接了：

[html] view plain copy 

1. <ul>  
2.     <li>  
3.         <a href="javascript:jsAjaxGet();">(GET)javascript ajax testing.</a>  
4.         <ul id="jsajaxget"></ul>  
5.     </li>  
6.     <li>  
7.         <a href="javascript:jsAjaxPost();">(POST)javascript ajax testing.</a>  
8.         <ul id="jsajaxpost"></ul>  
9.     </li>  
10. </ul>  

提交的Url是struts2实现的action类，继承自com.opensymphony.xwork2.ActionSupport，主要代码如下：

[java] view plain copy 

1. public String javascript() throws IOException{  
2.       
3.     HttpServletResponse response = ServletActionContext.getResponse();  
4.     PrintWriter out = response.getWriter();  
5.       
6.     out.print("com:"+com+",");  
7.     out.print("user:"+user+",");  
8.     out.print("the ajax testing is success");  
9.     out.flush();  
10.     out.close();  
11.     return NONE;  
12. }