jQuery Example, jQuery to Retrieve Server's Current Time, jQuery Server time

Home Ajax Jquery jQuery to "Hello World"

Google Advance Search
RoseIndia.Net Search

jQuery to "Hello World"
Posted on: September 8, 2008 at 12:00 AM

In this jQuery tutorial we will develop a simple program that print the Hello World from server and displays on the user browser.

jQuery to "Hello World"

In this jQuery tutorial we will develop a simple program that print the Hello World from server and displays on the user browser. In this example we will be calling a server side PHP script to get the "text". You can easily replace PHP with JSP, or ASP program.

Steps to develop the Hello World program

Step 1:

Create php file to that prints the current server data. Here is the code of PHP script (helloWorld.php).

<?
print $hello_world="Hello World";
?>

Step 2:

Write HTML page to call the helloWorld.php. Create a new file (helloworld.html) and add the following code into it:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Hello World</title>
    <script type="text/javascript" src="jquery-1.2.6.js"></script>
       <script type="text/javascript">  



  
function  helloWorld()
{
	$.ajax({
	url : "helloWorld.php",
	success : function (data) {
	$("#contentArea").html(data);
	}
	});
	
}

  
   
   </script>  
</head>
<body>
 
 <table width="600" border=0>
 <tr><td  width="50" align="center">
 <input type="button" name="button" value="Click!" onClick="helloWorld();"> 
 <td  width="550" align="left" valign="top">
 <div id="contentArea" style="color:#FF0000;font:bold 25px 
  arial;padding-top:140px;">

 </div>  
 </td>
 </td>
 </tr>
 </table>
</body>
</html>

Program explanation:

The following code includes the jQuery JavaScript library file:

On Click on the Button helloWorld() funcation is called:

The code

$.ajax({

url : "helloWorld.php",
...

makes ajax call to helloWorld.php file.

Following code intercepts the ajax call success and then sets the data into "contextArea" div:

success : function (data) {

$("#contentArea").html(data);

}

});

When you run the program in browser it will look like following screen shot:

Check online demo of the application

Learn from experts! Attend jQuery Training classes.

Related Tags for jQuery to "Hello World":
php, jquery, c, query, jsp, ide, browser, server, text, asp, script, replace, user, print, get, display, ip, tutorial, int, ria, this, id, simple, row, js, tex, rows, example, call, with, program, to, ram, wse, exam, ld, ws, ext, e, il, it, repl, calling, can, li, spl, use, im, dev, from, ce, browse, in, cal, as, m, nt, play, sid, side, ca, j, isp, ace, all, hp, pro, tor, xa, xamp, s, sp, displays, at, is, hello, ha, ll, mpl, epl, epl, develop, ea, and, rv, sim, xt, tutor, scr, s, s, ri, rip, th, hello, hat, disp, ple, pl, pr, nd, on, om, ogr, o

«Previous Index Next»