jsp页面用XMLHttpRequest简单的异步调用

例子程序步骤：

a，创建一个新的XMLHttpRequest--function newXMLHttpRequest()

b，创建DOM事件处理器--function onContinentChanged(selectCont, inForm)

c，创建回调函数callback--function displayNations(xmlData)

d，创建封装回调函数的函数--function getReadyStateHandler(requestFromServer, responseXMLHandler)

e，工具函数--IE下创建新的Dom文档--function createDomDoc()

前面五步在jsp接受的javaScript函数;

处理流程是 b捕html页面事件，a创建新XMLHttpRequest，a利用c往XMLHttpRequest里这塞url，和回调函数，还有其它参数;由于沙箱原理，所有由XMLHttpRequest访问的url都不会离开本页面的根地址;

 

具体函数内容在下面

a~~~~~~新建XMLHttpRequest

function newXMLHttpRequest() {
  if (window.XMLHttpRequest) {
   request = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   try {
    request = new XMLHttpRequest("Msxml2.XMLHTTP");
   } catch (e1) {
    try {
     request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
     //create XMLHttpRequest failed
    }
   }
  }
  return request;
 }

b~~~~~html页面事件处理器

function onContinentChanged(selectCont, inForm) {
  if (selectCont.options[selectCont.selectedIndex].value == 'none')
   return;
  newXMLHttpRequest();
  var contId = selectCont.options[selectCont.selectedIndex].value;

//组装url, 和加入参数，excape（）函数为javascript需要的特别字符转换
  var url = "selectContinent.do?contId=" + escape(contId);
  request.open("GET", url, true);//true为异步调用，false为同步
  var handlerFunction = getReadyStateHandler(request, displayNations);
  request.onreadystatechange = handlerFunction; //设置回调函数
  //request.onreadystatechange = displayNations(); //设置回调函数
  request.send(null);
 }

c ~~~~~~callBack

function displayNations(xmlData) {
  var selectNation = document.getElementById("nation");
  var domDoc = createDomDoc();
  domDoc.loadXML(xmlData);

  var nations = domDoc.getElementsByTagName("nation")
  //window.alert("in displayNations");
  var arNations = new Array(new Option("请选择", "none"));
  for ( var i = 0; i < nations.length; i++) {
   var nationId = nations.item(i).getAttribute("id");
   var nationName = nations.item(i).getAttribute("name");
   var optNation = new Option(nationName, nationId);
   //window.alert("从server取得的国家id和国家名" + nationId + " " + nationName);
   arNations[i + 1] = optNation;
  }
  selectNation.disable = false;
  for ( var j = 0; j < arNations.length; j++) {
   selectNation.options[j] = arNations[j];
  }
  selectNation.disabled = false;
 }

d~~~~~~~~封装callBack

function getReadyStateHandler(requestFromServer, responseXMLHandler) {
  return function() {
   if (requestFromServer.readyState == 4) {
    if (requestFromServer.status == 200) {
     //window.alert("200 in getReadyStateHandler" + requestFromServer.responseText)
     responseXMLHandler(requestFromServer.responseText);
    }
   } else {
    windwo.alert("在getReadyStateHandler里执行... 不是4也不是200")
    return;
   }
  }
 }

e~~~~~Util

 function createDomDoc() {
  var domDoc = false;
  try {
   domDoc = new ActiveXObject("Msxml.DOMDocument");
  } catch (e) {
   window.alert("创建domDoc异常")
   domDoc = false;
  }
  return domDoc;
 }

 

servlert~~~~~处理异步调用

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  String contId = req.getParameter("contId");

 // 取得用户选择的洲对应的回家组,根据服务类
  Continent cont = GeographyService.getContinentById(contId);

  Element elNatinons = null;
  try {
   elNatinons = cont.toXML();
  } catch (RuntimeException e) {
   System.out.println("servlet异常..");
   e.printStackTrace();
  }
  Document docCont = new Document(elNatinons);
  resp.setContentType("application/xml");
  new XMLOutputter().output(docCont, resp.getWriter());
 }

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  this.doPost(req, resp);
 }