in

AJAX in JQuery using jQuery.get and jQuery.post methods

JQuery is a very famous JavaScript framework which is used for web development. JQuery is a cross-browser JavaScript framework i.e it works well in different browsers like IE, Firefox, Google Chrome etc. JQuery is open source software and is licensed under dual-license which are the MIT license and the GPL2 license.

AJAX (Asynchronous JavaScript and XML) is a blend of multiple technologies like JavaScript and XML which lets one fetch data on a web page asynchronously from the server. Ajax helps to load parts of a web page by fetching data from the server without having a complete page reload. This helps web pages to be more responsive and provides a better user interface to customers.

AJAX in Jquery using the jQuery.get method

The jQuery.get can be used to get data from the server asynchronously using the HTML get method.

The prototype of the jQuery.get function is :

jQuery.get ( urlOfAjaxPage, [data ] , JavascriptCallBackFunction )

The first parameter is the URL of he page on the server to be called. This generally is a page in one of the popular server side scripting like PHP, JSP, ASPX etc.

The second parameter is optional and it’s the data to be passed to the server page using the get method.

The third parameter is the call back function which will be called once the Ajax request is returned from the server.

Let see an example of the jQuery.get method :

File : Example.html

<html>
<head>
<title>Ajax Example</title>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		$('#helloButton').click(function(){
			
			var fname = $('#fname').val();
			
			$.get(
			'ajax.php',
			{name:fname},
				function(data) { $('#result').html( data ); }
			);
	});
	});
</script>
</head>
<body>
Name: <input type="text" name="fname" id="fname" />
<button type="button" id="helloButton">Say Hello</button>

<div id="result"> </div>
</body>
</html>

File : ajax.php

<?php

// Here some checks 
//can be added where data could also be fetched from a database or a file

$value = $_GET['name'];   
echo "Hello ".$value;

?>

The above example.html will create a web page as shown below :

Now lets look at the code line by line.

<input id="fname" name="fname" type="text" />
<button id="helloButton">Say Hello</button>

In the above lines we have created an input box called fname and a button called helloButton.

$('#helloButton').click(function(){ …. }

The above line associates a function which will be called when helloButton is clicked.

var fname = $('#fname').val();

This line gets the value in the text box which user has entered.

$.get(
'ajax.php',
{name:fname},
function(data) { $('#result').html( data ); }
);

This line does the magic of making the AJAX request to the server. The first parameter ajax.php will be the page which will be called on the server.

In the second parameter we are passing the data which the user entered in the text box and we stored in the variable fname. The third parameter is the function which will be called once the AJAX request is returned and the parameter to this function is data passed by the server. In this function we are just putting the data which is returned from the server in the div with the “result” id.

In ajax.php

$value = $_GET['name'];
echo "Hello ".$value;

This just gets the parameter which is passed in the get method and add hello to it and returns back.

So if the name is entered and the button is clicked you will get the following output.

AJAX in Jquery using the jQuery.post method

The jQuery.post has the same prototype as the jQuery.get method .

jQuery.post ( urlOfAjaxPage, [data ] , JavascriptCallBackFunction )

This would make an asynchronous call to the server via the HTTP post method.

So in the above example to use post instead get we will just have to make the following change in example.html

$.post(
'ajax.php',
{name:fname},
function(data) { $('#result').html( data ); }
);

and in ajax.php will now have

$value = $_POST['name'];
echo "Hello ".$value;

Now if the name is entered and the button is clicked the following will be the output.

Conclusion

AJAX really makes a web page more responsive and user friendly without the need of refreshing or reloading.

Written by CrazyLeaf Editorial

Follow us on Twitter @crazyleaf , Facebook , Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Loading…

Featured Designer #16 – Jon Phillips of SpyreStudios

Weekly Design Inspiration #32