Creating your own Javascript AJAX Request

Using Javascript to post variables to another script and process them is not something new. Posting by AJAX with nowadays libraries is also not new, but what about you creating your own javascript AJAX handler.

The first thing you need to know is about using the Javascript XMLHttpRequest.  It’s very simple object that will allow you to submit via get to anohter script and retrieve the response for it. For more information about this object you can always check W3Schools.

Creating your own script will need 4 required parameters:

  • form name
  • action of the form (script where you will be posting to)
  • parameters or variables to be sent
  • callback function to process the result

With this in hand you can create your function and submit the variables to your script using your own AJAX function.

You will need, for that, a script similar to this one:

var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,…
http_request = new XMLHttpRequest(); // creating the object
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType(‘text/xml’);
http_request.overrideMimeType(‘text/html’);
}
}
else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject(“Msxml2.XMLHTTP”); // creating the object for IE
}
catch (e) {
try {
http_request = new ActiveXObject(“Microsoft.XMLHTTP”); // since it can work differently through versions, using the try catch event for Javascript will force IE to always create the object.
}
catch (e) {}
}
}
// got this test from other site, but don’t remember where….
if(!http_request){
// something did not work right
alert(‘Unable to create an HTTP request instance.’);
return false;
}

// if callback is not a function it will create one so the onreadystatechange from the get the parameters
callback = callback || function(){};

// creating the AJAX call
http_request.onreadystatechange = function completeAjaxRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// everything worked as it should
result = http_request.responseText;
// process the result by a callback function
callback(result);
return true;
}
else {
alert(‘There was a problem with the request.’);
return false;
}
}
};
// sending the parameters through the created object to the script
http_request.open(‘POST’, action, true);
http_request.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http_request.setRequestHeader(“Content-length”, parameters.length);
http_request.setRequestHeader(“Connection”, “close”);
http_request.send(parameters);
return true;

Off course you need way more validation and testing to see if everything is working as it should, but this will kick start it.

Tip:

Create a function that will alert an error or write in console if you are using Firefox with Firebug. This will help to handle and troubleshoot your functions.

All you need is a simple test:

var type = typeof(console);
if(type == ‘undefined’) {
alert(message);
}
else {
console.log(message); // firefox with firebug only
}

Have fun.

Advertisements

About mcloide

Making things simpler, just check: http://www.mcloide.com View all posts by mcloide

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: