JSFiddle - React, Tailwind, and code Playground
by Yogesh Gupta
HTML
<!DOCTYPE html>
<!-- Fig. 16.8: PullImagesOntoPage.html -->
<!-- Image catalog that uses Ajax to request XML data asynchronously. -->
<html>
<head>
<meta charset="utf-8">
<title> Pulling Images onto the Page </title>
<style type = "text/css">
li { display: inline-block; padding: 4px; width: 120px; }
img { border: 1px solid black }
</style>
<script>
var asyncRequest; // variable to hold XMLHttpRequest object
// set up and send the asynchronous request to get the XML file
function getImages( url )
{
// attempt to create XMLHttpRequest object and make the request
try
{
asyncRequest = new XMLHttpRequest(); // create request object
// register event handler
asyncRequest.addEventListener(
"readystatechange", processResponse, false);
asyncRequest.open( "GET", url, true ); // prepare the request
asyncRequest.send( null ); // send the request
} // end try
catch ( exception )
{
alert( "Request Failed" );
} // end catch
} // end function getImages
// parses the XML response; dynamically creates an undordered list and
// populates it with the response data; displays the list on the page
function processResponse()
{
// if request completed successfully and responseXML is non-null
if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 &&
asyncRequest.responseXML )
{
clearImages(); // prepare to display a new set of images
// get the covers from the responseXML
var covers = asyncRequest.responseXML.getElementsByTagName(
"cover" )
// get base URL for the images
var baseUrl = asyncRequest.responseXML.getElementsByTagName(
"baseurl" ).item( 0 ).firstChild.nodeValue;
// get the placeholder div element named covers
var output = document.getElementById( "covers" );
// create an unordered list to display the images
var imagesUL = document.createElement( "ul" );
// place images in unordered list
for ( var i = 0; i < covers.length; ++i )
{
var cover = covers.item( i ); // get a cover from covers array
// get the image filename
var image = cover.getElementsByTagName(...