Simple Ajax Functions – Snippets

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.