topic

AJA - AJAX without XML

For the beginning we shall consider the most general{common} variant of use AJAX. So, with help JavaScript the asynchronous HTTP-search about the server without perezagruzki all page is done{made}. Result of performance of search is the XML-document which then is processed on the client by means DOM with the help all of the same JavaScript. At once there is obvious one of problems of technology: small percent{interest} pereispol`zovanija a code. Look: on other page the server will return absolutely other data having the structure. Hence, the code which it is necessary to write on the client for processing these data, will depend on the data (in particular, from their structure). All this increases cost of development and creates problems at support and kastomizacii. This problem is solved by creation of more complex obrabotchika on the client, that, in turn, imposes the restrictions on structure of the data.

If the challenge, that is an opportunity to avoid complex data processing on the client is solved not so. In reply to search, the server can pass not the data in XML, and available HTML-performance which then is simply inserted into the necessary place on page. Certainly, from the point of view of architecture, it not the brilliant decision, but, for simple problems{tasks} quite comprehensible. The example of such simple problem and its{her} decision will be considered{examined} further. In this example the server will return only one text line.

Example: Guess number

I could choose any useful problem for an example, but it is very not interesting. So we shall realize the elementary game " Guess number ". For those who not from this planet, I remind rules. One of players thinks of number in limits from 1 up to 100. The second tries to guess this number, doing{making} the assumptions. In the answer the first player informs on the attitude{relation} of the conceived and prospective numbers: it is more or less. Basically, still it is necessary to count quantity{amount} of attempts for which the number has been guessed, but we shall not be engaged in it.

The report of data exchange during game will be very simple. The client will carry out on the server HTTP-search GET with parameters. Possible{probable} values of parameters and actions of the server are resulted in the table:

http://img204.imageshack.us/img204/8271/20ul.gif

Realization

Those who would not like to see at result, can play with the server in the game described above. Well and those for whom explanations are necessary, let read further.

On a server part I shall especially not stop, as its{her} realization depends on a platform of the web-application. I realized her as Java Servlet'b: GuessSerlvlet.java. The only thing on what it is necessary to concentrate attention, it that the server part deduces the data in coding UTF-8. I had problems with data acquisition on the client if their coding differed. Do not worry, even if your page in other coding (for example, in windows-1251), manual code conversion from UTF-8 is not required.

Now we pass to a client part. An initial code of page in a text format: guess.txt. If you confuse unfamiliar tegi (which a significant role do not play) can simply see{overlook} an initial code of a working example. For the beginning we shall see on static HTML:

<html>

...

...

...

...

</body>

</html>

Here we see a field for input of the text with id = "txtNumber." here the user will enter number. Still there are two buttons, on pressing on which JavaScript-functions guess and newGame are carried out. That they should do{make} to guess uneasy. Also on page there is an element "div", the having identifier "result." will be deduced{removed} here the answer of the server. Besides right after to loading of page procedure status will be executed. Now we pass to client logic.

Code on the client

For realization of logic on the client it is used JavaScript, as it is not surprising, since the comprehensible alternative no. We shall start to consider{examine} a code.

String.prototype.trim = function () {

return this.replace (/^s + | s + $/g, " ");

};

sUrl = "/servlet/examples/ajax/guess";

Here in class String very useful method trim is added. Also value sUrl. to this address is defined{determined} shall address to a server part of our application. Now we pass to functions which presence is necessary in the AJAX-application.

// Function returns a copy of class XMLHttpRequest

function getHTTPRequestObject () {

var xmlHttpRequest;

if (typeof ActiveXObject! = ' undefined ') {

xmlHttpRequest = new ActiveXObject (' Microsoft. XMLHTTP ');

} else if (typeof XMLHttpRequest! = ' undefined ') {

xmlHttpRequest = new XMLHttpRequest ();

} else {

xmlHttpRequest = false;

}

return xmlHttpRequest;

}

var httpRequester = getHTTPRequestObject (); // the Working copy of class XMLHttpRequest

// Carries out asynchronous GET

function makeAJAXCall (ajaxUrl) {

if (httpRequester) {

httpRequester.open ("GET", ajaxUrl, true);

httpRequester.onreadystatechange = processResponse;

httpRequester.send (null);

}

Here all is understandable and under comments. Function getHTTPRequestObject returns a copy of a key class which is used for asynchronous performance of searches. Procedure makeAJAXCall carries out asynchronous (it is defined{determined} by the third parameter in a method open) search GET to set ajaxURL. Pay attention to installation of value of property "onreadystatechange". Now at changes of value of property readyState object httpRequester function processResponse will be caused. We shall see at it{her}:

var READY_STATE_COMPLETE=4;

// CallBack-function. Deduces the data received asynchronously or the message on a mistake

function processResponse () {

if (httpRequester.readyState == READY_STATE_COMPLETE) {

if (httpRequester.status == 200) {

printToPage (" <font color = "blue"> " +httpRequester.responseText + " </font> ");

} else {

var message = " Problem retrieving data. requestStatus = " + httpRequester.status + ". Message = " + httpRequester.statusText;

printToPage (" <font color = "red"> " +message + " </font> ");

}

// We deduce{remove} transferred{handed} HTML in an element with id = "result"

function printToPage (value) {

resultDiv = document.getElementById ("result");

resultDiv.innerHTML = value;

}

In procedure processResponse will first of all be checked up value readyState: it is done{made} nothing, while the search is not completed. Value of property status is then checked. If it is equal 200 (HTTP OK) it's OK, and the received data are deduced on page by dark blue color. And if there was a mistake the corresponding message is deduced red. Directly the conclusion to page is carried out with procedure printToPage. She inserts the message in "div" with the identifier "result".

Now we pass to the business - logic of Her make three procedures:

// We begin new game

function newGame () {

printToPage (" <font color = "blue"> new game Begins... </font> ");

makeAJAXCall (sUrl + "? action=new ");

}

// We deduce{remove} the status current

function status () {

makeAJAXCall (sUrl + "? action=status ");

}

// Attempt to guess the number conceived by the server

function guess () {

var userNumberStr = document.getElementById ("txtNumber") .value.trim ();

...

printToPage (" <font color = "blue"> the Server thinks... </font> ");

makeAJAXCall (sUrl + "? action=guess*number = " + userNumberStr);

}

In procedure guess I have lowered{omitted} a code which is engaged in check of a correctness of value which was entered by the user.

That's all. It has been solved unpretentious zadachka without data transfer from the server in format XML. But in fact the user about it does not know, so it is safely possible to write on the site: AJAX Powered!