# AJAX and PHP

## Building Responsive Web Applications

(last update: June 27, 2006)

Dear reader,

Thank you for buying AJAX and PHP: Building Responsive Web Applications!

We hope you'll find this book helpful for your web development projects! For additional resources related to this book, visit the book's mini-site at http://ajaxphp.packtpub.com, or Cristian Darie's AJAX PHP resource page.

If you have any problems with the book, don't hesitate to contact Packt Publishing or the book's authors - we'll do our best to get back to you with a helpful answer!

Happy reading!

The Authors

# Code Download Release Notes

Please see Appendix A for environment preparation instructions. Let me know if you think I should include additional details here.

##

# Free PDF Chapters

This code download contains six chapters in PDF format:

AJAX and the Future of Web Applications is Chapter 1 of the book. You can have it here in PDF format.

AJAX Chat and JSON is an updated version of Chapter 5 (AJAX Chat), which uses (and teaches a little bit of) JSON instead of XML.

AJAX Whiteboard mini-book is a case study that teaches you how to implement efficient client-server communications when heavy realtime communication is needed. The JavaScript/DOM drawing is interesting as well, but for a production scenario we'd recommend using another technology for drawing, such as SVG (as shown in another case study in the book).

Preparing Your Working Environment (Appendix A) guides you to installing and configuring Apache, PHP, MySQL, and prepare the database used in the demos. You will need this in case you'll decide to go through the Whiteboard case study.
Using Smart Tools to Write Better Code (Appendix B) introduces you to a number of tools that can make your AJAX and PHP programming/debugging life easier.
Advanced XML: XPath and XSLT (Appendix C) quickly introduces you XSLT and XPath, as these technologies are used in some of the book's case studies.

# Errata & Notes

## Chapter 1 (AJAX and the Future of Web Applications)

No errata yet, but just a quick note to make sure you know the code for this quickstart example isn't bulletproof. Known problems (covered in the later chapters) are:

- escaping isn't perfect, try typing "yoda < cristian" and you'll see what I mean
- the code doesn't automatically use the best XMLHttpRequest version available, or the native Internet Explorer 7 object

(Please don't disregard the warning on page 18. If at any point you feel the initial example is too challenging, please just skip to Chapter 2.)

## Chapter 2 (AJAX Client-Side Techniques)

The URL shown in Figure 2.5 should be http://localhost/ajax/foundations/csstest/csstest.html instead of http://localhost/ajax/foundations/css/csstest.html, to correctly match the instructions in the book.

## Chapter 3 (AJAX PHP Server-Side Techniques)

1. On page 91, this block of code:

// using setTimeout and clearTimeout
timerId = window.setTimeout("function()", interval_in_milliseconds);
window.clearTimeout(timeId);
// using setInterval and clearInterval
timerId = window.setInterval("function()", interval_in_milliseconds);
window.clearInterval(timeId);

should read:

// using setTimeout and clearTimeout
timerId = window.setTimeout("function()", interval_in_milliseconds);
window.clearTimeout(timerId);
// using setInterval and clearInterval
timerId = window.setInterval("function()", interval_in_milliseconds);
window.clearInterval(timerId);

2. Some hosting providers disallow using file_get_contents(), but provide the cURL library instead. (Suggestion & code submitted by Amit Lamba)

This problem would affect the ProxyPing, SmartProxyPing, and Friendly examples. Instead of:

<?php
$file_contents = file_get_contents('http://example.com/');
// display file
echo $file_contents;
?>

Use this:

    <?php
    $ch = curl_init();
    $timeout = 5; // set to zero for no timeout
    curl_setopt ($ch, CURLOPT_URL, 'http://example.com');
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

    curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $file_contents = curl_exec($ch);
    curl_close($ch);
    // display file
    echo $file_contents;
    ?>

## Chapter 4 (AJAX PHP Form Validation)

No errata has been recorded yet.

## Chapter 5 (AJAX PHP Chat)

The ideal way to make sure all characters get correctly transferred from the server to the client without breaking any special chars or unicode characters is to use the htmlspecialchars function to prepare the fields, and enclose them into CDATA sections. Make this change in chat.class.php:

public function retrieveNewMessages($id=0)
{
...
...
// loop through all the fetched messages to build the result message
while ($row = $result->fetch_array(MYSQLI_ASSOC))
{
$id = $row['chat_id'];
$color = htmlspecialchars ($row['color']);
$userName = htmlspecialchars ($row['user_name']);
$time = htmlspecialchars ($row['posted_on']);
$message = htmlspecialchars ($row['message']);
$response .= '<id>' . $id . '</id>' .
'<color><![CDATA[' . $color . ']]></color>' .
'<time>' . $time . '</time>' .
'<name><![CDATA[' . $userName . ']]></name>' .
'<message><![CDATA[' . $message . ']]></message>';
}
...
...
}

(the time field doesn't need to be enclosed in CDATA tags because it's generated on the server and we don't expect it to receive bad values)

## Chapter 6 (AJAX PHP Suggest & Autocomplete)

No errata has been recorded yet.

## Chapter 7 (AJAX PHP SVG Realtime Chart)

No errata has been recorded yet.

## Chapter 8 (AJAX PHP Grid)

I. Bulletproofing your grid and updating it to support unicode data

1. Use htmlspecialchars instead of htmlentities in grid.class.php to correctly preserve the entered data. Modify line 53 of grid.class.php like this:

$this->grid .= '<' . $name . '>' .
htmlspecialchars($val) .
'</' . $name . '>';

2. Modify line 49 of grid.php like this:

echo '<?xml version="1.0" encoding="UTF-8"?>';

3. Modify line 319 of grid.js (function createUpdateUrl) like this:

case "textarea":
str += grid.elements[i].name + "=" +
encodeURIComponent(grid.elements[i].value) + "&";

4. After making these changes, your grid will support UTF8 encoded text. If you encounter problems, you need to check that (1) the user's operating system supports the character set displayed by the grid, and (2) the database is set up for UTF8. With MySQL, this sequence of commands will enable UTF8 support:

set collation_connection ='utf8_general_ci';
set collation_database='utf8_general_ci';
set collation_system='utf8_general_ci';
set character_set_client='utf8';
set character_set_results='utf8';
set character_set_server='utf8';
set character_set_database='utf8';
set character_set_system='utf8';

II. Dealing with using special characters while in edit mode

When the grid enters edit mode, characters such as ", <, etc, may be lost. A possible fix is to escape the data, but the downside is that even basic characters such as the space are escaped, which can be troubling for users editing your grid. If you choose to implement this technique, apply the following changes on the code.

1. Modify line 216 of grid.js like this:

// create editable text boxes
productRow[1].innerHTML =
'<input class="editName" type="text" name="name" ' +
'value="' + escape(productRow[1].innerHTML) + '">';

2. Modify line 231 of grid.js like this:

productRow[1].innerHTML = unescape(document.forms.grid_form_id.name.value);

3. Modify line 319 of grid.js (function createUpdateUrl) like this:

case "textarea":
str += grid.elements[i].name + "=" +
encodeURIComponent(unescape(grid.elements[i].value)) + "&";

## Chapter 9 (AJAX PHP RSS Reader)

No errata has been recorded yet.

## Chapter 10 (AJAX PHP Drag & Drop)

No errata has been recorded yet.

## Appendix A

No errata has been recorded yet.

## Appendix B

No errata has been recorded yet.

## Appendix C

No errata has been recorded yet.