originally posted at http://www.goodfeelingplace.com/the-essence-of-ajax-how-i-learned-it-in-an-hour
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).
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.
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!