|
How to debug JavaScript?
There are not so many tool means which would support debugging both client, and server parts. I am confident, that this situation will vary in process of growth of number of AJAX-applications. Now I carry out debugging client and server parts of the application separately. The information on debugging of a client part of the application for some most popular browsers below is resulted.
* Firefox/Mozilla/Netscape - have very useful built - in debugger Venkman. I initially develop my applications in Firefox, and then perenoshu them on other browsers.
* Safari - has a debugger which is required to be put into operation. Details look on: Safari FAQ.
* Internet Explorer - there is a documentation on debugging JavaScript: MSDN Documentation. Also the toolbar of the developer (developer toolbar) for Internet Explorer can be useful.
At use of debuggers it can be applied also and knowledge of the general{common} techniques, as for example a debugging conclusion (" Alert Debugging "). You simply place a call of function " alert () " inside code JavaScript is similar to call System.out.println () in a java-code. This small fragment suits the majority of cases.
Some systems, such as Dojo, give API for trace of debugged operators.
What HTTP-method - GET or POST - should be used for AJAX-calls?
HTTP method GET follows will not use for the data acquisition, returned on URL-search which parameters to vary. If the status is updated on the server, it is necessary to use HTTP-method GET. If the data of client AJAX-search will be updated on the server, HTTP-method POST should be used.
These rules will be coordinated with HTTP idempotency recommendations. Them strongly recommended to observe for preservation of consistency of architecture of the web-application.
How to give multilingual support for AJAX-searches?
That fact, that in AJAX-searches is used XML, at all does not mean, that you can correctly send and accept the located data without additional adjustments. For creation of the located AJAX-components, you should make the following:
* Appropriate{Give} to a character set (charset) on your web-page that coding which is supported by the languages chosen you. I usually use UTF-8 as she covers the majority of languages. The meta-declaration for the HTML/JSP-page, specifying the coding of the data:
<meta http-equiv = "Content-Type" content = " text/html; charset=UTF-8 ">
* In JavaScript-scripts it is necessary to code all parameters transmitted on the server. JavaScript has function escape () which returns escape-sequence (a text line) in coding Unicode where all national symbols are replaced with the sexadecimal performance. In more detail see: Comparison escape (), encodeURI (), and encodeURIComponent ().
* On the server party{side} set the coding of symbols with the help of method HttpServletRequest.setCharacterEncoding () before you will take the located parameter with the help of call HttpServletRequest.getParameter (). In case UTF it will look so: request.setCharactherEncoding ("UTF-8");.
In a server component at generation of AJAX-components, it is necessary to set the same coding, as for web-page:
response.setContentType (" text/xml; charset =; UTF-8 ");
response.getWriter () .write (" <response> invalid </response> ");
For the additional information on application AJAX with JEE technologies see: AJAX and Internationalization, and for development of multilingual applications: Developing Multilingual Web Applications Using JavaServer Pages Technology.
How to process parallel AJAX-searches?
Using JavaScript, it is possible to process some AJAX-searches simultaneously. To guarantee the correct order of their subsequent processing, it is recommended to use technics{technical equipment} JavaScript Closures.
The example shows use of the XMLHttpRequest-object latent inside other JavaScript-object with name AJAXInteraction below. As arguments of function AJAXInteraction () you pass URL on which the HTTP-search is sent, and function (callback) which is caused after processing search by the server.
function AJAXInteraction (url, callback) {
var req = init ();
req.onreadystatechange = processRequest;
function init () {
if (window. XMLHttpRequest) {
return new XMLHttpRequest ();
} else if (window. ActiveXObject) {
return new ActiveXObject (" Microsoft. XMLHTTP ");
}
}
function processRequest () {
if (req.readyState == 4) {
if (req.status == 200) {
if (callback) callback (req.responseXML);
}
}
}
this.doGet = function () {
req.open ("GET", url, true);
req.send (null);
}
this.doPost = function (body) {
req.open ("POST", url, true);
req.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");
req.send (body);
}
}
function makeRequest () {
var ai = new AJAXInteraction ("processme", function () {alert (" Doing Post Process ");});
ai.doGet ();
}
Function makeRequest () in the resulted example creates object AJAXInteraction with 2 parameters: URL with value "processme" and inline-function which will show Alert-dialogue with the message " Doing Post Process ". When the call ai.doGet is carried out (), is initiated AJAX-interaction and when the server component connected with URL "processme", will return the document, that is passed callback-function which has been determined at creation AJAXInteraction.
Application of technics{technical equipment} "closures" guarantees, that that will be caused callback-functions which is connected to corresponding AJAX-interaction. However it is necessary to show care at creation of the big number of closure-objects in the sense that creation of new objects XmlHttpRequests (as it is made in an example) will be limited to number of sockets (sockets), searches used for transfer at present time. It occurs owing to restriction on number of searches which can be carried out in parallel. For example, Internet Explorer resolves only 2 simultaneous AJAX-searches at present time. Other browsers can resolve the greater number of searches, but is usual from 3 up to 5. You also can use a pool of AJAXInteraction-objects.
It is necessary to note, that is usual, when the client carries out some AJAX-calls, the similar order of return of answers is not guaranteed against the server. Application of the technics{technical equipment} described above in callback-function of closure-object guarantees correct sequence of processing.
A lot of useful it is possible to gather from the discussion entitled Ajaxian Fire and Forget Pattern.
What it is necessary to make on the server for interaction with the AJAX-client?
To heading "Content-Type" value "text/xml" should be appropriated{given}. In servlete it is possible to make it with the help of method HttpServletResponse.setContentType () - it is necessary to pass him value "text/xml" when the returned data have type XML. However many realizations XMLHttpRequest will give a mistake if the heading "Content-Type" will be specified. The fragment of a code shows below how to set value for "Content-Type":
response.setContentType ("text/xml");
response.getWriter () .write (" <response> invalid </response> ");
You can set also value of heading "Cache-Control", for example, at use of autofilling to let know to the proxy-server and a browser not kehshirovat` the received results:
response.setContentType ("text/xml");
response.setHeader ("Cache-Control", "no-cache");
response.getWriter () .write (" <response> invalid </response> ");
The remark for developers: Internet Explorer will automatically use kehshirovannye results of AJAX-answers to HTTP-searches on method GET if the given heading is not set that can represent difficulty for developers. By development it it is necessary to take into account and appropriate{give} value to this heading.
Where it is necessary to store{keep} a status of the client at use AJAX?
As well as in case of other web-applications which are carried out in a browser, you have some variants:
* On the party{side} of the client in cookies.
The size of the data in this case is limited - approximately, 80 KB (it is usual about{near} (4 KB * 20 cookies) on the domain). Besides the data can be not protected, if them to not cipher (at use JavaScript it difficultly, but nevertheless it is possible).
* On the party{side} of the client in contents of web-page.
It is more protected variant, but he can complicate job. Details on this subject can be found on Storing State on the Client.
* On the party{side} of the client in file system.
It is feasible only in the event that the client will give to the applications which are carried out in a browser, access right on recording in files of local file system. Depending on various conditions it can be necessary, but necessary to be careful.
* On the server.
It is the closest to traditional model where the client serves only for visualization of the data stored{kept} on the server. Maintenance of synchronism of the data between the client and the server can appear problematic, but for this purpose there is a decision: Refreshing Data.
As recently data processing and management of them are more and more displaced on the party{side} of the client, probably, it is required to reconsider variants of storage of a status of the AJAX-client.
How to send the given forms (or its{her} separate part) without updating page?
At creation of the form it is necessary "form" to appoint in an element to attribute "onSubmit" a name of corresponding JavaScript-function which returns value false:
<form onSubmit = " doAJAXSubmit (); return false; ">
<input type = "text" id = "tf1"/>
<input type = "submit" id = "submit1" value = "Update"/>
</form>
Also for sending the form it is possible to use the button (a input-element "button" in an element "form"), having appointed her similarly corresponding JavaScript-function:
<form onSubmit = " doAJAXSubmit (); return false; ">
<input type = "text" id = "tf1"/>
<input type = "button" id = "button1" onClick = " doAJAXSubmit () " value = "Update"/>
</form>
Pay attention, that value of attribute of the form "onSubmit" is set and in this example. It is made correctly to process situations when the user, for example, during editing a text field will press a key "Enter" and the form will be sent.
At updating page it is recommended to wait, while the AJAX-call will successfully update the given forms, and then to update the data on page. Otherwise updating can be executed incorrectly, but the user will not know about it. I am usual during partial updating the data I take out the informative message, and after successful end of AJAX-interaction I update web-page.
Who should operate the application - the server or the client?
Management of the application can be concentrated at server components, and can be distributed{allocated} between the client and the server. It is necessary to analyze and choose the most suitable variant. For AJAX distribution of administrative functions between the client and the server is more favourable.
* Management is concentrated on the server.
Key problem at the centralized management - maintenance of synchronization of the data submitted on client web-page, with the similar data stored{kept} on the server. For the decision of this problem it is possible to make, for example, so, that the application will store{keep} all data on the server and to pass all changes in client performance (DOM) with the help of the simple JavaScript-controller.
* Management is distributed{allocated} between the client and the server.
This architecture uses JavaScript for processing events, manipulations with page, managements of appearance of page and visualization of model of the data at the client. The server party{side} is responsible for management of business - logic and transfer of the changed data of model to the client. In this case the server knows nothing about external performance except for a home page, the data for which are sent them in reply to client search.
There are cases when the AJAX-application can consist completely only of one page. Thus it is necessary to remember, that if you choose this type of management, it is necessary to think over carefully questions of navigation and creation of bookmarks.
The choice of a concrete variant of management depends on the purposes which you want to reach{achieve}. I prefer to distribute{allocate} management between the client and the server.
| 
