Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is AJAX?
- Making requests asynchronous
- Updating the DOM with getElementById
- Reading JSON files
- Working with jQuery and AJAX
- Sending and searching JSON data
- Incorporating CSS transitions
Skill Level Intermediate
AJAX was originally designed to read data stored in a format called XML, or Extensible Markup Language. It's very much like HTML, but you get to make your own tags. So let's take a look at an example of what it takes like to read data in this format. We have a new file in our folder called data.xml. It's a file with some data in the XML format. If you know a little HTML this should be super easy to read. You can open an XML file with some browsers to see the structure a little bit better. So we have a speakers object, and inside the speaker objects we have a series of speaker objects.
So, before we do anything else, let's go back into our HTML file and change this so we're back to a div with an id of update. So, I am going to go ahead and save this, and we are going to switch to the script.js file. And now we need to change the request so that it doesn't request the data.txt document, but instead uses our XML document. I am also going to remove the lines of code that are looping through all of my elements. So now that we are linking to the XML document instead of the text document let's just take a look at the responseXML property of our request.
So let me save that and switch over to my browser, and let me hit the Back button to go back into my file, and then I'll refresh this. So, let's go into our console and take a look at what we get back. So, you see that what we get back is essentially a document with some data inside it that's pretty much like what we saw in the XML file. The XML object is really easy to go through. We can use the getElementsByTagName with an HTML or an XML document. So if we wanted to get to, say, the name of the second user, you can do something like this.
So let me go ahead and save that, and then I'll switch over to my browser and we will hit Refresh. So what we get back is the entire <name> tag of that XML node. So every element inside an XML structure is considered a node. Elements inside other elements, including the text inside an element, is also considered a node. So, to get to the text of this node we could use this. So let me save that and switch back to my browser and hit Refresh. You can see that we are getting the name. It still has quotes which is not exactly correct, but at least we are not getting the tag anymore.
So there is actually a shortcut for the first element in any array, and it's called firstChild. So if we do this, it's the same as writing child nodes zero. Refresh, we get the same results. Back over here, so if you look at what we get, it's the value in quotes, and it's not exactly the text of the node. To get that we would have to use the nodeValue property like this. So I am going to save that, switch over to my browser, refresh, and now we get just the text without the quotes. So, let's see what it will take to make a list of our speakers.
We'll have to cycle through the XML file using a for loop. When the request is ready we'll create a variable that looks for the elements with a tag of name. Then we are going to create an output variable with an unordered list. Inside this, we are going to create a loop. And here we'll go ahead and add the value of each result as list items.
Now we will send the results of all this to our div with a value of update. So let me save this and preview this in my browser, and you can see the list of all our names. So although you can read data in any format besides XML, the AJAX API was designed with an easy-to-use responseXML property that makes it a trivial matter to read and parse XML files.