下面就ajax入门做了一个简单的实例:
下面我们就开始吧

第一步:导入我们需要的jqurery.js在这里和我们myeclipse中有所不同需要我们去到工程的目录下把jqurery.js复制在我们在web目录新建的jslib目录中,这个目录用来存放我们的.js文件 就是javascript脚本 jqurery.js封装了许多的js我们只需去调用就行

第二步:编写一个Servlet 在src目录中新建一个AJAXServer

public class AJAXServer extends HttpServlet{ 


 protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { 

 doGet(httpServletRequest, httpServletResponse); 

 } 


 protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { 

 try{ 

// request.setCharacterEncoding("UTF-8"); 

// response.setContentType("text/html;charset=gb18030"); 


 httpServletResponse.setContentType("text/html;charset=utf-8"); 

 PrintWriter out = httpServletResponse.getWriter(); 


 Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total"); 

 int temp = 0; 

 if (inte == null) { 

 temp = 1; 

 } else { 

 temp = inte.intValue() + 1; 

 } 

 httpServletRequest.getSession().setAttribute("total",temp); 


 //1.取参数 

 String old = httpServletRequest.getParameter("name"); 

 //String name = new String(old.getBytes("iso8859-1"),"UTF-8"); 

 String name=null; 

 if(!old.equals("") && (old != null)) 

 { 

 name = URLDecoder.decode(old,"UTF-8"); 

 } 

 //2.检查参数是否有问题 

 if(old == null || old.length() == 0){ 

 out.println("用户名不能为空"); 

 } else{ 

// String name = URLDecoder.decode(old,"UTF-8"); 

// byte[] by = old.getBytes("ISO8859-1"); 

// String name = new String(by,"utf-8"); 

// String name = URLDecoder.decode(old,"utf-8"); 

 //3.校验操作 

// String name = old; 

 if(name.equals("liyong")){ 

 //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户 

 //写法没有变化,本质发生了改变 

 out.println("用户名[" + name + "]已经存在,请使用其他用户名, " + temp); 

 } else{ 

 out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册, " + temp); 

 } 

 } 

 } catch(Exception e){ 

 e.printStackTrace(); 

 } 

 } 

} 


第三步:编写一个ajax.html提供用户提交数据 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

 "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

 <title></title> 

 <script type="text/javascript" src="jslib/jquery.js"></script> 

 <script type="text/javascript" src="jslib/verify1.js"></script> 

</head> 

<body> 

 ajax验证输入用户名:<br/> 

 <input type="text" id="userName" > 

 <input type="button" value="校验" οnclick="verify()"> 

 <div id="result"></div> 

</body> 

</html> 


第四步:编写上面需要的verify() js函数 


//定义用户名校验 

 function verify() 

 { 

 //通过ID找到这个节点 

 var jQuryObj=$("#userName"); 

 //获取这个节点属性值 

 var username=jQuryObj.val(); 

 //使用jQuery的XMLHTTPrequest对象的get请求的封装,代码运行到这里会继续向下运行 

 //当服务器有数据返回的时候就去回调这个回调函数callback这里必须是函数名不能带有参数 

 $.get("AJAXServer?name="+username,null,callback); 

// alert(username); 

 } 

 function callback(data) 

 { 

 //alert("服务器数据返回"); 

 //alert(data); 

 var resultObj=$("#result"); 

 resultObj.html(data) 

 } 


第五步:部署运行...