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 will 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 will 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 is 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.
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title>Database-Enabled AJAX</title>
4 <link href="css/layout.css" rel="stylesheet" type="text/css" />
5 <script type="text/javascript" src="js/Ajax.js"></script>
6 <script type="text/javascript" src="js/Page.js"></script>
7 </head>
8
9 <body onload="Ajax.Request( iservices/connector.php?method=get, Page.onResponse);">
10 <div id="layout" align="center">
11 <div id="posts"></div>
12 <p><input type="button" value="add new post" onclick="Ajax.Request( iservices/connector.php?method=save, Page.onResponse);" /></p>
13 <p><div id="loading"></div></p>
14 </div>
15
16 </body>
17 </html>
view plain | print | ?
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Database-Enabled AJAX</title> <link href="css/layout.css" _fcksavedurl=""css/layout.css"" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Ajax.js"></script> <script type="text/javascript" src="js/Page.js"></script> </head> <body onload="Ajax.Request( iservices/connector.php?method=get, Page.onResponse);"> <div id="layout" align="center"> <div id="posts"></div> <p><input type="button" value="add new post" onclick="Ajax.Request( iservices/connector.php?method=save, Page.onResponse);" /></p> <p><div id="loading"></div></p> </div> </body> </html>
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.
1 var Ajax = new Object();
2
3 Ajax.Request = function(url, callbackMethod)
4 {
5 Ajax.request = Ajax.createRequestObject();
6 Ajax.request.onreadystatechange = callbackMethod;
7 Ajax.request.open("POST", url, true);
8 Ajax.request.send(url);
9 }
10
11 Ajax.createRequestObject = function()
12 {
13 var obj;
14 if(window.XMLHttpRequest)
15 {
16 obj = new XMLHttpRequest();
17 }
18 else if(window.ActiveXObject)
19 {
20 obj = new ActiveXObject("MSXML2.XMLHTTP");
21 }
22 return obj;
23 }
24
25 Ajax.CheckReadyState = function(obj)
26 {
27 if(obj.readyState == 0) { document.getElementById(loading).innerHTML = "Sending Request..."; }
28 if(obj.readyState == 1) { document.getElementById(loading).innerHTML = "Loading..."; }
29 if(obj.readyState == 2) { document.getElementById(loading).innerHTML = "Loading..."; }
30 if(obj.readyState == 3) { document.getElementById(loading).innerHTML = "Loading..."; }
31 if(obj.readyState == 4)
32 {
33 if(obj.status == 200)
34 {
35 document.getElementById(loading).innerHTML = "";
36 return true;
37 }
38 else
39 {
40 document.getElementById(loading).innerHTML = "HTTP " + obj.status;
41 }
42 }
43 }
view plain | print | ?
var Ajax = new Object(); Ajax.Request = function(url, callbackMethod) { Ajax.request = Ajax.createRequestObject(); Ajax.request.onreadystatechange = callbackMethod; Ajax.request.open("POST", url, true); Ajax.request.send(url); } Ajax.createRequestObject = function() { var obj; if(window.XMLHttpRequest) { obj = new XMLHttpRequest(); } else if(window.ActiveXObject) { obj = new ActiveXObject("MSXML2.XMLHTTP"); } return obj; } Ajax.CheckReadyState = function(obj) { if(obj.readyState == 0) { document.getElementById(loading).innerHTML = "Sending Request..."; } if(obj.readyState == 1) { document.getElementById(loading).innerHTML = "Loading..."; } if(obj.readyState == 2) { document.getElementById(loading).innerHTML = "Loading..."; } if(obj.readyState == 3) { document.getElementById(loading).innerHTML = "Loading..."; } if(obj.readyState == 4) { if(obj.status == 200) { document.getElementById(loading).innerHTML = ""; return true; } else { document.getElementById(loading).innerHTML = "HTTP " + obj.status; } } }
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.
1 Page.onResponse = function()
2 {
3 if(Ajax.CheckReadyState(Ajax.request))
4 {
5 document.getElementById(posts).innerHTML = "";
6 var response = Ajax.request.responseXML.documentElement;
7 var _post = response.getElementsByTagName(post);
8
9 if(_post.length == 0)
10 {
11 document.getElementById(posts).innerHTML = There are currently no available posts.<br/>Click the "add new post" button above to add a new post;
12 }
13
14 var postDisplay = "";
15 var formPostDisplay = "";
16
17 for(var i=0; i<_post.length; i++)
18 {
19 var _title = response.getElementsByTagName( itle)[i].firstChild.data;
20 var _description = response.getElementsByTagName( wouldescription)[i].firstChild.data
21 var _date = response.getElementsByTagName( wouldate)[i].firstChild.data;
22 var _id = response.getElementsByTagName(id)[i].firstChild.data;
23
24 if(_title == "" && _description == "")
25 {
26 postDisplay = "style= wouldisplay:none";
27 formPostDisplay = "style=";
28 }
29 else
30 {
31 postDisplay = "style=";
32 formPostDisplay = "style= wouldisplay:none";
33 }
34
35 var html = "<div class=post id=post_"+ i +" "+ postDisplay +">"
36 + "<div class= itle id= itle_"+ i +">"+ _title
37 + " <a href="javascript:Page.toggle("+ i +");">edit</a></div>"
38 + "<div class= wouldescription id= wouldescription_"+ i +">"+ _description +"</div>"
39 + "<div class= wouldate id= wouldate_"+ i +">"+ _date +"</div>"
40 + "</div>"
41 + "<div class=post id=formPost_"+ i +" "+ formPostDisplay +">"
42 + "<div class= itle><input type= ext name= itle id=formTitle_"+ i +" size=60 value="+ _title +"></div>"
43 + "<div class= wouldescription><textarea type= ext id=formDescription_"+ i +" wrap=virtual cols=60 rows=15>"+ _description +"</textarea></div>"
44 + "<div class= wouldate>"+ _date +"</div>"
45 + "<input type=utton name=cancel value=cancel onclick="javascript:Page.toggle("+ i +");">"
46 + "<input type=utton name= wouldelete value= wouldelete onclick="javascript:Page.deletePost("+ _id +");">"
47 + "<input type=utton name= isubmit value= isave onclick="javascript:Page.saveNewPost("+ _id +","+ i +");">"
48 + "</div>";
49
50 document.getElementById(posts).innerHTML += html;
51 }
52 }
53 }
view plain | print | ?
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( itle)[i].firstChild.data; var _description = response.getElementsByTagName( wouldescription)[i].firstChild.data var _date = response.getElementsByTagName( wouldate)[i].firstChild.data; var _id = response.getElementsByTagName(id)[i].firstChild.data; if(_title == "" && _description == "") { postDisplay = "style= wouldisplay:none"; formPostDisplay = "style="; } else { postDisplay = "style="; formPostDisplay = "style= wouldisplay:none"; } var html = "<div class=post id=post_"+ i +" "+ postDisplay +">" + "<div class= itle id= itle_"+ i +">"+ _title + " <a href="javascript:Page.toggle("+ i +");">edit</a></div>" + "<div class= wouldescription id= wouldescription_"+ i +">"+ _description +"</div>" + "<div class= wouldate id= wouldate_"+ i +">"+ _date +"</div>" + "</div>" + "<div class=post id=formPost_"+ i +" "+ formPostDisplay +">" + "<div class= itle><input type= ext name= itle id=formTitle_"+ i +" size=60 value="+ _title +"></div>" + "<div class= wouldescription><textarea type= ext id=formDescription_"+ i +" wrap=virtual cols=60 rows=15>"+ _description +"</textarea></div>" + "<div class= wouldate>"+ _date +"</div>" + "<input type=utton name=cancel value=cancel onclick="javascript:Page.toggle("+ i +");">" + "<input type=utton name= wouldelete value= wouldelete onclick="javascript:Page.deletePost("+ _id +");">" + "<input type=utton name= isubmit value= isave 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.
Original Source:
Related Stuff
-
MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.
-
Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone
-
TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support
-
ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.
-
Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.
-
Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software
- PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.