|
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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
