Ajax Tutorial : Ajax Help and Tutorials

Basic Ajax usage with jQuery

March 3, 2010 at 10:15 pm · Filed under ajax-basics, ajax-with-php

In this article we will be talking about the basic usage of Ajax with jQuery 1.4.2 production (24KB, Minified and Gzipped).

In order to use the JavaScript examples in this article, you should first download jQuery and include it on your page using:

<script type="text/javascript" src="jquery-1.4.2.js"></script>

Throughout this article our Ajax scripts will communicate with ‘serverscript.php‘ our Server script.

<?php
if(isset($_POST['firstname']) &&
   isset($_POST['lastname'])) {
 echo "Hey {$_POST['firstname']} {$_POST['lastname']},
   you rock!\n(repsonse to your POST request)";
}
if(isset($_GET['firstname']) &&
   isset($_GET['lastname'])) {
 echo "Hey {$_GET['firstname']} {$_GET['lastname']},
   you rock!\(response to your GET request)";
}
?>

Method One - POST (Asynchronous with data):

Transfer data to the server (using POST method), and retrieve a response:

function doAjaxPost() {
 $.ajax({
   type: "POST",
   url: "serverscript.php",
   data: "firstname=clint&lastname=eastwood",
   success: function(resp){
     // we have the response
     alert("Server said:\n '" + resp + "'");
   },
   error: function(e){
     alert('Error: ' + e);
   }
 });
}

doAjaxPost();

Method Two - GET (Asynchronous with data):

Transfer data to the server (using GET method), and retreive a response:

function doAjaxGet() {
 $.ajax({
   type: "GET",
   url: "serverscript.php",
   data: "firstname=clint&lastname=eastwood",
   success: function(resp){
     // we have the response
     alert("Server said:\n '" + resp + "'");
   },
   error: function(e){
     alert('Error: ' + e);
   }
 });
}

doAjaxGet();

Note that GET is the default type for Ajax calls using jQuery, so we really do not need to explicitly state it, but I’ve placed it there just for clarity.

Practical jQuery Example using POST:

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
  <script>
function doAjaxPost() {
 // get the form values
 var field_a = $('#field_a').val();
 var field_b = $('#field_b').val();

 $.ajax({
   type: "POST",
   url: "serverscript.php",
   data: "firstname="+field_a+"&lastname="+field_b,
   success: function(resp){
     // we have the response
     alert("Server said:\n '" + resp + "'");
   },
   error: function(e){
     alert('Error: ' + e);
   }
 });
}
</script>

First Name:
<input type="text" id="field_a" value="Sergio">
Last Name:
<input type="text" id="field_b" value="Leone">
<input type="button" value="Ajax Request" onClick="doAjaxPost()">

</body>
</html>

jQuery Example in Browser

Well there you have it, not too tricky and with a weight of only 24Kb for the base library you can’t go wrong. Of course, jQuery can be used for a whole heap of other tasks.

Until next time (when we cover MooTools), Happy A’jaxing!

Permalink Comments

Basic Ajax usage with X

March 3, 2010 at 8:45 pm · Filed under ajax-basics, ajax-news, javascript

Over the next several articles I’ll be covering the “Basic Ajax usage with X”, for example “Basic Ajax usage with jQuery”.

The idea is to take the latest stable version of the chosen JavaScript Framework (for example jQuery) and examine what’s required to achieve the most basic Ajax calls.

I’ll be looking at a few things here, notably the ease of use and the minimum required footprint (in regards to download size).

Note that I will not necessary by using Ajax in the traditional sense of the word (i.e. with XML) as the intention of these articles is to strip everything back to the absolute basics.

I’m not 100% certain about all the frameworks I’ll cover now, but I will most certainly be covering jQuery, MooTools, Prototype, dojo, YUI and ExtJS. If I have the time, I may look at some of the newer ones as well.

This post is a living post (I’ll revisit and link up the articles).

Cheers guys!

Permalink Comments off

JavaScript Coding Contests

December 5, 2008 at 7:55 pm · Filed under JavaScript Coding Contest, ajax-news

Hey folks,

I’m in the process of putting together some ideas for our upcoming JavaScript Coding Contests.

Several years ago, I ran some coding contests on a PHP website (PHP Programming Contests)… they were great fun at the time, and ran for a couple of years.

Since JavaScript seems to be the cool language now, I thought - why not run some contests with JavaScript?

I still need to find some suitable sponsors to offer prizes (let me know if you are interested).

Also, if you have any ideas for future contests, let me know.

I expect to have something ready very soon, so don’t wonder too far away!

Cheers,
Stuart

Permalink Comments (3)

jQuery Autocomplete complete in Visual Studio

November 23, 2008 at 8:44 pm · Filed under ajax-news

Scott Guthrie, from Microsoft, has wrote about the new intellisense support for the jQuery library. jQuery support is now found in both Visual Studio 2008 and Visual Web Developer 2008 Express (free).

There are a few steps involved in getting this new support - just the usually steps you would expect from Microsoft though, nothing major.

jQuery also announced recently that Nokia would soon have jQuery running in their adopted mobile phone browser (WebKit using the Web Run-Time).

Permalink Comments

Advanced JavaScript Lessons for the 21st Century

October 13, 2008 at 9:41 pm · Filed under javascript

Javascript, as you may know, has not changed very much since it first appeared back in the 90’s. Over the past couple of years, however, many people have been pushing to give the language an overhaul. It could take another couple of years before these new additions are in place in all major browsers (who knows), but things WILL change - and hopefully for the better. The next version of JavaScript should be JavaScript 2.

JavaScript started off pretty popular, it kicked Vbscript out of the game (not long after Microsoft introduced it). But after a while it also gained a lot of critics (all languages do!). One reason (in my view) is because many people coded poorly in JavaScript, and spat out horrible looking code. Another is because the Browser DOM API which JavaScript was used with was poor (it is still not great, but work is being done here too). JavaScript was the only real option available (and it still is). However, over the past few years, many serious programmers introduced new ways of using JavaScript - ways which are much more pretty, and powerful. In fact, these new ways have made it clearer what was actually missing from the language to start with, what was already there but overlooked by many, and what would make it better for the future.

The founder of JavaScript, Brendan Eich, still appears to be one of the major forces in the future of the Language. You can keep up-to-date by reading his blog over at weblogs.mozillazine.org/roadmap/.

Anyway, on to the main purposed of this post. I found an excellent Advanced JavaScript presentation which John Resig has made public (he actually presented this at a recent Web 2.0 expo, in New York). In my opinion, this presentation is first class.

The presentation aims to teach you how to understand the following code from the Prototype Library:

// The .bind method from Prototype.js
Function.prototype.bind = function(){
  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
  return function(){
    return fn.apply(object,
      args.concat(Array.prototype.slice.call(arguments)));
  };
};

Have fun, I did!

Permalink Comments (1)

« Previous entries

Ajax Tutorial : Ajax Help and Tutorials

Basic Ajax usage with jQuery

Basic Ajax usage with X

JavaScript Coding Contests

jQuery Autocomplete complete in Visual Studio

Advanced JavaScript Lessons for the 21st Century

Pages

Archives

Categories

Search

Friends

Meta