PHP and MySQL Web Development 4th Ed-tqw-_darksiderg

Adding Ajax Elements to Earlier Projects
871
changes you make will then be uploaded into this new directory rather than a working
version of PHPbookmark you might already have installed.
Note
If you were to turn the registration into an Ajax-enabled area of your application, you could invoke a
JavaScript function to call a PHP script to verify that a user’s email address and username are not already in
the system. The function would also show an error if they are, and ultimately disallow the registration form
to be submitted before these errors are corrected.
Creating Additional Files
As mentioned previously, you will add new files into the existing application structure.
Although you will fill in these files as you go through the sections that follow, it is a
good idea to get your bearings before you continue.
Assume you will have at least two new files: a style sheet and a library of JavaScript
functions. Create these two files now; call them new_ss.css and new_ajax.js.The new
style sheet (new_ss.css) can be empty, because we haven’t yet defined new styles, but
the new_ajax.js file should contain the getXMLHTTPRequest() function you created
earlier in the chapter to create a new instance of the XMLHTTPRequest object in all
browsers. Although you will be adding to these files, you can upload them as is to your
web server at this time.
The next step is to add a link to both these files in one of the existing display functions
for the PHPbookmark application. Doing so will ensure that the styles from the
style sheet are always available, as are the functions from the JavaScript library. If you
recall from Chapter 27, the function that controls the output of the head element of the
HTML (among other things) is called do_html_header(), and it resides in the
output_fns.php file.
A new version of this function is shown in Listing 34.4.
Listing 34.4 Amended Version of do_html_header() Containing Links to the New
Style Sheet and JavaScript Function Libraries
function do_html_header($title) {
// print an HTML header
?>
body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
li, td { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
hr { color: #3333cc; }
a { color: #000000; }