AJAX学习手记

导读：
　　今天在各种资源的帮助下，做了一个小AJAX程序。共享出来，以备后用。其中很多都是不完善的，还望指点。
　　程序实现一个功能，在文本框内容变化的时候，下面显示不同的内容。
　　 1,先做了一个返回XML文件的JSP。
　　data.jsp
　　

<% ... @ page language="java" contentType="text/xml; charset=UTF-8" import="java.util.*" pageEncoding="UTF-8" %><% ...

//获得传入的参数值
    String name = request.getParameter("name");
 out.println("<?xml version="1.0" encoding="UTF-8"?>");
 out.println("<results>");
 if ("a".equals(name)){
  out.println("<rs>my1</rs>");
 }else{
  if("b".equals(name)){
 out.println("<rs>my2</rs>");
 }else{
 out.println("<rs>my3</rs>");
 }}
 out.println("</results>"); 
%>

　　在传入的参数值不同的情况下，返回不同的XML。
　　传入a情况下，返回
　　

<? xml version="1.0" encoding="UTF-8"  ?>  
< results >
< rs > my1 </ rs >  
</ results >

　　
　　传入b情况下，返回
　　

<? xml version="1.0" encoding="UTF-8"  ?>  
< results >
< rs > my2 </ rs >  
</ results >

　　传入c情况下，返回
　　

<? xml version="1.0" encoding="UTF-8"  ?>  
< results >
< rs > my3 </ rs >  
</ results >

　　 2,主体部分。
　　先看一下整个JSP文件。
　　MyAjax.jsp

<% ... @ page language="java" import="java.util.*" pageEncoding="GB18030" %>
< html >
   < head >
    
     < title > My JSP 'MyAjax.jsp' starting page </ title >

  < script  type ="text/javascript" > ...
  function ajaxtest()...{

//新建XMLHttpRequest对象

//适合firefox之类
   if (window.XMLHttpRequest)
   ...{
    var myXmlhttp = new XMLHttpRequest();
   }else...{

//适全IE的
    var myXmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   }
   var name = document.getElementById("text1");

//打开XMLHttpRequest对象
   myXmlhttp.open("GET","http://localhost:8080/jsptest/data.jsp?name="+name.value,true);

//下面这个用法，见注1
   myXmlhttp.onreadystatechange = function() ...{
    if(myXmlhttp.readyState == 4&&myXmlhttp.status == 200)...{
     DoMyXML(myXmlhttp);
    }
   }
   myXmlhttp.send(null);
  }
  function DoMyXML(xmlObj) ...{
      var rtnvalue;
   var xmlDoc = xmlObj.responseXML;
   rtnvalue=xmlDoc.getElementsByTagName("rs")[0].firstChild.data;
   text2.innerHTML = rtnvalue;
   
  }
  </ script >

   </ head >
  
   < body >
    < table >
     < tr >
      < td >
      < input  type ="text"  name ="text1"  id ="text1"  onBlur ="ajaxtest();" >
      < div  id ="text2" ></ div >
      </ td >
     </ tr >
    </ table >
   </ body >
</ html >

　　 注1：
　　事件：每当readyState的值发生改变时，就是产生了一个事件。事件处理的函数句柄：我们可以选择在事件产生以后，如何处理。这个处理的函数，我们必须告诉这个XMLHttpRequest对象。这里借用了C语言中的函数句柄的概念。将这个函数的句柄，在JavaScript中也就是这个函数的名称，赋值给XMLHttpRequest对象中的onreadystatechange，就可以了。（注：这里其实是创建了一个匿名的函数，onreadystatechange只是属性名称，而不是函数名称。函数在JavaScript中是第一等的对象，可以赋值给任何变量。Java开发人员尤其需要注意！）