一个最基本的Ajax应用:验证用户名的例子:
首先建立一个web project: ajaxTest
webRoot\js(myjs.js)
webRoot\jsp(test1.jsp)
com.zxr.servlet中是Servlet:ServiceServlet.java
test1.jsp:
ServiceServlet.java
web.xml
myjs.js
然后在IE或FireFox下输入:http://localhost:8080/ajaxTest/即可测试
对于中文乱码,我在Opera浏览器下测试未成功,请大家多指教,以解吾之惑....
首先建立一个web project: ajaxTest
webRoot\js(myjs.js)
webRoot\jsp(test1.jsp)
com.zxr.servlet中是Servlet:ServiceServlet.java
test1.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
....
<body>
<li>用户名校验小实验</li>
<hr/>
<input id="userName" type="text"/>
<input type="button" value="提交" onclick="checkvalidate();"/>
<div id="propmt"></div>
</body>
.....
ServiceServlet.java
package com.zxr.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang.StringUtils;
/**
* 2010-03-28
* @author zxr
*
*/
public class ServiceServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
StringBuilder msg=new StringBuilder();
String name=request.getParameter("name");
//name=new String(name.getBytes("ISO-8859-1"),"UTF-8");
name=URLDecoder.decode(name,"UTF-8");
if(StringUtils.isEmpty(name)){
msg.append("用户名不能为空");
}else{
if(StringUtils.equals(name, "zxr")){
msg.append("对不起,此用户["+name+"]已存在,请使用别的名称!");
}else{
msg.append("恭喜你,此用户名:["+name+"]可以使用!");
}
}
out.print(msg.toString());
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
web.xml
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>ServiceServlet</servlet-name>
<servlet-class>com.zxr.servlet.ServiceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServiceServlet</servlet-name>
<url-pattern>/servlet/ServiceServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>jsp/test1.jsp</welcome-file>
</welcome-file-list>
myjs.js
var xmlhttprequest;
function checkvalidate(){
//获取页面dom节点的元素的值
//解决中文乱码问题:方法一:页面端发出 数据做一次encodeURI,服务器端使用new String(xxx.getBytes("ISO-8859-1"),"UTF-8");
//方法二:页面端做两次encodeURI,服务器端使用URLDecoder.decode(xxx,"UTF-8");即可(推荐使用)
var username=encodeURI(encodeURI(document.getElementById("userName").value));
//alert(username);
//创建XMLHttpRequest对象
//针对不同浏览器,写出不同的创建方式
if(window.XMLHttpRequest){
//针对FirFox, Mozillar,Opera, Safari,IE7,IE8
xmlhttprequest=new XMLHttpRequest();
//针对特定的Mozillar浏览器进行bug修正
if(xmlhttprequest.overrideMimeType){
xmlhttprequest.overrideMimeType=("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,IE5
var activeName=["MSXML@.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; i<activeName.length; i++){
try{
//取出一个插件名进行创建,如果成功就终止循环,反正继续循环试图创建
xmlhttprequest=new ActiveXObject(activeName[i]);
break;
}catch(e){}
}
}
//确认XMLHttpRequest对象创建
if(!xmlhttprequest){
alert("创建失败");
return ;
}else{
alert("恭喜你创建成功!"+xmlhttprequest);
}
//注册回调函数( 注意只需函数名,而不需要())
xmlhttprequest.onreadystatechange=callback;
//设置连接信息
//第一参数:http请求的方式,支持所有http请求方式,主要使用get和post
//第二参数:请求的服务器端url地址,get方式参数也在其中
//第三参数:是同步还是异步交互 : false:同步,true:异步
xmlhttprequest.open("GET", "servlet/ServiceServlet?name="+username, true);
//发送数据,开始和服务器端进行交互
xmlhttprequest.send(null);
}
//回调函数
function callback(){
//接受响应数据
//判断对象的状态是否交互 完成
if(xmlhttprequest.readyState==4){
//判断http交互是否成功
if(xmlhttprequest.status==200){
//获取服务器端返回的数据
alert(xmlhttprequest.responseText);
var respText=xmlhttprequest.responseText;
//将数据 显示在页面上
var divNode=document.getElementById("propmt");
divNode.innerHTML=respText;
}
}
}
然后在IE或FireFox下输入:http://localhost:8080/ajaxTest/即可测试
对于中文乱码,我在Opera浏览器下测试未成功,请大家多指教,以解吾之惑....