XMLHttpRequest使用实例-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_20137/article/details/81899702

本文介绍了一个使用XMLHttpRequest对象实现的JavaScript函数案例，该案例展示了如何通过POST请求获取服务器响应，并解析XML数据填充下拉列表。文章详细解释了跨浏览器创建XMLHttpRequest对象的方法，包括处理不同浏览器API差异的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var xmlHttp;

     function getxml(){
      if(window.XMLHttpRequest) {
          xmlHttp = new XMLHttpRequest();
          if (xmlHttp.overrideMimeType) {
              xmlHttp.overrideMimeType("text/xml");
          }
      }
      else if (window.ActiveXObject) {
          try {
              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
              try {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e) {}
          }
      }
      if (!xmlHttp) {
          window.alert("can't create XMLHttpRequest object.");
          return null;
      }
      return xmlHttp;
      }


  function getModel(){
   xmlHttp=getxml();
   var makeName = document.getElementById("makeName").value;
   var yearName = document.getElementById("yearName").value;
   var url = "<%=request.getContextPath()%>/website/index.do?method=getModel&makeName="+makeName+"&yearName="+yearName;
   xmlHttp.open("POST",url,false);
   xmlHttp.send(null);
   xmlHttp.onreadystatechange = callback();

  }

  function callback(){
   if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
     getModelResponse();
     xmlHttp = null;
    }
   }
  }

  function getModelResponse(){
   clearModelList();
   var modelNames = xmlHttp.responseXML.getElementsByTagName("modelName");

   var dlcModel = document.getElementById("modelName");
   var option = null;
   for(var i=0;i<modelNames.length;i++){
    option = document.createElement("option");
    option.appendChild(document.createTextNode(modelNames[i].firstChild.nodeValue));
    option.value = modelNames[i].firstChild.nodeValue;
    dlcModel.appendChild(option);
   }
  }

   function clearModelList(){
    var model = document.getElementById("modelName");
    while(model.childNodes.length>0){
     model.options.length = 0
    }
   }