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