Section B.2. Using ajax.js | Head Rush Ajax (Head First)

B.2. Using ajax.js

You can use ajax.js by adding a <script> tag to the <head> section of your web page's HTML and referring to the file's name, like this:

This is the <head> section of an HTML page.

 <head>     <title>The New and Improved Break Neck Pizza</title>     <link rel="stylesheet" type="text/css" href="breakneck.css"/>     <script type="text/javascript" src="/books/2/850/1/html/2/ajax.js"> </script> In this case, this HTML refers to ajax.js, as well as an application-specific  JavaScript file, pizza.js.     <script type="text/javascript" src="/books/2/850/1/html/2/pizza.js"> </script> This space is really important... without it, some browsers won't load the  JavaScript file you refer to with the src attribute. </head>

Now tell me again why I shouldn't use one of those fancy Ajax toolkits I keep seeing on the Web. Don't those offer all sorts of extra functionality?

Don't use what you don't understand

There's nothing wrong with using an Ajax toolkit, especially if the toolkit takes care of lots of routine and repetitive tasks. That's all ajax.js really does: it takes code that you need in every single Ajax application, and it tucks it away in a file that you can use and refer to over and over.

But, you shouldn't just grab the coolest looking toolkit you can find, stick in a <script> tag, and hope for the best. Open up the JavaScript for the toolkit and figure out what's going on. After 400 pages of asynchronous programming, that shouldn't be too much of a problem!

text-utils.js

Once you've got your asynchronous JavaScript taken care of, you're ready to tackle some DOM code. You learned about the Document Object Model in Chapter 4, but we used the text-utils.js file in several earlier chapters... before you were the DOM guru that you've since become. Here's the code for text-utils.js, along with lots of notes on how it works.

     function replaceText(el, text) { replaceText() takes an element, and replaces all the text in the element with the text you supply.       if (el != null) {         clearText(el); First, we use clearText() to get rid of any existing children.         var newNode = document.createTextNode(text);         el.appendChild(newNode); Next, we use the document object to create a new text node, and then append it to the element's child nodes.        }     }     function clearText(el) { clearText() removes all the child nodes of the element you pass to the function..        if (el != null) {          if (el.childNodes) {            for (var i = 0; i < el.childNodes.length; i++) {              var childNode = el.childNodes[i];              el.removeChild(childNode); This loops through all the child nodes, and removes each one.             } Watch out! This removes all child nodes, even if they aren't text nodes.           }        }     } getText() returns the text for the element you pass into the function.     function getText(el) {       var text = "";       if (el != null) {          if (el.childNodes) { This loops through all the child nodes of the supplied element.            for (var i = 0; i < el.childNodes.length; i++) {              var childNode = el.childNodes[i];              if (childNode.nodeValue != null) { Remember, element nodes and other non-text nodes have a null nodeValue.                text = text + childNode.nodeValue; This takes the nodeValue for all text nodes, which is the text, and adds it to any existing text.              }            }         }      }     return text; This variable will have all the text in the element when this function finishes.     }