1.

Solve : Javascript/AJAX: Creating customized HTTP object?

Answer»

I need to create a customized HTTP object that will get the HTTP status CODE name and number then use Javascript code to display the HTTP status.
Any kind of push in the right direction (online resources, tutorials, code snippets) would be appreciated.

HTML file:
Code: [Select]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<head>
<title>Extract Data from an XML file</title>
<style type="text/css">
 .showIt {
           font-size: 14pt;
           color: green;
           font-family: Arial, Tahoma, Verdana;
           border: thick solid;
           padding: 10px;
 
         }
 
b        { font-size: 16pt;
           color:#000000;
         }
         
</style>
 
<script type="text/javascript" LANGUAGE="javascript">
<!--The object detection code -->
var req = false;
// Is there SUPPORT for native XHR object?: IE7+, Firefox, Safari, Opera
     if (window.XMLHttpRequest)
    {
     req = new XMLHttpRequest();
     //create an XMLHttpRequest object
    }
 
     else if (window.ActiveXObject)
     //check for Version 6
    {
     req = new ActiveXObject('MSXML2.XMLHTTP.6.0');
     //create an ActiveX XMLHTTP component
    }
 
     if (!req)
    {
    req = new ActiveXObject('MSXML2.XMLHTTP');
    //fallback to version 3
    }
 
   
 
FUNCTION goXml()
{
    if (req)
    {
    //Request data to be retrieved from the SERVER
 
    req.onreadystatechange = function()
        {
                if (req.readyState == 4 && req.status == 200)
            {
            var response = req.responseXML;
            readXML(response);
                 }
 
        }
    req.open("GET", "MusicianList.xml", true);
    req.send(null);
    }
}
 
 
function readXML(response)
{
    var myResponse = response.documentElement;
    var myMusician = myResponse.getElementsByTagName("musician");
    var place = document.getElementById("showIt");
    for (var i=0; i < myMusician.length; i++)
    {
     place.innerHTML += "<b>Name: </b>" + myMusician[i].getElementsByTagName("name")[0].firstChild.nodeValue + "<br>";
     place.innerHTML += "<b>Genre: </b>" +myMusician[i].getElementsByTagName("genre")[0].firstChild.nodeValue + "<br>";
     place.innerHTML += "<b>Hitsong: </b>" +myMusician[i].getElementsByTagName("hitsong")[0].firstChild.nodeValue + "<br><br>"; 
    }
}
 
 
//-->
</script>
</head>
 
<form>
Click the button to show the list: <input type="button" name="display" id="display" value="Display the List" onClick="goXml()">
</form>
 
<p id="showIt" class="showIt"></p>
 
 
 
</body>
</html>


XML file:



[code]
<?xml version="1.0" encoding="utf-8" ?>
- <musicians>
- <musician>
  <name>Bruce Springsteen</name>
  <genre>Rock</genre>
  <hitsong>Born in the USA</hitsong>
  </musician>
- <musician>
  <name>B.B. King</name>
  <genre>Blues</genre>
  <hitsong>The Thrill Is Gone</hitsong>
  </musician>
- <musician>
  <name>Tim McGraw</name>
  <genre>Country</genre>
  <hitsong>Live Like You Were Dying</hitsong>
  </musician>
- <musician>
  <name>Gordon Lightfoot</name>
  <genre>Folk</genre>
  <hitsong>Carefree Highway</hitsong>
  </musician>
- <musician>
  <name>Glenn Miller</name>
  <genre>Big Band</genre>
  <hitsong>In The Mood</hitsong>
  </musician>
  </musicians>

     





[/code]Save yourself a lot of bother and use the Prototype js library.  Look in the API docs for Ajax.  You'll find lots of other goodies in there too that can make life in javascript a lot less painful.



Discussion

No Comment Found