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:
<script type="text/javascript" src="jquery-1.2.6.js"></script>
On Click on the Button helloWorld() funcation is called:
<input type="button" name="button" value="Click!" onClick="helloWorld();">
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.