AJAX and PHP

Client-Side Techniques with Smarter JavaScript
JavaScript and the Document Object Model
As mentioned in Chapter 1, JavaScript is the heart of AJAX. JavaScript has a similar syntax
to the good old C language. JavaScript is a parsed language (not compiled), and it has some
Object-Oriented Programming (OOP) capabilities. JavaScript wasn't meant for building large
powerful applications, but for writing simple scripts to implement (or complement) a web
application's client-side functionality (however, new trends are tending to transform JavaScript
into an enterprise-class language—it remains to be seen how far this will go).
JavaScript is fully supported by the vast majority of web browsers. Although it is possible to
execute JavaScript scripts by themselves, they are usually loaded on the client browsers together
with HTML code that needs their functionality. The fact that the entire JavaScript code must arrive
unaltered at the client is a strength and weakness at the same time, and you need to consider these
aspects before deciding upon a framework for your web solution. You can find very good
introductions to JavaScript at the following web links:
30
• http://www.echoecho.com/javascript.htm
• http://www.devlearn.com/javascript/jsvars.html
• http://www.w3schools.com/js/default.asp
Part of JavaScript's power on the client resides in its ability to manipulate the parent HTML
document, and it does that through the DOM interface. The DOM is available with a multitude of
languages and technologies, including JavaScript, Java, PHP, C#, C++, and so on. In this chapter,
you will see how to use the DOM with both JavaScript and PHP. The DOM has the ability to
manipulate (create, modify, parse, search, etc.) XML-like documents, HTML included.
On the client side, you will use the DOM and JavaScript to:
• Manipulate the HTML page while you are working on it
• Read and parse XML documents received from the server
• Create new XML documents
On the server side, you can use the DOM and PHP to:
• Compose XML documents, usually for sending them to the client
• Read XML documents received from various sources
Two good introductions to DOM can be found at http://www.quirksmode.org/dom/intro.html
and http://www.javascriptkit.com/javatutors/dom.shtml. Play a nice DOM game here:
http://www.topxml.com/learning/games/b/default.asp. A comprehensive reference of the
JavaScript DOM can be found at http://krook.org/jsdom/. The Mozilla reference for the JavaScript
DOM is available at http://www.mozilla.org/docs/dom/reference/javascript.html.
In the first example of this chapter, you will use the DOM from JavaScript to manipulate the
HTML document. When adding JavaScript code to an HTML file, one option is to write the
JavaScript code in a element within the element. Take the following HTML file
for example, which executes some simple JavaScript code when loaded. Notice the document
object, which is a default object in JavaScript that interacts with the DOM of the HTML page.
Here we use its write method to add content to the page:
www.it-ebooks.info