Programmatic POST Requests with JavaScript: Automated Form Submissions - Building the form emulator: defining the core functions “getXMLHTTPObject()” and “sendRequest()”
(Page 3 of 4 )
To get started writing the form emulator, I’ll begin by defining the source code for the first functions, in conjunction with the proper explanation on the operations assigned within the JavaScript program. In first place, here is the definition for the “getXMLHTTPObject()” function:
// function getXMLHTTPObject
function getXMLHTTPObject(){
//instantiate new XMLHttpRequest object
var objhttp=(window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
if(!objhttp){return};
// assign event handler
objhttp.onreadystatechange=displayStatus;
// return XMLHttpRequest object
return objhttp;
}
As I said before, this function should be already familiar, because it was defined in the first part of the series. Essentially, what it does is to return a new instance of the XMLHttpRequest object each time it’s invoked, in this way encapsulating the code responsible for object instantiation. If you have some knowledge about design patterns, then it should be clear that the factory pattern is basically applied here. By using this function, I’m decoupling the process to create objects from the rest of the program code.
The next function to be defined is “sendRequest()”, which acts as the workhorse of the program, since it makes all of the http requests. The structure of this function is essentially the same of that reviewed on my previous article, so shouldn’t be hard to understand. The only change that I’ve introduced within its code is the value assigned to the default http header. Due the fact that the script is aimed to emulate post forms, the http header specified is the following:
'Content-Type:application/x-www-form-urlencoded; charset=UTF-8'
The above header is the default value assigned on (X)HTML documents that implement regular forms. As long as a web server receives this header, it assumes that the request is coming from a web form. If the request method is set to POST, then the data is sent apart from the requested URL. Otherwise, if a GET method is used, the form data (name/value pairs) is appended to the URL as part of the query string.
I suppose all of these concepts are closely familiar to you, thus having briefly explained the meaning of this header within the context of the HTTP protocol, here is code for the ” sendRequest()” function:
// function sendRequest
function sendRequest(url,data,method,mode,header){
// set default values
if(!url){url='default_url.htm'};
if(!data){data='defaultdata=defaultvalue'};
if(!method){method='post'};
if(!mode){mode=true};
if(!header){header='Content-Type:application/x-www-form-urlencoded; charset=UTF-8'};
// get XMLHttpRequest object
objhttp=getXMLHTTPObject();
// open socket connection
objhttp.open(method,url,mode);
// set http header
objhttp.setRequestHeader(header.split(':')[0],header.split(':')[1]);
// send data
objhttp.send(data);
}
The only points worthy of mention on the above function are the default values assigned to the “Content-Type” http header, as well as the request mode. Essentially, the first request will be made in synchronous mode, because the program needs to get a response from the server, and then the subsequent ones will be performed asynchronously.
The next thing to do is reviewing another relevant function within the form emulator program. Let’s have a look at the “displayStatus()” function, which shows descriptive information about the http request’s progress. Its definition is only a few lines away.
Next: Tracking the request’s status: defining the “displayStatus()” function >>
More JavaScript Articles
More By Alejandro Gervasio
/ 23 
