XMLHttpRequestを完成させるには

Question

私は辞書のWebページの一種を作っています。私はXMLHttpRequestを動作させる方法を理解できません。 XML情報をHTMLのid = "data"の特定の場所に転送する必要があります。私はこのようにしてページを更新する必要がないようにしようとしています。コードは非常に面倒です私は謝罪します。ここ

<p> <!-- This is the button that will trigger the data appearing --> 
    <div id="div1" id="buttons" > 
     <ul class="actions"> 
      <li><input type="button" id="ajaxButton" value="Traditional" class="special"/></li> 
     </ul> 
    </div> 



<script type="text/javascript"> 
    (function() { 
     var httpRequest; 
     document.getElementById("ajaxButton").onclick = function() { 
      var title = document.getElementById("data").value; 
      makeRequest('data.xml', word) 
     } 
    }; 

     function makeRequest(url, word) { 
      httpRequest = new XMLRequst(); 

      if (!httpRequest) { 
       alert('Giving up. Cannot create an XMLHTTP instance'); 
       return false; 
      } 

      xmlhttp.onreadystatechange = contents; 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       //contents(xmlhttp); 

      httpRequst.open("GET", url); 
      httpRequest.send(); 
     } 


     function contents() { 
      if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
       if(xmlhttp.status == 200) { 
     //This is where the XML should be sent to the HTML   
     } 

</script> 
<div id="data"> 

<!-- XML DATA WILL GO HERE POTENTIALLY --> 

</div> 

そして

はhttpRequest.open（...）とhttpRequest.send間の非同期機能を含めるためにあなたの興味があるかもしれXMLファイル 'data.xmlの'

<dictionary> 
    <word> 
     <title>Ubiquitous</title> 
     <trad>This is the traditional defintion ubiquitous</trad> 
     <simp>This is the simplified defintion hopefully ubiquitous</simp> 
    </word> 

    <word> 
     <title>Lithe</title> 
     <trad>This is the traditional defintion of lithe</trad> 
     <simp>This is the simplified defintion of lithe hopefully</simp> 
    </word> 
</dictionary> 

Answer 1

です（）このような：

//f is your xml file 
var fileURL = URL.createObjectURL(f); 
httpRequest.open("GET", fileURL); 
httpRequest.onload = function(){ 
    URL.revokeObjectURL(fileURL); 
    populateHTML(this.responseXML); 
}; 
httpRequest.send(); 

そして得られるものを操作する方法populateHTML外作成：

function populateHTML(xmlDoc){ 
    var accessAtr = xmlDoc.getElementsByTagName("trad")[0].childNodes[0].nodeValue;//gets the content of first trad tag. 

    //use accessAtr to continue writing your "data" id HTML content from here. 
}