How to complete XMLHttpRequest - ajax

Question

I'm making a type of dictionary webpage and I cannot figure out how to get the XMLHttpRequest working. I need to transfer XML information to a specific place in the html, id="data". I'm trying to do it this way so that the page won't have to refresh. The code is very messy I apologize.
<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>
And here is the XML file '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

May be of your interest to include an asynchronous function between httpRequest.open(...) and httpRequest.send() like this:
//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();
Then create outside a method populateHTML to manipulate what is obtained:
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.
}