- 인터넷 익스플로러
var xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");
- 그외 
var xmlHttp = new XMLHttpRequest();

 
- 동기적
xmlhttp.open("GET","test.html",false);
xmlhttp.send(null);
if(xmlhttp.status == 200){
   alert(xmlhttp.responseText);
}

- 비동기적 
xmlhttp.open("GET","test.html",true);
xmlhttp.onreadystatechange=function(){
 if(xmlhttp.readyState == 4){
   if(xmlhttp.status == 200){
	 alert(xmlhttp.responseText);
     }
   }
}
    
xmlhttp.send(null);

 
xmlhttp.onreadystatechange=function(){
 if(xmlhttp.readyState == 4){
   if(xmlhttp.status == 200){
	 Document.getElementById("result").innerHTML = xmlhttp.responseText;
   }
  }
}

<table width="779" border="0" cellspacing="0" cellpadding="0" style="border:#E4E4E4 1px solid">
  <tr align="center" valign="top">
    <td style="padding:7 0 7 0">

      <table width="746" border="0" cellspacing="0" cellpadding="0">
        <tr height="25" bgcolor="#F6F6F6">
          <td width="25%" class="ta_tit" style="padding-left:10px">제품</td>
          <td width="25%" class="ta_tit" style="padding-left:10px">버전</td>
          <td width="50%" class="ta_tit" style="padding-left:10px">모듈</td>
        </tr>
        <tr valign="top">
          <td style="padding:5 0 5 10">
<!-- 이부분에서 호출을 한다.-->
            <select name="productCode" class="select" size="4" style="width:150px;" onchange="setConditionByProductPK(this.value);">
              <c:if test="${not empty requestScope.products}">
                <c:forEach var="product" items="${requestScope.products}">
                  <option value="<c:out value="${product.productCode}"/>"><c:out value="${product.productName}"/></option>
                </c:forEach>
              </c:if>
            </select>
          </td>
          <td style="padding:5 0 5 10">
            <SELECT name="versionCode" class="select" size="4" style="width:150px" multiple>
            </SELECT>
          </td>
          <td style="padding:5 0 5 10">
            <SELECT name="moduleCode" class="select" size="4" style="width:150px" multiple>
            </SELECT>
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

 function makeXmlHttpObject() {
   var xmlHttp = null;
   if (window.XMLHttpRequest) {
     xmlHttp = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
     isIE = true;
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
     alert("Your browser is not supported");
     return;
   }
  return xmlHttp;
}


function openXmlHttp(xmlHttp, method, url, flag, message) {
  xmlHttp.open(method, url, true);
  if (message == null) 
    xmlHttp.send(null);
  else 
    xmlHttp.send(message);
}


var moduleXmlHttp;
var versionXmlHttp;
var subVersionXmlHttp;

function setConditionByProductPK(productCode, isOpened) {
  var moduleBox = document.getElementById("moduleCode");
  var mainVersionBox = document.getElementById("mainVersionCode");
  var subVersionBox = document.getElementById("subVersionCode");
  if (isNull(productCode)) {
    resetComboBox(moduleBox);
    resetComboBox(mainVersionBox);
    resetComboBox(subVersionBox);
    return;
  }
  *setModuleBox(productCode);*
  }

function setModuleBox(productCode) {
  moduleXmlHttp = makeXmlHttpObject();
  moduleXmlHttp.onreadystatechange = processMinumum;
  openXmlHttp(moduleXmlHttp, "GET", context + "/bug/xml/moduleList.do?productCode=" + productCode, true, null);  
}

function processMinumum() {
  if (moduleXmlHttp.readyState == 4) {
    if (moduleXmlHttp.status == 200) {
      var f = document.SearchForm;
      var moduleBox = f.moduleCode;
      
      while (moduleBox.length > 1) {
        moduleBox.remove(1);
      }
      var names = getNodeList(moduleXmlHttp, "name"); 
      var codes = getNodeList(moduleXmlHttp, "code"); 
    
      for (var i=0; i<names.length; i++)  {
        appendToSelect(moduleBox, codes[i].firstChild.nodeValue, document.createTextNode(names[i].firstChild.nodeValue));
      } 
    } else {
      alert("There was a problem retrieving the XML data:\n" + req.statusText);
    }
  }
}

<%@ page contentType="text/xml" %><%@ taglib uri="jstl-c" prefix="c" %>
<?xml version="1.0" encoding="KSC5601" ?>
<document>
  <c:forEach var="module" items="${requestScope.modules}">
    <code><c:out value="${module.moduleCode}"/></code>
    <name><c:out value="${module.moduleName}"/></name>
  </c:forEach>
</document>

<servlet>
	<servlet-name>dwr-invoker</servlet-name>
	<display-name>DWR Servlet</display-name>
	<description>Direct Web Remoter Servlet</description>
	<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
	<init-param>
	     <param-name>debug</param-name>
	     <param-value>true</param-value>
	</init-param>
</servlet>
	
<servlet-mapping>
	<servlet-name>dwr-invoker</servlet-name>
	<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
  <allow>
        <convert converter="bean" match="com.tmax.spring.domain.Apartment"/>
        <create creator="new" javascript="ApartmentDAO" >
          <param name="class" value="com.tmax.spring.ibatis.ApartmentDAO"/>
	   <include method="findApartments"/>
            <include method="countApartments"/>
        </create>
  </allow>
</dwr>

 <script src='dwr/interface/ApartmentDAO.js'></script>
 <script src='dwr/engine.js'></script>
 <script src='dwr/util.js'></script>
.
.
.

 <script language="javascript">
 function updateTotal() {
    $("resultTable").style.display = 'none';
    var bedrooms = document.getElementById("bedrooms").value;
    var bathrooms = document.getElementById("bathrooms").value;
    var price = document.getElementById("price").value;
    ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms, price);
 }

 function loadTotal(data) {
    document.getElementById("totalRecords").innerHTML = data;
 }
</script>
.
.
.

public class AutocompleteServlet extends BaseAjaxServlet {

  /**
   * @see org.ajaxtags.demo.servlet.BaseAjaxServlet#getXmlContent(javax.servlet.http.HttpServletRequest,
   *      javax.servlet.http.HttpServletResponse)
   */
  public String getXmlContent(HttpServletRequest request, HttpServletResponse response)
      throws Exception {
    String model = request.getParameter("model");
    
    List list = getModelsByName(model);

    // Create xml schema
    return new AjaxXmlBuilder().addItems(list, "model", "make").toString();
  }
  
  public List getModelsByName(String name) {
	    List l = new ArrayList();
	    for (Iterator iter = cars.iterator(); iter.hasNext();) {
	      Car car = (Car) iter.next();
	      if (car.getModel().toLowerCase().startsWith(name.toLowerCase())) {
	        l.add(car);
	      }
	    }
	    return l;
	  }
  
  static final List cars = new ArrayList();

  static {
    cars.add(new Car("Ford", "Escape"));
    cars.add(new Car("Ford", "Expedition"));
    cars.add(new Car("Ford", "Explorer"));
    cars.add(new Car("Ford", "Focus"));
    cars.add(new Car("Ford", "Mustang"));
    cars.add(new Car("Ford", "Thunderbird"));

    cars.add(new Car("Honda", "Accord"));
    cars.add(new Car("Honda", "Civic"));
    cars.add(new Car("Honda", "Element"));
    cars.add(new Car("Honda", "Ridgeline"));

    cars.add(new Car("Mazda", "Mazda 3"));
    cars.add(new Car("Mazda", "Mazda 6"));
    cars.add(new Car("Mazda", "RX-8"));
  }
}

 <servlet>
    <servlet-name>autocomplete</servlet-name>
    <servlet-class>com.tmax.spring.servlet.AutocompleteServlet</servlet-class>
    <load-on-startup>3</load-on-startup>
</servlet>
	
<servlet-mapping>
    <servlet-name>autocomplete</servlet-name>
    <url-pattern>/autocomplete.view</url-pattern>
 </servlet-mapping>

<%@ page contentType="text/html; charset=euc-kr" errorPage="/jsp/error/jspError.jsp" %>
<%@ include file="/jsp/include/taglibs.jsp" %>

<html>
  <script type="text/javascript" src="${ctx}/js/prototype-1.3.1.js"></script>
  <script type="text/javascript" src="${ctx}/js/ajaxtags-1.1.5.js"></script>
  <link type="text/css" rel="stylesheet" href="${ctx}/css/ajax.css" />

<script language="javascript">
</script>  
 
<form id="carForm">
  <fieldset>
    <legend>Enter Car Model</legend>
    <p>Available values start with letters: 'A', 'C', 'E', 'F', 'M', 'R', 'T'</p>

    <label for="model">Name:</label>
    <input id="model" name="model" type="text" size="30" class="form-autocomplete" />

    <label for="make">Make:</label>
    <input id="make" name="make" type="text" size="30" />
  </fieldset>
</form>

<ajax:autocomplete
  source="model"
  target="make"
  baseUrl="autocomplete.view"
  className="autocomplete"
  parameters="model={model}"
  progressStyle="throbbing"
  minimumCharacters="1" />
 
</html>