Ajax Tips - Using GET to get XML by lelettoa

VIEWS: 17 PAGES: 4

More Info
									162   Part III: Ajax Frameworks

                Each of the two buttons calls its own URL, and has its own callback function
                to handle the text fetched from its URL. Here’s how you can implement that
                when creating the buttons, simply by using the getDataReturnText function:

                     <form>
                       <input type = “button” value = “Display Message”
                         onclick =
                            “getDataReturnText(‘data.txt’, callback1)”>
                       <input type = “button” value = “Display Message 2”
                         onclick =
                            “getDataReturnText(‘data2.txt’, callback2)”>
                     </form>

                The two callback functions just handle the fetched text and display it in the
                <div> element (named targetDiv), like so:

                     <script type = “text/javascript” src = “ajaxgold.js”></script>

                     <script language = “javascript”>
                       function callback1(text)
                       {
                         document.getElementById(“targetDiv”).innerHTML =
                           “Function 1 says “ + text;
                       }

                       function callback2(text)
                       {
                         document.getElementById(“targetDiv”).innerHTML =
                           “Function 2 says “ + text;
                       }
                     </script>

                And that’s all there is to it.



                Using GET to get XML
                What if you didn’t want to fetch text, but wanted to get XML instead? In that
                case, you can use the Ajax Gold getDataReturnXml function, which you can
                find described this way in ajaxgold.js:

                   getDataReturnXml(url, callback)
                     ** Uses the GET method to get XML from the server. **
                     Gets XML from URL, calls function named callback with that XML.
                     Use when you just want to get data from an URL, or can easily
                                      Chapter 5: Introducing Ajax Frameworks   163
         encode the data you want to pass to the server in an URL, such as
         “http://localhost/script.php?a=1&b=2&c=hello+there”.
         Example: getDataReturnXml(“http://localhost/data.txt”, doWork);
         Here, the URL is a string, and doWork is a function in your
         own script.

This function is the same as the getDataReturnText function you just saw,
but fetches XML instead of text. In other words, this function uses the
XMLHttpRequestObject object’s responseXML property, not
responseText, as you see in Listing 5-2.


Listing 5-2:      The getDataReturnXml Function
 function getDataReturnXml(url, callback)
 {
   var XMLHttpRequestObject = false;

     if (window.XMLHttpRequest) {
       XMLHttpRequestObject = new XMLHttpRequest();
     } else if (window.ActiveXObject) {
       XMLHttpRequestObject = new
        ActiveXObject(“Microsoft.XMLHTTP”);
     }

     if(XMLHttpRequestObject) {
       XMLHttpRequestObject.open(“GET”, url);

         XMLHttpRequestObject.onreadystatechange = function()
         {
           if (XMLHttpRequestObject.readyState == 4 &&
             XMLHttpRequestObject.status == 200) {
               callback(XMLHttpRequestObject.responseXML);
               delete XMLHttpRequestObject;
               XMLHttpRequestObject = null;
           }
         }

         XMLHttpRequestObject.send(null);
     }
 }

What about putting the getDataReturnXml function to work reading some
XML? For example, what about rewriting the Chapter 3 example that grabbed
XML for the two different color schemes from the scripts options1.php and
options2.php? No problem at all — you can see the Ajax Gold version,
testGetDataReturnXml.html, in Figure 5-3.
164   Part III: Ajax Frameworks




       Figure 5-3:
         A simple
             Ajax
         example.



                     The PHP scripts in this example return XML like this:

                      <? xml version = “1.0” ?>
                      <options>
                        <option>
                          red
                        </option>
                        <option>
                          green
                        </option>
                        <option>
                          blue
                        </option>
                      </options>

                     Writing this example by using the Ajax Gold function getDataReturnXml is
                     simplicity itself. You want to fetch XML from options1.php or options2.
                     php when the user clicks a button, and call a function, say getOptions1 or
                     getOptions2, that will handle that XML when it’s fetched. Easy. Here’s how
                     that looks:

                      <input type = “button” value = “Use color scheme 1”
                        onclick =
                          “getDataReturnXml(‘options1.php’, getOptions1)”>
                      <input type = “button” value = “Use color scheme 2”
                        onclick =
                          “getDataReturnXml(‘options2.php’, getOptions2)”>
                                    Chapter 5: Introducing Ajax Frameworks       165
The getOptions1 and getOptions2 functions are passed the XML that
the PHP scripts send back, and all they have to do is store the <option>
elements in an array and pass that array on to the listOptions function
developed in Chapter 3, which will list the available options in the applica-
tion’s drop-down list control. Check this out:

 function getOptions1(xml)
 {
   options = xml.getElementsByTagName(“option”);
   listOptions(options);
 }

 function getOptions2(xml)
 {
   options = xml.getElementsByTagName(“option”);
   listOptions(options);
 }

As in the original version of this example, the listOptions function lists the
color options in the drop-down list control:

         function listOptions ()
         {
           var loopIndex;
           var selectControl = document.getElementById(‘optionList’);

          for (loopIndex = 0; loopIndex < options.length; loopIndex++ )
          {
              selectControl.options[loopIndex] = new
                 Option(options[loopIndex].firstChild.data);
          }
     }

And there you have it — after the users make a selection from the color
scheme they’ve chosen, the text in the page is colored to match.

     function setOption()
     {
       document.getElementById(‘targetDiv’).style.color =
         options[document.getElementById
           (‘optionList’).selectedIndex].firstChild.data;
     }

So as you can see, using getDataReturnXml is very easy — just pass the
URL and the callback function that should be called with the XML you get. No
trouble at all. If you want to send data to the server while using the GET
method, just encode that data as part of the URL you’re accessing.

								
To top