Ajax Tips - Interactive Mouseovers Using Ajax

Document Sample
Ajax Tips - Interactive Mouseovers Using Ajax Powered By Docstoc
					                                                           Chapter 3: Getting to Know Ajax    93
               }

               if (!XMLHttpRequestObject && window.XMLHttpRequest) {
                 XMLHttpRequestObject = new XMLHttpRequest();
               }




Interactive Mouseovers Using Ajax
              Here’s another Ajax example — one that’s a little more impressive visually.
              This example, mouseover.html, appears in Figure 3-3. When you move the
              mouse over one of the images on this page, the application fetches text for
              that mouseover by using Ajax. Give it a try — just move the mouse around
              and watch the text change to match.




Figure 3-3:
  Fetching
mouseover
  text with
      Ajax.



              This one isn’t hard to implement. All you really have to do is to connect the
              getData function (which fetches text data and displays it in the <div> ele-
              ment whose name you pass) to the onmouseover event of each of the
              images you see in Figure 3-3.

              The text data for each image is stored in a different file — sandwiches.txt,
              pizzas.txt, and soups.txt — so here’s how everything works:

                   <body>

                    <H1>Interactive mouseovers</H1>

                    <img src=”Image1.jpg”
                      onmouseover=”getData(‘sandwiches.txt’,
                      ‘targetDiv’)”>

                     <img src=”Image2.jpg”
94   Part II: Programming in Ajax


                      onmouseover=”getData(‘pizzas.txt’,
                      ‘targetDiv’)”>

                    <img src=”Image3.jpg”
                      onmouseover=”getData(‘soups.txt’,
                      ‘targetDiv’)”>

                    <div id=”targetDiv”>
                      <p>Welcome to my restaurant!</p>
                    </div>

                  </body>

               No problem at all. The rest is just the same as in the first example in this
               chapter. Here’s the contents of sandwiches.txt:

                We offer too many sandwiches to list!

               And pizzas.txt:

                Toppings: pepperoni, sausage, black olives.

               And soups.txt:

                Soups: chicken, beef, or vegetable.

               So you can download text to match the image the mouse cursor is over. What
               about downloading some pictures? Unfortunately, that’s no go. Can’t do it,
               because you only have two choices with the XMLHttpRequest object — text
               or XML (which is also just text, although formatted following the XML rules).

               There might be a way to download images and other binary data by using the
               Internet Explorer XMLHttpRequest object one day, because it has an interest-
               ing property: responseStream. The responseStream property represents a
               binary data stream from the server, and that will indeed let you send binary
               data from server to the browser. The problem is that JavaScript doesn’t give
               you any way to work with such a stream. Other Microsoft Web-enabled lan-
               guages, such as Visual Basic, can work with this property, but not Internet
               Explorer’s Jscript (yet).




     Getting Interactive with
     Server-Side Scripting
               All the preceding examples in this chapter show you how to download static
               text files behind the scenes by using Ajax methods, but you can also connect
               to server-side applications. And doing that opens all kinds of possibilities

				
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