Jump to content

XMLHttpRequest


Guest IHT

Recommended Posts

Fellow colleges!I am working on a site that would do this simple thing:"A HTML site that retrieves a small piece of information from either a .txt or .xml file." I found one perfect solution! However, it only work in IE. It's the XML Data Islands. :)I've found one another solution, which is XMLHttpRequest. As I am not very familiar with Javascript, I need a bit of help here.W3Schools have an example (click here to see the example) that works for me. However, in this example, Javascript retrieves the content of one .txt file into one DIV. In my case, I have several different .txt files that each and one of them needs to go to their own seperate DIVs.Of course, rather than having several .txt files I could have one nice XML file. Unfortunately, I haven't found a simple solution/example for this. How could I use one XML file and retrieve the data from it to different locations in the HTML site?Anyway, what kind of modifications requires the W3Schools example for me to use multiple .txt files and IDs. I tried solving it but I have limited knowledge in Javascript.How I tried to solve this:

document.getElementById('T1').innerHTML=xmlhttp.responseText

This line defines the ID. Because I need several IDs I tried something like this:

document.getElementById('T1','T2','T3').innerHTML=xmlhttp.responseText

or

document.getElementById('T1' && 'T2' && 'T3').innerHTML=xmlhttp.responseText

<body onload="loadXMLDoc('test_xmlhttp.txt')">

This line retrieves the .txt file. Because I have different .txt files, I tried to add more .txt files but didn't work.I am open to any suggestion!Thanks a lot!!

Link to comment
Share on other sites

If you have multiple text files, you're going to have to send multiple requests to get those text files - one request per file. Since you are already able to do one request and populate the contents of the text file into the div, it shouldn't be too hard for you to figure out how to do one separate request for each text file and then populate the contents of each of those files into your separate divs.Alternatively, as you suggested, you could make one request for an XML file and then use some means of parsing the XML file into the appropriate sections and displaying the contents of those sections into multiple divs. I don't play much with XML, so I'm not able to help you much there. I believe the the XMLHttpRequest returns an XML object if you use the .responseXML property (rather than the .responseText property). If so, you may be able to use the XML DOM to parse that XML object. Check out the tutorial here:http://www.w3schools.com/dom/default.aspFurthermore, the getElementById() method can only get a single element. It is not possible to pass multiple ids to that method. If you wanted to get three elements, you'd have to call that method three times:

var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");var div3 = document.getElementById("div3");

Link to comment
Share on other sites

So, I tested this out a bit and it seems to be working just fine. If I copy this file (http://www.w3schools.com/xpath/books.xml) and put it on my local web server, I can use AJAX to get the XML and can use the XML DOM to get at specific elements within the XML:

var xml = xmlhttp.responseXML;var books = xml.getElementsByTagName("book");var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.innerHTML = books[0].getElementsByTagName("title")[0].childNodes[0].data;div2.innerHTML = books[1].getElementsByTagName("title")[0].childNodes[0].data;

This puts "Everyday Italian" in the contents of div1 and "Harry Potter" in the contents of div2. There's bound to be a better way to do this, but, like I said, I don't play much with XML. Maybe someone else here will have a better idea.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...