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

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方式:

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方式:

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方法之后,接下来就是定义了连接了:

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,主要代码如下:

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 }

最后输出结果图为:

当然这只是利用JS实现Ajax的初级版本,,因为本人还在学习中,,有不及之处还望请各位博友批评指正。。。