AJAX application

Introduction

This AJAX two years ago was in Turkmenistan (and the word AJAX had not yet invented). The web-pages are updated on the fly, of course. On the contrary, without AJAX difficult to imagine some services.
It worked conventional web? Typically, the event (click on the link or by pressing a button) browser responds simply a request server. When the response came from the server, the contents page is updated.
One of the problems was that when you update the contents of a web page is transferred to the new state. The information on the previous state is only stored the data provided in the request. The more accurate information on the same condition of need, the more data must be sent in the request.
Another disadvantage is the need to send duplicate data sets client after each event. For example, if a user mistake when filling out the form, instead of short error is again loaded and form, and all information entered previously.
Modern browsers that support standards W3C DOM can bring web to a new level.
The interaction is almost the same. Here are just queries and receives a response from the server now script on the client side, but instead to update the page is updated, only part of it (instead of updating may be other options, for example, sent the following).
WebDAV distributed produced, and is part of the logic on the client side, and some server side. Such applications, and as the term "AJAX Applications (acronym stands for Asynchronous Javascript And Xml Applications).

XMLHTTPRequest object

For asynchronous requests from the client to the server-side browser is a special object called XMLHTTPRequest.
What methods and properties of the object that will be used beyond :

• XMLHTTPRequest.open ( "method", "URL", async, "uname", "pswd"), a request to the server.
  
  
  • method, type of request, such as GET
  • URL - URL, for example http://localhost/file.xml
  • async - if True, it will be used asynchronous request, the implementation of the script will continue after the news. Otherwise, you would expect a response from the server freezing UI.
  • uname, pswd-ID and password for easy veb-avtorizatsii.
  
  
• XMLHTTPRequest.send ( "content"), sends a request to a server. The content can be data for POST-zaprosa or an empty string.
• XMLHTTPRequest.onreadystatechange-handler triggering events for each change of the facility. The facility may be as follows :
  
  
  • - 0 before the request has been sent (uninitialized)
  • 1-object initialized (loading)
  • 2-response from the server (loaded)
  • 3-connection active (interactive)
  • 4-completed facility (complete)
  
  
• XMLHTTPRequest.responseText return from the server data as a string.
• XMLHTTPRequest.responseXML if server response came in the form of a valid XML, returns XML DOM object.
• XMLHTTPRequest.status return HTTP-otveta status as a number. For example, if the requested page 404 has been found on the server.

Consider the use of the facility by the simple AJAX-prilozheniya.

Paul SELECT finding

Suppose we have a table with a million records. The user must choose only one entry in the table (a relationship of "one to many"). Select the user is only one step in filling a large web.
Naturally, in order to enable the user to select an entry from a million, needed some means of finding this very account. For example, a simple text search by name.
In traditional web for this purpose would have to use a separate page and keep the rest in the form of a user session or break the process of filling forms at several stages. In AJAX-prilozhenii additional page is not required.
Select entries will be realized through two elements web. The first element is the text box where the user enters a keyword. It is sent to the server, and he returns only rows of tables that meet the search conditions. Server (a list) is placed in the SELECT, which the user and makes the final choice. Thus, when sending all forms server gets selected in the SELECT value in the form of ID records from a large table.
In HTML, it may look like this : <input type="text"<br />onkeyup="lookup(this.value, 'id_select',<br />'http://localhost/cgi-bin/xmlhttp.cgi')" /> In any event KeyUp (wheel button) in the text box link lookup ( 'text', 'id-selecta', 'url') <span onmouseover="_tipon(this)" onmouseout="_tipoff()">function lookup (text, select_id, url) (/ / Get the XMLHTTPRequest object if (! this.http) = (this.http get_http (); this.working = false;) / / query if (! this.working & & this.http) (var = this.http http; / / If in the text box below three / / characters are not doing anything if (text.length <3) return; / / add encrypted text / / in the URL url = url + "? text = "+ encodeURIComponent (text); / / create a query this.http.open ( "GET", url, true); / / attaching to the request funktsiyu-obrabotchik / / events this.http.onreadystatechange = function () (/ / 4-data ready for processing if (http.readyState == 4) (fill (select_id, http.responseText); this.working = false;) else (/ / data reception, / / user can amusement / / reports / / ZHDITE ANSWER)) this.working = true; this.http.send (null);) if (! this.http) (alert ( 'Error creating XMLHTTP object! '))) </span> As can be seen, at the beginning we get XMLHTTP-obekt using get_http (). The search text encoded in style and shape GET-zapros URL to the server. URL in this case would look something like this : http://localhost/cgi-bin/xmlhttp.cgi?text =...
The script on the server, receiving important text makes search in the table and sends a customer. In what events XMLHTTP object that the data received from the server and ready for use, fill link ( 'select_id', 'data'), which fill the SELECT list of scientific data.
The get_http () is the realization of kross-brauzernaya XMLHTTP object (in each browser, it produced its own). Its implementation comments you can easily find on the Internet, that is to say, an example of a textbook. <span onmouseover="_tipon(this)" onmouseout="_tipoff()">get_http function () (var xmlhttp; / * @ cc_on @ if (@ _jscript_version> = 5) try (xmlhttp = new ActiveXObject ( "Msxml2.XMLHTTP");) catch (e) (try (xmlhttp = new ActiveXObject ( "Microsoft.XMLHTTP");) catch (E) (xmlhttp = false;)) @ else xmlhttp = false; end @ @ * / if (! xmlhttp & & typeof XMLHttpRequest! = 'undefined') (try (xmlhttp = new XMLHttpRequest ();) catch (e) (xmlhttp = false;)) xmlhttp return;) </span> The fill () gets to enter a value for the ID SELECT list to be filled, and the data retrieved from the server.
For simplicity, assume that the data from the server, we get a table, fields which are divided tab 't', a symbol of the line-transfer lines' n ':
id1tname1n
id2tname2n
... The contents of this table, we will complete the field SELECT OPTION elements. <span onmouseover="_tipon(this)" onmouseout="_tipoff()">function fill (select_id, data) (/ / SELECT field in the form of variable var select = document.getElementById (select_id); / / purifying select.options.length SELECT = 0; / / if no data is not doing nothing else if (data.length == 0) return; / / in the array arr-line derived tables var arr = data.split ( 'n'); / / for each line for (var i in arr) (/ / in an array of fields val - val = table arr [i]. split ( 't'); / / add a new site to our OPTION SELECT select.options [select.options.length] = new Option (val [1] [0] val, false, false);)) </span> Done. Now for any web application, we can realize the importance of this choice multimillion list, which the user will be like a few keystroke. The network selection occurs almost instantly. In the case of unstable or slower connections to the server, it must also notify the user that the loading of data from the server is not yet complete. Worth and provide funds to respond to sever the connection.