Home arrow JavaScript arrow Page 2 - Ajax and the JQuery JavaScript Library
JAVASCRIPT

Ajax and the JQuery JavaScript Library


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
September 23, 2009
TABLE OF CONTENTS:
  1. · Ajax and the JQuery JavaScript Library
  2. · Triggering GET and POST HTTP requests with Ajax
  3. · Sending GET and POST requests with Ajax
  4. · Displaying and hiding elements in a web document

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials