We use AJAX-object

AJAX (Asynchronous JavaScript and XML) - the term which not so long ago has come in a lexicon of founders of WEB-applications. He means the whole set of the technologies united within the framework of one interface and allowing to send searches without perezagruzki pages.

In this clause{article} we shall consider one of making AJAX-applications, namely the JavaScript-object generating searches. To penetrate into a principle of his  job unessentially, it is enough to copy a code in a separate file and if necessary to use. For those who has decided to understand job of the object some comments in a code are left.

AJAX-object

// Base object

var net = new Object ();

// Statuses of search

net. READY_STATE_UNINITIALIZED = 0;

net. READY_STATE_LOADING = 1;

net. READY_STATE_LOADED = 2;

net. READY_STATE_INTERACTIVE = 3;

net. READY_STATE_COMPLETE = 4;

// The designer

// key - the Key of search in a file requestsHash

// method - a method of sending of search (POST, GET)

// url - URL a script on the server which will process search

// params - parameters of search (test=1*flag=2)

// onload - callback-function, obrabotchik after loading

// onerror - callback-function, obrabotchik in case of a mistake

// contentType - type of a content of search (text/html)

// headers - other headings, except for content-type, for example, Expires

net. ContentLoader = function (key, method, url, params, onload, onerror, contentType, headers) {

this.hashKey = key;

// Property for rapoznavanija the browsers which are not supporting request

this.unrequestBrowser = false;

// request - object

this.req = null;

this.onload = onload;

// If she  no, is caused defoltnyj obrabotchik

this.onerror = (onerror)? onerror: this.defaultError;

// We cause a method for generation of search

this.loadXMLDoc (method, url, params, contentType, headers);

}

// All methods are written down in the prototype

net. ContentLoader.prototype = {// Methods

// loadXMLDoc - a method, for generation of request-search

loadXMLDoc: function (method, url, params, contentType, headers) {

if (! method) method = "GET";

if (! contentType ** method == "POST") contentType ='application/x-www-form-urlencoded ';

if (window. XMLHttpRequest) {

this.req=new XMLHttpRequest ();

} else if (window. ActiveXObject) {

this.req=new ActiveXObject (" Microsoft. XMLHTTP ");

} else {

this.unrequestBrowser = true;

return;

}

if (this.req) {

try {

this.req.open (method, url, true);

if (contentType) {

this.req.setRequestHeader ('Content-Type', contentType);

}

if (headers) {

for (var h in headers) {

this.req.setRequestHeader (h, headers [h]);

}

}

var loader=this;

this.req.onreadystatechange=function () {

loader.onReadyState.call (loader);

}

this.req.send (params);

} catch (err) {

this.onerror.call (this);

}

}

},

// onReadyState - a method for processing answers of the server

onReadyState: function () {

var req=this.req;

var ready=req.readyState;

if (ready == net. READY_STATE_COMPLETE) {

var httpStatus=req.status;

if (httpStatus == 200 || httpStatus == 0) {

this.onload.call (this);

} else {

this.onerror.call (this);

}

}

},

// defaultError - a method of processing of mistakes by default

defaultError: function () {

alert (" error fetching data! " + " \n\nreadyState: " + this.req.readyState + " \nstatus: " +this.req.status + "\nheaders: " +this.req.getAllResponseHeaders ());

}

}

// A file for storage of several searches

var requestsHash = [];

// The function creating a new copy of object net. ContentLoader

// Writes down searches in requestsHash

// Returns property unrequestBrowser

function setAjaxRequest (method, url, params, onload, onerror, contentType, headers) {

// Check of necessary parameters

if (! url) {

alert (" Necessary parameters are not specified ");

return;

}

requestsHash.push (new net. ContentLoader (requestsHash.length, method, url, params, onload, onerror, contentType, headers));

return requestsHash [requestsHash.length - 1] .unrequestBrowser;

}

Preparation

For creation of so-called asynchronous search and reception of the answer some conditions are required:

1) The server script which will accept search, will process it  and will give out the answer. As an example the PHP-script http://fastcoder.org/demo/ajaxDemo.php which on an output{exit} gives a XML-tree of such kind here will be used:

<xml>

<result> Success! </result>

<error> </error>

</xml>

2) Function which will send search. She already is (setAjaxRequest) and is built - in above mentioned AJAX-object, to her and we shall use.

3) Functions - obrabotchiki which will accept the answer (or a possible  mistake) and properly will react. They will be called as callback-function. It means that this for them will return the link to a copy of object net. ContentLoader.

// Function of processing of the answer

function ansHandler () {

// For processing the answer it is possible izpol`zovat` two basic properties of request-object

// responseText - will return the answer as a text variable

// responseXML - will return the XML-answer

// We shall consistently use both properties

alert (this.req.responseText);

// The XML-structure can be operated more effectively

// For example, to receive values of separate sites

var xml = this.req.responseXML.firstChild;

if (xml.nodeType! = 1) xml = xml.nextSibling; // fix for Opera

var result = xml.getElementsByTagName ("result") [0] .firstChild.nodeValue;

alert (" result = " + result);

}

// Function of processing of mistakes

function errorHandler () {

alert (" At processing search there was a mistake, repeat attempt again ");

}

Formation and sending of search

function doit () {

var method = "GET";

var url = " http: // fastcoder.org/demo/ajaxDemo.php ";

var params = false; // Without parameters

var onload = ansHandler;

var onerror = errorHandler;

var contentType = headers = false; // Without headings

return setAjaxRequest (method, url, params, onload, onerror, contentType, headers);

}

And any HTML-element, for example the link, for sending search:

<a onclick = " return doit (); " href = "*"> To send search </a>

Remarks

1) Browser Opera does not support version 8.0 request below. Actually for them property unrequestBrowser which comes back all functions also was created. If will return true there will be a simple transition under the link.

2) It is possible to improve and expand a script, but the necessary minimum (and even it is more) in this clause{article} is present. If you have found mistakes or came to a conclusion, that something essentially does not suffice - write.