Welcome to the seventh part of a series introducing the jQuery JavaScript library. Made up of eight comprehensive articles, this series provides you with the right pointers to get started using this JavaScript software so you can take advantage of its remarkable functionality.
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">
$.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">
$.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.