Archive for March, 2006

Ajax tip of the day - Concurrent Connections

March 22, 2006 at 9:07 pm · Filed under tip-of-the-day

Concurrent Connections with Ajax

Here is an quick example of an ajaxed application - you have your main page (lets say index.htm) and when it loads it calls in various content using ajax (lets say we call in navigation.php, products.php and basket.php). Ok so navigation.php, and products.php load fine but basket.php fails!! Hmmm, what a pain - why did it fail to load you ask. Simple!! most browsers can only handle 2 ajax calls at one time and because all 3 of them are called on the index.htm page load - then one probably will fail.

Ok, so how do we get around this limitation? well one way I’ve found that works pretty well is to put delay in the ajax calls ” window.setTimeout(”ajaxcall()”, 400); ” for example. You could have this in the <body onload=”"> tag or just simply enter the javascript at the end of the page (body onload would probably be the best option).

I’d be interested to hear other possible solutions.

Comments (1)

Round-up of 30 AJAX Tutorials

March 21, 2006 at 1:36 pm · Filed under ajax-resources

Max Kiesler has created a list of 30 Ajax Tutorials covering various common usages.
Tutorials cover:

Ajax Client-Server Communication
Ajax Drag and Drop
Ajax Forms
Ajax File Uploader
Ajax Framework and Toolkit
Ajax Getting Started
Ajax Image Gallery
Ajax Keyword Suggest
Ajax Live Search
Ajax Sorting
Ajax Tabbed Pages

Although not all of these actually use Ajax (only javascript) - they are still worth a look at. Ajax is a bit of a buzz word these days - so you’ll find many new JavaScript tutorials are masked as being Ajax (which is asynchronous, where many will be strictly client-side). There are great benifits with Ajax, but many things can be done without it!

Comments

Ajax Toybox

March 15, 2006 at 11:18 pm · Filed under ajax-resources

You may be interested in some example ajax code posted over on funwithjustin. He has some nice simple examples which are available as demos on his site and also available for download.

The Ajax Toybox

Nice One!!

Comments off

JavaScript Cookies

March 15, 2006 at 10:53 pm · Filed under javascript

JavaScript Cookies

If like me you usually create your cookies using a server scripting language like PHP, you may find that using JavaScript for cookies is simple.

Im going to show you how to create, edit, delete and read cookies using only JavaScript.

Creating JavaScript Cookies:


function createCookie(name, value, days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

As you can see the function createCookie requires 3 values:


  • name = the name you want to give the cookie

  • value = the value the cookie will hold

  • days = the number of days you want the cookie to last [can be up to 30 days])

Deleting a JavaScript Cookie:


function eraseCookie(name) {
  createCookie(name, "", -1);
}

The above function eraseCookie requires the name of the cookie you want to delete. It simply marks the expire date as yesterday.

Reading a JavaScript Cookie:


function readCookie(name) {
  var ca = document.cookie.split(';');
  var nameEQ = name + "=";
  for(var i=0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1, c.length); //delete spaces
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
  return "";
}

readCookie does just that, provide the function with the name of the cookie you want to read and it will return its value.

So lets put all that together now and write the contents of the cookie out to the screen.



 
  JavaScript Cookies

  
   
   
   Change value

In the above code we simply create the cookie using body onLoad and calling the makeCookie() function.
When we click the link ‘Change Value’ we are calling the JavaScript function editCookie() which deletes the current cookie and recreates a new one with the same name but new value.

That’s all there is to it, easy peasy!! :-)

Comments (1)

Simple Ajax Functions - Snippets

March 8, 2006 at 11:33 pm · Filed under ajax-basics

Basic Ajax Functions
I’ve created a list of very common JavaScript functions for Ajax. They have been created in quick reference fashion and do not contain any fancy stuff. Instead of creating one function which can handle various tasks depending on passed values, they are split into seperate basic task functions. The reason for this is simplicity.

Anyway - here they are. I’ll post the function and give a basic outline of what it does.

This first function is the real important one - it’s the one which creates the object for making the Ajax connection.

Here is the function which sends the request to the server script. This version creats the connection with TEXT and uses the POST method.

Here is the function which sends the request to the server script. This version creats the connection with TEXT and uses the GET method.

Here is the function which sends the request to the server script. This version creats the connection with XML and uses the POST method.

Here is the function which sends the request to the server script. This version creats the connection with XML and uses the GET method.

Now here is the function which retrieves the response from the server script. This version receives the response as TEXT (http.responseText).

Now here is the function which retrieves the response from the server script. This version receives the response as XML (http.responseXML).

This little function can be used to delay the call - handy for forms where you use onKeyUp or onKeyPress to trigger submit action.

Below is just an example form which I used to work with the above functions.

Here is a basic one field worm which used the onKeyUp to trigger the Ajax with the delay.

And finaly here is the element on the page which the Ajax response is writen to.

To put all this together - just pick the first function (createRequestObject() [remember to include the var http.. part above it]). Select the SendRequest function you require and the handle Request which uses the same method. Then add your form and update the form ID’s (remember to have these matching in the javascript!). See the other posts for a full example of these scripts hanging together.

Comments (4)

Bad Behavior has blocked 860 access attempts in the last 7 days.