Electronics
Must have gadgets
electronics.gif
Notice that the image-url element contains the location of the URL for the image representing a category. The callback method of an AJAX interaction will parse the response XML document and call the addCategory function for each category included in the response XML document.

The addCategory function looks up a table row element “categoryTable” in body of the page and adds a row to the element which contains the image.

Q – 26 How do I provide internationalized AJAX interactions?

Ans- Just because you are using XML does not mean you can properly send and receive localized content using AJAX requests. To provide internationalized AJAX components you need to do the following:

* Set the charset of the page to an encoding that is supported by your target languages. I tend to use UTF-8 because it covers the most languages. The following meta declaration in a HTML/JSP page will set the content type:
* In the page JavaScript make sure to encode any parameters sent to the server. JavaScript provides the escape() function which returns Unicode escape strings in which localized text will appear in hexadecimal format. For more details on JavaScript encoding see Comparing escape(), encodeURI(), and encodeURIComponent().

* On the server-side component set the character encoding using the HttpServletRequest.setCharacterEncoding() method. Before you access the localized parameter using the HttpServletRequest.getParameter() call. In the case of UTF this would be request.setCharactherEncoding(“UTF-8”);.

A server-side component returning AJAX responses needs to set the encoding of the response to the same encoding used in the page.
response.setContentType(“text/xml;charset=;UTF-8″);
response.getWriter().write(” invalid “);

Q – 27 How do I test my AJAX code?

Ans- There is a port of JUnit for client-side JavaScript called JsUnit used to test AJAX code

Q – 28 Is Ajax just another name for XMLHttpRequest?

Ans- No. XMLHttpRequest is only part of the Ajax equation. XMLHttpRequest is the technical component that makes the asynchronous server communication possible; Ajax is our name for the overall approach described in the article, which relies not only on XMLHttpRequest, but on CSS, DOM, and other technologies.

Q – 29 Is AJAX code cross browser compatible?

Ans- Not totally. Most browsers offer a native XMLHttpRequest JavaScript object, while another one (Internet Explorer) require you to get it as an ActiveX object.

Q – 30 Is Ajax a technology platform or is it an architectural style?

Ans- It’s both. Ajax is a set of technologies being used together in a particular way.

Q – 31 Is Adaptive Path selling Ajax components or trademarking the name? Where can I download it?

Ans- Ajax isn’t something you can download. It’s an approach – a way of thinking about the architecture of web applications using certain technologies. Neither the Ajax name nor the approach are proprietary to Adaptive Path.

Q – 32 How do we handle concurrent AJAX requests?

Ans- With JavaScript you can have more than one AJAX request processing at a single time. In order to insure the proper post processing of code it is recommended that you use JavaScript Closures. The example below shows an XMLHttpRequest object abstracted by a JavaScript object called AJAXInteraction. As arguments you pass in the URL to call and the function to call when the processing is done.

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);
}
}

Q – 33 How do we get the XMLHttpRequest object in AJAX?

Ans- Depending upon the browser…
if (window.ActiveXObject)
{
// Internet Explorer http_request = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if.

Q – 34 How do we debug JavaScript?

Ans- There are not that many tools out there that will support both client-side and server-side debugging. I am certain this will change as AJAX applications proliferate. I currently do my client-side and server-side debugging separately. Below is some information on the client-side debuggers on some of the commonly used browsers.

* Firefox/Mozilla/Netscape – Have a built in debugger Venkman which can be helpful but there is a Firefox add on known as FireBug which provides all the information and AJAX developer would ever need including the ability to inspect the browser DOM, console access to the JavaScript runtime in the browser, and the ability to see the HTTP requests and responses (including those made by an XMLHttpRequest).

I tend to develop my applications initially on Firefox using Firebug then venture out to the other browsers.

* Safari – Has a debugger which needs to be enabled. See the Safari FAQ for details.

* Internet Explorer – There is MSDN Documentation on debugging JavaScript. A developer toolbar for Internet Explorer may also be helpful.

While debuggers help a common technique knowing as “Alert Debugging” may be used. In this case you place “alert()” function calls inline much like you would a System.out.println. While a little primitive it works for most basic cases. Some frameworks such as Dojo provide APIs for tracking debug statements.

Q – 35 How do we create a thread to do AJAX polling?

Ans- JavaScript does not have threads. JavaScript functions are called when an event happens in a page such as the page is loaded, a mouse click, or a form element gains focus. You can create a timer using the setTimeout which takes a function name and time in milliseconds as arguments. You can then loop by calling the same function as can be seen in the JavaScript example below.

function checkForMessage() {
// start AJAX interaction with processCallback as the callback function
}

// callback for the request
function processCallback() {

// do post processing

setTimeout(“checkForMessage()”, 10000);
}

Notice that the checkForMessage will continue to loop indefinitely. You may want to vary the increment the interval based on activity in the page or your use cases. You may also choose to have logic that would break out of the loop based on some AJAX response processing condition.

Q – 36 How do I access data from other domains to create a mashup with Java?

Ans- From your JavaScript clients you can access data in other domains if the return data is provide in JSON format. In essence you can create a JavaScript client that runs operates using data from a different server. This technique is know as JSON with Padding or JSONP.

There are questions as to whether this method is secure as you are retrieving data from outside your domain and allowing it to be executed in the context of your domain. Not all data from third parties is accessible as JSON and in some cases you may want an extra level of protection.

With Java you can provide a proxy to third party services using a web component such as a servlet. This proxy can manage the communication with a third party service and provide the data to your clients in a format of your choosing. You can also cache data at your proxy and reduce trips to service. For more on using a Java proxy to create mashups see The XmlHttpProxy Client for Java.

Q – 37 How do we abort the current XMLHttpRequest in AJAX?

Ans- Just call the abort() method on the request to abort the current XMLHttpRequest in AJAX.

Q – 38 How Ajax is Different?

Ans- An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary – an Ajax engine – between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine – written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf.

The Ajax engine allows the user’s interaction with the application to happen asynchronously – independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.

Q – 39 What about applets and plugins?

Ans- Don’t be too quick to dump your plugin or applet based portions of your application. While AJAX and DHTML can do drag and drop and other advanced user interfaces there still limitations especially when it comes to browser support. Plugins and applets have been around for a while and have been able to make AJAX like requests for years. Applets provide a great set of UI components and

APIs that provide developers literally anything.

Many people disregard applets or plugins because there is a startup time to initialize the plugin and there is no guarantee that the needed version of a plugin of JVM is installed.

Plugins and applets may not be as capable of manipulating the page DOM. If you are in a uniform environment or can depend on a specific JVM or plugin version being available (such as in a corporate environment) a plugin or applet solution is great.

One thing to consider is a mix of AJAX and applets or plugins. Flickr uses a combination of AJAX interactions/DHTML for labeling pictures and user interaction and a plugin for manipulating photos and photo sets to provide a great user experience. If you design your server-side components well they can talk to both types of clients.

Q – 40 What parts of the HTML_AJAX API are stable?

Ans- We don’t have a list right now, but most of the API is stable as of 0.3.0. There should be no major changes at this point, though there will be lots of new additions.

Q – 41 What kinds of applications is Ajax best suited for?

Ans- We don’t know yet. Because this is a relatively new approach, our understanding of where Ajax can best be applied is still in its infancy. Sometimes the traditional web application model is the most appropriate solution to a problem.

Q – 42 What JavaScript libraries and frameworks are available for AJAX support?

Ans- There are many libraries/frameworks out there (and many more emerging) that will help abstract such things as all the nasty browser differences. Three good libraries are The Dojo Toolkit, Prototype, and DWR.

* The Dojo Toolkit contains APIs and widgets to support the development of rich web applications. Dojo contains an intelligent packaging system, UI effects, drag and drop APIs, widget APIs, event abstraction, client storage APIs, and AJAX interaction APIs.

Dojo solves common usability issues such as support for dealing with the navigation such as the ability to detect the browser back button, the ability to support changes to the URL in the URL bar for bookmarking, and the ability to gracefully degrade when

AJAX/JavaScript is not fully support on the client. Dojo is the Swiss Army Knife of JavaScript libraries. It provides the widest range of options in a single library and it does a very good job supporting new and older browsers.

Q – 43 What is the XMLHttpRequest object in AJAX?

Ans- It offers a non-blocking way for JavaScript to communicate back to the web server to update only part of the web page.

Q – 44 What is the minimum version of PHP that needs to be running in order to use HTML_AJAX?

Ans- The oldest PHP version we’ve fully tested HTML_AJAX is 4.3.11, but it should run on 4.2.0 without any problems. (Testing reports from PHP versions older then 4.3.11 would be appreciated.)

Q – 45 What is the difference between proxied and proxyless calls in AJAX?

Ans- Proxied calls are made through stub objects that mimic your PHP classes on the JavaScript side in AJAX. E.g., the helloworld class from the Hello World example.

Proxyless calls are made using utility JavaScript functions like HTML_AJAX.replace() and HTML_AJAX.append() in AJAX.

Q – 46 What exactly is the W3C DOM?

Ans- The W3C Document Object Model (DOM) is defined by the W3C as the following: The Document Object Model is a platform- and language-neutral interface.

Q – 47 What do I need to know to create my own AJAX functionality?

Ans- If you plan not to reuse and existing AJAX component here are some of the things you will need to know.
Plan to learn Dynamic HTML (DHTML), the technology that is the foundation for AJAX. DHTML enables browser-base realtime interaction between a user and a web page. DHTML is the combination of JavaScript, the Document Object Model (DOM) and Cascading Style Sheets (CSS).

* JavaScript – JavaScript is a loosely typed object based scripting language supported by all major browsers and essential for AJAX interactions. JavaScript in a page is called when an event in a page occurs such as a page load, a mouse click, or a key press in a form element.
* DOM – An API for accessing and manipulating structured documents. In most cases DOM represent the structure of XML and HTML documents.
* CSS – Allows you to define the presentation of a page such as fonts, colors, sizes, and positioning. CSS allow for a clear separation of the presentation from the content and may be changed programmatically by JavaScript.
Understanding the basic request/response nature of HTTP is also important. Many subtle bugs can result if you ignore the differences between the GET and OIst methods when configuring an XMLHttpRequest and HTTP response codes when processing callbacks.
JavaScript is the client-side glue, in a sense. JavaScript is used to create the XMLHttpRequest Object and trigger the asynchronous call. JavaScript is used to parse the returned content.

Q – 48 What do I do on the server to interact with an AJAX client?

Ans- The “Content-Type” header needs to be set to”text/xml”. In servlets this may be done using the HttpServletResponse.setContentType()should be set to “text/xml” when the return type is XML. Many XMLHttpRequest implementations will result in an error if the “Content-Type” header is set The code below shows how to set the “Content-Type”.

response.setContentType(“text/xml”);
response.getWriter().write(“invalid”);

You may also want to set whether or not to set the caches header for cases such as autocomplete where you may want to notify proxy servers/and browsers not to cache the results.

response.setContentType(“text/xml”);
response.setHeader(“Cache-Control”, “no-cache”);
response.getWriter().write(“invalid”);

Note to the developer: Internet Explorer will automatically use a cached result of any AJAX response from a HTTP GET if this header is not set which can make things difficult for a developer. During development mode you may want set this header. Where do I store state with an AJAX client.

Q – 49 What browsers support AJAX?

Ans- Internet Explorer 5.0 and up,
Opera 7.6 and up,
Netscape 7.1 and up,
Firefox 1.0 and up,
Safari 1.2 and up,
among others support AJAX.

Q – 50 What Browsers does HTML_AJAX work with?

Ans- As of 0.3.0, all the examples that ship with HTML_AJAX have been verified to work with
* Firefox 1.0+
* Internet Explorer 5.5+ (5.0 should work but it hasn’t been tested)
Most things work with
* Safari 2+
* Opera 8.5+