jQuery to "Hello World"

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.

jQuery to "Hello World"

jQuery to "Hello World"

Tutorials