Ajax and the JQuery JavaScript Library - Triggering GET and POST HTTP requests with Ajax
(Page 2 of 4 )
As I mentioned at the beginning, jQuery includes handy methods aimed specifically at working with Ajax in a simple fashion. The first of these Ajax-related methods is called “$.get().” Not surprisingly, it can be used for triggering GET HTTP requests to a web server.
The following example demonstrates how to use this handy method to save my first and last names to a text file, which will be displayed back to the client via an alert box. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on using jQuery with Ajax and $.get() method</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: 24px bold Arial, Helvetica, sans-serif;
color:#000;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.get("savedata.php", {fname: "Alejandro",lname: "Gervasio" },function(data){alert("The following data was saved: " + data);});
});
</script>
</head>
<body>
<h1>Basic example on using jQuery with Ajax and get() method</h1>
</body>
</html>
(definition of "savedata.php” file)
<?php
$data=$_GET['fname'].' '.$_GET['lname'];
$fp=fopen('data.txt','w');
fwrite($fp,$data);
fclose($fp);
echo $data;
?>
As you can see, the previous code sample shows how to use the “get()” method to save some basic data to a destination text file via Ajax. This method also accepts a callback function as an incoming argument, which can be called to return data from the server.
In this particular case, after saving my first and last names to a “data.txt” file, the script will display this information by using an alert box. Additionally, it’s possible to build another Ajax application that saves this sample data by way of a POST HTTP request. Of course, in this case, a “$.post()” method will be used instead, in the following manner:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on using jQuery with Ajax and $.post() method</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: 24px bold Arial, Helvetica, sans-serif;
color:#000;
}
#samplelist{
width: 30%;
margin-left: auto;
margin-right: auto;
background: #eee;
}
.item{
font: 11px Arial, Helvetica, sans-serif;
color: #009;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.post("savedata.php", {fname: "Alejandro",lname: "Gervasio" },function(data){alert("The following data was saved: " + data);});
});
</script>
</head>
<body>
<h1>Basic example on using jQuery with Ajax and post() method</h1>
</body>
</html>
(definition of "savedata.php” file)
<?php
$data=$_POST['fname'].' '.$_POST['lname'];
$fp=fopen('data.txt','w');
fwrite($fp,$data);
fclose($fp);
echo $data;
?>
As you can see, the two previous hands-on examples demonstrate how simple it is to develop Ajax applications with the “jQuery” library, since the “$.get()” and “$.post()” methods shown before are fairly straightforward.
Well, now that you hopefully learned how to create some simple Ajax programs, it’s time to examine yet another handy method that comes bundled with jQuery. This one is simply called “$.ajax()” and as its name would suggest, it triggers both GET and POST requests to a specified web server.
However, to learn more about how to use this method, you’ll have to click on the link below and read the following section.
Next: Sending GET and POST requests with Ajax >>
More JavaScript Articles
More By Alejandro Gervasio
