Database-enabled Ajax with PHP

Ajax has taken the Web to a new level by offering an intuitive interactive model that rivals the desktop. To compete with desktop applications, database interaction is necessary to unleash the true power of an Ajax Web application.

In this article you'll learn how to create database-enabled Ajax requests using PHP and MySQL. We begin by creating the front-end HTML and JavaScript files used to make requests to the server-side. The requested server-side is a PHP file which bridges the gap between Ajax and a PHP object that connects to a MySQL database and returns results as an XML response to the Ajax engine. To cover this functionality you'll learn about the concepts from a high level overview rather than focusing on each and every line of code. The complete source code for this sample can be downloaded and is necessary to create a working sample on your personal server. Let's get started by taking a look at the front-end.

The Front-end

The front-end of this project consists of an HTML file and two JavaScript objects. The HTML includes the JavaScript and represents user postings. The user postings could represent anything, such as to-do lists, notes and so on.

The two JavaScript objects are called Ajax and Page. The Ajax object is the engine we use to make all the requests to the server and delegate the responses to the appropriate callback methods.

The Page object handles rendering of posts that are returned from the database and provides the user with a way to edit and delete existing postings or add new ones. The most important method in this object is the onResponse method, which is the callback method for all Ajax requests. It handles parsing the XML and rendering it as HTML.

Page.onResponse = function() 
		{
			if(Ajax.CheckReadyState(Ajax.request))
			{
				document.getElementById('posts').innerHTML = "";
				var	response = Ajax.request.responseXML.documentElement;
				var _post = response.getElementsByTagName('post');
				
				if(_post.length == 0)
				{
					document.getElementById('posts').innerHTML = 'There are currently no available posts.<br/>Click the "add new post" button above to add a new post';	
				}
				
				var postDisplay = "";
				var formPostDisplay = "";
				
				for(var i=0; i<_post.length; i++)
				{
					var _title = response.getElementsByTagName('title')[i].firstChild.data;
					var _description = response.getElementsByTagName('description')[i].firstChild.data
					var _date = response.getElementsByTagName('date')[i].firstChild.data;
					var _id = response.getElementsByTagName('id')[i].firstChild.data;
					
					if(_title == "" && _description == "")
					{
						postDisplay = "style='display:none'";
						formPostDisplay = "style=''";
					}
					else
					{
						postDisplay = "style=''";
						formPostDisplay = "style='display:none'";	
					}
					
					var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
							+ "<div class='title' id='title_"+ i +"'>"+ _title
							+ "  <a href=\"javascript:Page.toggle('"+ i +"');\">edit</a></div>"
							+ "<div class='description' id='description_"+ i +"'>"+ _description +"</div>"
							+ "<div class='date' id='date_"+ i +"'>"+ _date +"</div>"
							+ "</div>"
							+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +">"
							+ "<div class='title'><input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'></div>"
							+ "<div class='description'><textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' rows='15'>"+ _description +"</textarea></div>"
							+ "<div class='date'>"+ _date +"</div>"
							+ "<input type='button' name='cancel' value='cancel' onclick=\"javascript:Page.toggle('"+ i +"');\">"
							+ "<input type='button' name='delete' value='delete' onclick=\"javascript:Page.deletePost("+ _id +");\">"
							+ "<input type='button' name='submit' value='save' onclick=\"javascript:Page.saveNewPost("+ _id +","+ i +");\">"
							+ "</div>";
					
					document.getElementById('posts').innerHTML += html;
				}
			}
		}

The onResponse method iterates the postings from the XML file and creates two representations of the data. The first is a nicely styled title, paragraph and date; the second is a form, which allows you to edit, delete and add new information to a posting. While the onResponse method renders both, it hides one based on the mode that the user is currently in. For instance, if the user is in edit mode, the form is visible and vice versa. This produces a toggle effect between the different states of an individual posting. In order to create this toggle effect we have a method, which handles this called toggle. The other methods of interest in the Page object are saveNewPost, deletePost and getPost. Each of these methods makes requests to the server-side through the Ajax object to accomplish a specific goal, such as saving, deleting or getting a post. Take a look at the source code from the sample download to see the inner workings of each method.