- Creating the Database
- Making a Request
- Interacting with the Database
- Tying It All Together
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Making a Request
The index HTML file is simply a placeholder for the data that will be parsed from the database. It contains the references to the JavaScript and CSS files; an onload handler, which makes the first request; and three div tags:
- layout for centering the content on the page
- loading for the loading message that will be received by the HTTP Request object during the loading of the requested data
- posts for displaying each post after parsing
<head> <title>How to Integrate a Database with AJAX</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <script src="js/request.js"></script> <script src="js/post.js"></script> </head> <body onload="javascript:makeRequest(’services/post.php?method=get’);"> <div id="layout" align="center"> <div id="posts"></div> <p><input type="button" value="add a post" onmousedown="javascript:makeRequest(’services/post.php?method=save’);" /></p> <p><div id="loading"></div></p> </div> </body>
The first request is made when the page loads. This request sends a get query to a PHP class that we will create shortly, but first we’ll need to create the parsing methods for the requested response. The JavaScript request file handles all the basics, such as creating the object, sending the request, and checking the ready state. The JavaScript post file is what I’m using to handle the HTML rendering of the posts when the response from the Request object is received. The onResponse method is fairly robust, as it handles the HTML rendering of each post in both the text and form versions and places them in their own custom div tags so we can target them easily during user interactions. This way, we can just toggle between the text and form versions of each post by clicking an edit this post link. Following is the HTML that is written to the page for each post, the entire method can be viewed by downloading the source code here.
var html = "<div class=’post’ id=’post_"+ i +"’ "+ postDisplay +">"
+ "<div class=’title’ id=’title_"+ i +"’>"+ _title +"</div>"
+ "<div class=’description’ id=’description_"+ i +"’>"+ _description +"</div>"
+ "<div class=’date’ id=’date_"+ i +"’>"+ _date +"</div>"
+ "<a href=\"javascript:toggle(’"+ i +"’);\">edit this post</a><br/>"
+ "</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:toggle(’"+ i +"’);\">"
+ "<input type=’button’ name=’delete’ value=’delete this post’ onclick=\"javascript:deletePost("+ _id +");\">"
+ "<input type=’button’ name=’submit’ value=’save this post’ onclick=\"javascript:saveNewPost("+ _id +","+ i +");\">"
+ "</div>"
+ "<p>"nbsp;</p>";
The text version of each post simply displays the title, description, and date, along with an edit this post link. The form version of each post has three buttons:
- The cancel button simply toggles the state of the post back to the text version.
- The delete this post button sends the ID of the current post to the PHP object to remove it from the database.
- The save this post button allows the user to save the new or edited post to the server.
The core methods that handle the communication for the server-side requests are the onResponse, saveNewPost, deletePost, and getPost methods. There is also a getter and a setter method that store the index of the current post that’s being manipulated. These getter/setter methods provide the core methods with the current index so that the correct post can be updated with the correct information based on that index. Following is a brief description and code sample for each of the core methods (excluding onResponse, since we previously viewed its functionality):
- The saveNewPost method handles saving new posts by gathering and
sending the form-input values to the PHP object and setting the getPost
method as the callback method for the onreadystatechange:
function saveNewPost(_id, _index) { var newDescription = document.getElementById("formDescription_"+ _index).value; var newTitle = document.getElementById("formTitle_"+ _index).value; setIndex(_index); sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost); } - The getPost method is the callback method that handles updating
individual posts when the response is received from the PHP object:
function getPost() { if(checkReadyState(request)) { var response = request.responseXML.documentElement; var _title = response.getElementsByTagName(’title’)[getIndex()].firstChild.data; var _description = response.getElementsByTagName(’description’)[getIndex()].firstChild.data; var _date = response.getElementsByTagName(’date’)[getIndex()].firstChild.data; document.getElementById("title_"+ getIndex()).innerHTML = _title; document.getElementById("description_"+ getIndex()).innerHTML = _description; document.getElementById("date_"+ getIndex()).innerHTML = _date; toggle(getIndex()); } } - The deletePost method sends the current index as a request to the
PHP object, which ultimately deletes the record from the database and responds
with the updated posts:
function deletePost(_id) { sendRequest("services/post.php?method=delete"id="+ _id, onResponse); }
Surprisingly, the most complicated part is over. Let’s move on to the best part, the database interaction.