Ajax入门例子

  //创建XMLHttpRequest对象，需要根据IE和浏览器类型创建不同的xhr对象var xhrobj;function check(){//获取文本框的值var username = document.getElementById("username").value;if(window.XMLHttpRequest){//针对firefox，Mozilla，ie7，ie8等xhrobj = new XMLHttpRequest();//针对某些特定版本的Mozilla浏览器的bug进行修正if(xhrobj.overrideMimeType){xhrobj.overrideMimeType("text/html");}}else if(window.ActiveXObject){//针对ie6，ie5//将创建xhr对象的控件名称保存在数组中var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];for(var i=0;i<activexName.length;i++){try{xhrobj = new ActiveXObject(activexName[i]);break;}catch(e){}}}/*if(!xhrobj){alert("XMLHttpRequest对象创建失败");return;}else{alert(xhrobj);}*///注册回调函数。这里只需要函数名不需要加括号xhrobj.onreadystatechange = callback;//设置连接.get连接方式，true表示采取异步方式交互xhrobj.open("GET","test?username="+username,true);//发送数据和服务器交互xhrobj.send(null);//post方式,需要自己设置请求头。//xhrobj.open("POST","test",true);//xhrobj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//xhrobj.send("username="+username);}function callback(){//判断对象的状态是否交互完成if(xhrobj.readyState==4){//判断HTTP的交互是否完成if(xhrobj.status==200){//获取服务器端返回的数据var responseText = xhrobj.responseText;//通过dom方式找到div节点var divNode = document.getElementById("result");//将数据显示在HTML页面上divNode.innerHTML = responseText;}}}

请输入用户名:<br> <input type="text" id="username"> <input type="button" value="校验" onclick="check()"> <div id="result"></div>

package com.gyb.ajax;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;public class AjaxServlet extends HttpServlet{private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {res.setContentType("text/html;charset=utf-8");PrintWriter out = res.getWriter();////Integer inte = (Integer)req.getSession().getAttribute("cacheNo");//int temp=0;//if(inte==null)//{//temp=1;//}//else//{//temp = inte.intValue()+1;//}//req.getSession().setAttribute("cacheNo", temp);//解决中文乱码，方法1：//String name = new String(req.getParameter("username").getBytes("ISO-8859-1"),"utf-8");//方法2：String name=URLDecoder.decode(req.getParameter("username"), "utf-8");if(name==null || "".equals(name)){out.println("用户名不能为空！");}else if(name.equals("gyb")){out.println("用户名"+name+"已存在，"+temp);}else{out.println("用户名"+name+"可以使用，"+temp);}}protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {doGet(req, res);}}