Ajax JavaScript Code Snippets

These snippets all relate to Ajax (short for Asynchronous JavaScript and XML). It involves using a number of existing technologies together, including (X)HTML, Cascading Style Sheets, JavaScript, the Document Object Model, XML, XSLT, and the XMLHttpRequest object. When these technologies are combined in the Ajax model, Web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. The source code is available for all the snippets.

One of the main problems with manipulating XML files is the compatibility issue across different browsers. The purpose of the SoftXMLLib Library is to solve the problem of creating different XMLHTTP and XMLDOM objects for different browsers. This library includes basic functions and properties like those already included in Microsoft.XMLDOM ActiveXObject.

This is a JavaScript class, based on .NET’s XMLTextWriter. This is not a port, but a reduced and adapted version. It allows you to easily generate XML. The script is heavily commented for complete understanding.

Many browsers allow the XMLHTTPRequest object to be created directly. One method is to use this snippet. It tries all methods of creating the object until it discovers one that works.

JSONplus is regular JSON data format extended with functions as data type. Such format is in fact JavaScript Object Literal without variable declaration.

When a visitor clicks on a specific link, the content of that link is inserted into the page without a refresh. When a page doesn’t exist, a user-friendly error message is given. [Note: This is an edited version of the original script.]

This script does a Gmail-style check on the username supplied to see if it is a unique username, using the Ajax method (via the Sajax development version).

Use this script to load XML and HTML files with XMLHTTPREQUEST. In the div id=EchoTopic tag, just add the name of the file to load and the element to display the file in, usually a div element.

Use this script instead of frames. When a visitor clicks on a specific link, the content of that link is inserted into the page without a refresh. When a page doesn’t exist, a user-friendly error message is given.