AJAX简单示例

     以下是AJAX应用简单的一个例子:
HTML片段:

<tr>
      <td width="134"><div align="right">用户ID：</div></td>
      <td width="179"><input type="text" id="userid" name="userid2" onchange="getCustomerInfo();" /></td>
      <td width="175"> <font color="red"><div id="useridMessage"><div></font></td>
    </tr>

JS代码:

<script language="javascript" type="text/javascript">

var request = false;

//创建XMLHttpRequst对象的一个实例
function createRequest()
{
    if(window.XMLHttpRequest)
    {
        request = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        request = new ActiveXObject("Msxml2.XMLHTTP");
    }
    if (!request)
	  alert("Error initializing XMLHttpRequest!");
    
}



function getCustomerInfo() {
  createRequest();
  var userid = document.getElementById("userid").value;
  var url = "ValidateServlet?formname=sss&userid=" + escape(userid);
  request.open("GET", url, true); 
  request.onreadystatechange = updatePage;
  request.send(null);
  //alert(userid);
  // Do something with the request variable
}

function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         //alert("Server is done!");
         var respText = request.responseText.split(",");
         //alert(respText);
         //document.getElementById("useridMessage").innerHTML = respText;
         document.getElementById("useridMessage").innerText  = respText;
       }
	}
	
}

</script>

服务端SERVLET片段:

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String userid = request.getParameter("userid");
		String password1 = request.getParameter("textfield23");
		response.setContentType("text/html;charset=gbk");
		PrintWriter out = response.getWriter();
		if ("12345".equals(userid)) {
			out.println("这个ID已经被使用!");
		}
		out.flush();
		out.close();
	}

下面对这个例子进行简单讲解:
    首先在输入框输入内容,当鼠标离开的时候调用了 getCustomerInfo() 方法,而在getCustomerInfo()方法中,首先调用了createRequest()方法来创建XMLHttpRequst对象的一个实例,创建XMLHttpRequst对象相当的简单,首先要创建一个全局作用域变量request来保存这个对象的引用.然后根据不同的浏览器创建XMLHttpRequst对象.
    创建XMLHttpRequst对象后,再来看open("GET", url, true),这个方法会建立对服务器的调用,要提供调用的特定方法(GET,POST或PUT),还要提供用调用资源的URL,另外还可以传递一个BOOLEAN值,指示这个调用是异步还是同步,默认为TRUE,表示请求本质上是异步的.
    每个状态改变时都会触发onreadystatechange这个事件处理器,通常会调用一个JavaScript函数.这个例子中调用了updatePage()方法.
    服务端SERVLET在接受到GET请求后,判断userid是否合法,不合法的话输入"这个ID已经被使用!".
    在updatePage()方法中,readyState是请求的状态,有5个可取值:0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成. status是服务器的HTTP状态码(200对应OK,404对应NOT FOUND等等).
    var respText = request.responseText,取得服务器的相应,通常为一个串.也就输入错误时会取得SERVLET输出的"这个ID已经被使用!".最后通过"document.getElementById("useridMessage").innerText  = respText"把信息显示在页面面上.