Important Facts About JavaScript and Related Technologies
- Initializing an AJAX Application
- Sending a GET Request
- Sending a POST Request
- Sending a Synchronous Request
- Receiving Multiple Data from the Server
- Aborting an HTTP Request
- Retrieving HTTP Headers
- Receiving XML from the Server
- Using JSON for Data (De)Serialization
- Creating a Waiting Screen
- Solving the Bookmark Problem
- Solving the Back Button Problem
- Using XSLT
- Using an XML Library
- Using the Yahoo! Web Service
AJAX has generated a huge buzz since the term was coined in February 2005. And although there is a lot of (justified) criticism, regarding both the term and the technology mix it is promising, the whole hype around AJAX led to the rebirth of JavaScript. Not only are underestimated capabilities of JavaScript carried into the daily work of web developers, but more advanced JavaScript features also are en vogue again. This chapter presents not only the most important facts (and phrases) regarding JavaScript, but also related technologies, especially XML handling with JavaScript.
Initializing an AJAX Application
XMLHttp = new XMLHttpRequest(); XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
The basis of all AJAX applications is the aforementioned XMLHttpRequest object. All AJAX-enabled browsers support it natively, but in Internet Explorer the ActiveX object is required. There is one exception, though: Internet Explorer 7 comes with native XMLHttpRequest support. The best approach to create the object is to use try...catch and to instantiate the native object first (to get Internet Explorer 7 on the right track even though this browser still supports ActiveX), and then the ActiveX version:
if (window.XMLHttpRequest) { // instantiate native object } else if (window.ActiveXObject) { // instantiate ActiveX object }
Regarding the ActiveX object, there are several opportunities to instantiate it. The reason: Microsoft ships various versions of their XML library where this object is hidden. A bulletproof solution would be to check for all versions, using a convoluted piece of code. However, the following approach checks only the most important versions and works on Internet Explorer 5 onward and on all other AJAX-aware browsers:
Creating the XMLHttpRequest Object (xmlhttp.js)
function getXMLHttp() { var XMLHttp = null; if (window.XMLHttpRequest) { try { XMLHttp = new XMLHttpRequest(); } catch (e) { } } else if (window.ActiveXObject) { try { XMLHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { XMLHttp = new ActiveXObject( "Microsoft.XMLHTTP"); } catch (e) { } } } return XMLHttp; }