Ajax Tips - Setting up a Web page to read XML

Document Sample
Ajax Tips - Setting up a Web page to read XML Powered By Docstoc
					100   Part II: Programming in Ajax

                Perfect. And here’s what options2.php looks like, for the second color
                scheme:

                 <?
                 header(“Content-type: text/xml”);
                 $options = array(‘black’, ‘white’, ‘orange’);
                 echo ‘<?xml version=”1.0”?>’;
                 echo ‘<options>’;
                 foreach ($options as $value)
                 {
                     echo ‘<option>’;
                     echo $value;
                     echo ‘</option>’;
                 }
                 echo ‘</options>’;
                 ?>




                Setting up a Web page to read XML
                Now what about the important part of this application, the Ajax part? That
                takes place in options.html. Two buttons let the user select between color
                schemes, and those buttons call two functions, getOptions1 for color
                scheme 1 and getOptions2 for color scheme 2, like this:

                   <body>

                     <h1>Using Ajax and XML</h1>

                     <form>
                         <select size=”1” id=”optionList”
                            onchange=”setOption()”>
                            <option>Select a scheme</option>
                         </select>
                       <input type = “button” value = “Use color scheme 1”
                         onclick = “getOptions1()”>
                       <input type = “button” value = “Use color scheme 2”
                         onclick = “getOptions2()”>
                     </form>

                     <div id=”targetDiv” width =100 height=100>Color this text.</div>

                   </body>

                The getOptions1 function connects to the options1.php script like this:

                       var options;

                       function getOptions1()
                       {
                         if(XMLHttpRequestObject) {
                                                  Chapter 3: Getting to Know Ajax   101
               XMLHttpRequestObject.open(“GET”,
               “options1.php”, true);
               .
               .
               .
           }
       }




Handling the XML you
read from the server
When the response from the server comes back as XML, not just text,
you read that response by using the responseXML property of the XML
HttpRequest object, like so:

       var options;

       function getOptions1()
       {
         if(XMLHttpRequestObject) {
           XMLHttpRequestObject.open(“GET”,
           “options1.php”, true);

               XMLHttpRequestObject.onreadystatechange = function()
               {
                 if (XMLHttpRequestObject.readyState == 4 &&
                   XMLHttpRequestObject.status == 200) {
                   var xmlDocument = XMLHttpRequestObject.responseXML;
                   .
                   .
                   .
                 }
               }

               XMLHttpRequestObject.send(null);
           }
       }

The bold line of JavaScript in the preceding code stores the XML that
options1.php sent back in a variable named xmlDocument. How can
you handle that XML in JavaScript?

That turns out not to be hard. Just as you can use the built-in getElement
ById function to get an element by its ID value, so you can use the built-in
getElementsByTagName function to get all the elements with a certain

				
DOCUMENT INFO
Description: This ebook talks about : ajax tutorial, ajax example, ajax framework, ajax sample, ajax scripts, wiki ajax, ajax guide, ajax for beginners, learning ajax, manual ajax, xml tutorial, php ajax, ajax download, ajax chat, and ajax tips. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ to download, click the link below : crawled.blogspot.com