Ajax
几个简单的案例（
ajax_
用户唯一验证、
ajax_
返回
xml
数据的处理（包括分页处理）
当然开发的前提是把相应的包导入项目中（开发环境
myeclipse
）
ajax_
用户唯一验证
(servlet):
如图在
myeclipse
中的
ajax_servlet
项目中的
index.jsp
实现页面的显示：
Index.jsp
代码：
<%@
page
language
=
“java”
import
=
“java.util.*”
pageEncoding
=
“UTF-8”
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() +
“://”
+ request.getServerName() +
“:”
+ request.getServerPort()
+ path +
“/”
;
%>
<!
DOCTYPE
HTML
PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”>
<
html
>
<
head
>
<
base
href
=
”
<%=
basePath
%>
”
>
<
title
>
My JSP ‘index.jsp’ starting page
</
title
>
<
meta
http-equiv
=
“pragma”
content
=
“no-cache”
>
<
meta
http-equiv
=
“cache-control”
content
=
“no-cache”
>
<
meta
http-equiv
=
“expires”
content
=
“0”
>
<
meta
http-equiv
=
“keywords”
content
=
“keyword1,keyword2,keyword3”
>
<
meta
http-equiv
=
“description”
content
=
“This is my page”
>
<!–
<link
rel
=”
stylesheet
” type=”text/
css
”
href
=”styles.css”>
–>
<
script
type
=
“text/javascript”
src
=
”
${pageContext.request.contextPath }
/js/util.js”
></
script
>
<
script
type
=
“text/javascript”
src
=
”
${pageContext.request.contextPath }
/js/user/reg.js”
></
script
>
</
head
>
<
body
>
<
div
align
=
“center”
>
<
form
action
=
“”
>
用户名：
<
input
type
=
“text”
id
=
“uname”
/><
span
id
=
“cname”
></
span
><
br
>
密
码：
<
input
type
=
“password”
id
=
“upass”
/><
br
>
<
input
type
=
“submit”
value
=
”
注册
”
/>
</
form
>
</
div
>
</
body
>
</
html
>
然后在
webroot
下新建一个
js
文件夹，这个里面写我们的
js
代码实现
ajax
使用
在
util.js
中封装了发送和接收的请求和一些必要的代码
Util.js
文件代码：
/
/
通过
id
获取
dom
对象
function
$(id){
return
document.getElementById(id);
}
//
创建
XMLHttpRequest
对象
function
createXHR(){
//
声明
var
xhr;
//IE
浏览器
XMLHTTP
组件的名称
var
aVertion =[
“MSXML2.XMLHttp.5.0”
,
“MSXML2.XMLHttp.4.0”
,
“MSXML2.XMLHttp.3.0”
,
“MSXML2.XMLHttp.2.0”
,
“Microsoft.XMLHttp”
];
try
{
//
firefox
opera
等浏览器
xhr=
new
XMLHttpRequest();
}
catch
(ex){
for
(
var
i=0;i<aVertion.lengrh;i++){
try
{
xmlHttpRequest=
new
ActiveXObject(aVersion[i]);
return
xmlHttpRequest;
}
catch
(ex){
continue
;
}
}
}
return
xhr;
}
var
xhr = createXHR();
function
sendPost(content, url, success, fail) {
//
ajax
处理操作
//
创建
xhr
对象
//
触发器
xhr.onreadystatechange =
function
() {
if
(xhr.readyState == 4) {
if
(xhr.status == 200 || xhr.status == 304) {
success(xhr);
}
else
{
fail(xhr);
}
}
};
//
打开请求
xhr.open(
“POST”
, url,
true
);
//
设置类型
xhr.setRequestHeader(
“Content-Type”
,
“application/x-www-form-urlencoded”
);
//
发送请求
xhr.send(content);
}
然后再
user
下的
reg.js
中写要完成的代码
Reg.js
文件代码：
window.οnlοad=
function
(){
//
获取
id=”
uname
”
节点对象
var
unameDom=$(
“uname”
);
//
为节点注册
onblur
事件
unameDom.οnblur=
function
(){
//
根据
value
属性获取穿的的值并且拼成传递的参数
var
content =
“name=”
+unameDom.value;
//
封装请求的
url
路径
var
url=
“./servlet/regUser.do?time=”
+
new
Date().getTime();
sendPost(content, url, disposeSuccess, disposeFail);
function
disposeSuccess(){
$(
“cname”
).innerHTML=xhr.responseText;
}
function
disposeFail(){
alert(
”
请求失败
”
);
}
};
};
最后在
src
下建立
action
处理方法
UserAction.java
文件代码：
package www.csdn.net.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name=request.getParameter(“name”);
System.out.println(“====”+name);
response.setContentType(“text/html;charset=utf-8”);
PrintWriter out = response.getWriter();
if(“xiao”.equals(name)){
out.print(”
用户已经存在
“);//
输出文本
}else{
out.print(”
用户名可以使用
“);
}
out.flush();
out.close();
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}
这样就完成了，发布到
tomcat
服务器上然后用火狐浏览器测试就可以了
ajax_
用户唯一验证
(struts2)
如图所示；
首先实现页面的代码：
Index.jsp
文件代码：
<%@
page
language
=
“java”
import
=
“java.util.*”
pageEncoding
=
“UTF-8”
%>
<%@
taglib
uri
=
“/struts-tags”
prefix
=
“s”
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() +
“://”
+ request.getServerName() +
“:”
+ request.getServerPort()
+ path +
“/”
;
%>
<!
DOCTYPE
HTML
PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”>
<
html
>
<