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.
Very nice tutorial!Very helpful!Thank you man!
Very nice article!!! And really usefull to newbeis.
But can u please more explore on What is AJAX? How is it working?
How to use AJAX in an Application? :)
Yes really it is very nice for newbies!!!
Can u plz explore more on How it works? How to use AJAX in an Application?
hey the tutorial is great! this was the 1st time iv even tried doing anything like this and it was so easy to follow along….
iv managed to create a form and it works perfect in I.E…….but y wont it work in Firefox????
this is my code….any help will be much appreciated…thnkz…
Untitled Document
var myObjectReference = createRequestObject();
function createRequestObject() {
var xmlObject;
try{xmlObject=new ActiveXObject(“Msxml2.XMLHTTP”);}
catch (e){
try { xmlObject=new ActiveXObject(“Microsoft.XMLHTTP”);}
catch(f) { xmlhttp=null; }
}
if(!xmlObject&&typeof XMLHttpRequest!=”undefined”) {
xmlObject=new XMLHttpRequest();
}
return xmlObject;
}
function sendRequestTextPost() {
var rnd = Math.random();
var myvalue1 = escape(document.getElementById(“myvalue1″).value);
var myvalue2 = escape(document.getElementById(“myvalue2″).value);
try{
myObjectReference.open(‘POST’,'serverscript.php’);
myObjectReference.setRequestHeader(‘Content-Type’,'application/x-www-form-urlencoded’);
myObjectReference.onReadyStateChange = handleResponseText;
myObjectReference.send(‘myvalue1=’+myvalue1+’&myvalue2=’+myvalue2+’&rnd=’+rnd);
}
catch(e){}
finally{}
}
function handleResponseText(){
try{
if((myObjectReference.readyState == 4) && (myObjectReference.status == 200)){
var response = myObjectReference.responseText;
document.getElementById(“idforresults”).innerHTML = String(response);
}
}
catch(e){alert(“there was an error”);}
finally{}
}
MY VALUE 1:
MY VALUE 2:
——————
serverscript.php :