#native_company# #native_desc#
#native_cta#

AJAX and PHP Part 1 – Dynamic HTML and Images Page 2

By J.D.Campbell
on May 25, 2007

The JavaScript statements above take the contents of the res variable (which contains the returned data of the AJAX request) and updates the “txt1” Textarea element contents, and the “div1” Div HTML element contents, and the “cell1” Table cell element contents. All of these elements are within the last 14 lines of the client #1 HTML page listing above.
If you know a little about JavaScript and HTML, then you know that some elements of an HTML page can contain full HTML, such as div sections and table cells, and as long as you specify an id=”idname” attribute of these elements you can dynamically update them. Other HTML elements like textareas and textboxes of forms can only contain plain text. That is why the first line of our code snippet above uses the property assignment of .value = res (for plain text) and the last two lines of the snippet use the assignment of .innerHTML = res (for full HTML). The last two lines with the .innerHTML = res assignment are assigning the AJAX server response data which is full HTML to the div1 and cell1 page elements with those exact ids. When this occurs, you will see the contents of the table cell1 change to some dynamic HTML, including an image. Additionally, the div1 section will show the same HTML/image content.
For developing AJAX-powered HTML pages which produce dynamic HTML content within elements of the page, you will use the .innerHTML property assignment a lot. Almost any HTML page element that supports this .innerHTML property can contain dynamically updated HTML. You could check a JavaScript reference to see all the HTML page elements that support the .innerHTML property, but basically the “innerHTML” property can be updated (read/write) for all objects in DHTML except the following: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, and TR.
AJAX server-side PHP script “getajax.php
The PHP script which we used to support our AJAX client #1 example above is very simple:

<?php
echo "<IMG src='http://www.jdcampbell.com/14.gif'><br>This is an Ajax/PHP response.<br>What do you think?<br>";
?>

Place the above text in a file named “getajax.php” on your PHP Web server and it’ll work just fine. However, if you use it with our client #1 example, you will need to change the web address to your server within the function doHttpRequest() near the top of the client #1 HTML document.
Look for Part 2 of this tutorial on “Advanced AJAX used with PHP” for more AJAX technology. Primarily what we will be discussing in future articles is database operations with AJAX requests, and XML document download and usage via AJAX, and maybe a few other related issues. See you then!