用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的初级版本,,因为本人还在学习中,,有不及之处还望请各位博友批评指正。。。