Learning AJAX - A Simple Example
(Page 4 of 4 )
Now you have everything ready for using AJAX in your PHP web pages. We will now try a simple example to get the server time using AJAX. First we need to develop the server side PHP code that will return server date.
<?php
echo date("m.d.y");
?>
Now save this PHP code as date.php. This PHP page will output server date. As discussed earlier I put all necessary JavaScript codes for AJAX in ajax.js. the next thing we need to develop is our main PHP page that will make the request for date.php.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" language="Javascript"
src="ajax.js"></script>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>PHP using AJAX</title>
</head>
<body>
<a onclick="sendRequest('GET','date.php')"href="#">Server
Date:</a>
<div id="ajax_res">Server Date will replace this text.</div>
</body>
</html>
Here first we add ajax.js using a script tag. Then I add a hyperlink with an onClick event to call the sendRequest function of ajax.js with 'GET' as the HTTP method and the URL to the server side PHP, date.php. After that I add a DIV tag with an id attribute equal to ajax_res.
If the user of this PHP page clicks this hyperlink, date.php will be requested in background, and the output of date.php will replace the text within the DIV tags. Using AJAX from PHP is very easy as described here. All you need is the JavaScript functions for sending the XMLHttpRequest and getting the HTTP Response. There is also another way to request server side codes in PHP without using XMLHttpRequest, but to me that is not AJAX.
Now let me show you an example that is similar to the one above. In this example we will request a server side JSP to get the server date time, and then display the server time in the current JSP page.
The first thing we need to develop is the server side JSP code to get the server date time. The following JSP code will output the server date time.
<%=new java.util.Date()%>
Save this as index.jsp.
We already have all the necessary JavaScript codes in ajax.js.
Now we need to develop the invoker JSP; let's call this caller.jsp. Here is the JSP code for caller.jsp.
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="ajax.js"></script>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>JSP Page using AJAX</title>
</head>
<body>
<a onclick="sendRequest('GET','index.jsp')"href="#">Server
Date Time:</a>
<div id="ajax_res">Server Date Time will replace this
text.</div>
</body>
</html>
This caller.jsp has a <div> element with the id='ajax_res'. When the user clicks the link 'Server Date Time:' as shown below, the JavaScript function sendRequest from ajax.js will be called to get the data from 'index.jsp' using the HTTP GET method. The output of this index.jsp will replace the text within <div id="ajax_res">and </div>. The output of caller.jsp before clicking the link is:
The output of caller.jsp after invoking the index.jsp using AJAX is:
This way you can use AJAX with JSP for retrieving information from a database or from any file kept in the server, or you can send the user information to a server and get the response.
We discussed AJAX -- why we should use AJAX, what is required to use AJAX, and then we learned how to use AJAX in PHP pages as well as JSP pages. We will see some advanced usage of AJAX in the next part. Also in the next part of this article I will discuss some advanced and open source JSP tag libraries to create cool AJAX-based web applications.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 17 
