The Essence of AJAX – How I learned it in an hour

originally posted at http://www.goodfeelingplace.com/the-essence-of-ajax-how-i-learned-it-in-an-hour
I was a bit resistant to learning ajax for a couple years because I didn’t see a need for it in the programs I was developing.  However, one day I learned it without knowing it.  I was working with code written by someone else which called a javascript function that invoked a url, then called another function to handle the results of the url.  An example that looks very similar to the code I was working with is at http://www.captain.at/howto-ajax-form-post-request.php (unfortunately that page no longer exists, but I’ve made my own example that you can see at http://www.wilycode.com/simple-ajax-auto-complete-example/ – the details below refer to the not found page but the concepts are the same).

If you look at that code, there are 3 javascript functions used – get (this is called from clicking on a button in the form on the page), makePostRequest (this is the function which calls the url and sends parameters to it via the post method), and alertContents (this function is called from the makePostRequest function when the response is received from the url).

The get function just creates a string with parameters to pass, defines an url, and then passes them to the makePostRequest function.  Here are the main lines of code in the makePostRequest function and what they mean:

  • http_request.onreadystatechange = alertContents; – this says when the http_request.readyState changes, then call the alertContents function.
  • http_request.open(‘POST’, url, true); – this defines what url is going to be called and what method is going to be used
  • http_request.send(parameters); – this sends the parameters specified in the post array to the url requested

There are a few other lines specifying a the header of the request, and a bunch of lines in the beginning that setup the http_request object to work for different browsers.

Then in the alertContents function (which is actually called several times, whenever the readyState changes), once the readyState of 4 is reached (you can read more about readyStates at http://www.yaldex.com/wAjax/DiggingdeeperintoHTTPreadystates.html) the http status is checked.  If the status is 200 (and not 404, 501, 301, etc. – see http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html for a full list with explanations) then the result of that http request (like what you would get if you put that url into a browser address bar and sent the appropriate post parameters in the header – done through a script, not a browser – then checked the page source) is stored into a javascript variable and you can do whatever you want with it.

In that example they just stick it into a span element on the existing page, but you can do many other things.  If you invoke an url which takes as parameters the values of certain form elements on the page, you could return a list of values to populate another dropdown with, etc.  So you can take the example and modify the parameters passed, what the invoked url does, and what is done with the results – then you will have your own ajax function!

Join the Conversation

2 Comments

Leave a comment

Your email address will not be published. Required fields are marked *

CommentLuv badge