Simple AJAX Example

This aims to be the easiest possible example demonstrating AJAX (Asynchronous JavaScript and XML).

AJAX is a technique rather than a technology: It describes how JavaScript can be used to pull data from the server using the XML HTTP Request object and then insert this data into the website using DOM. This is done asynchronously – that is, in the background, without having to refresh the whole page. The technology which AJAX is based on has already been available for a while, the combination is what makes it new.

You can try the examples online or download them and run them locally (except for the PHP script, that would require a webserver with PHP).

1. The DOM

The Document Object Model is the internal representation of your website. The DOM is accessible by JavaScript and provides a way to programmatically insert, remove and modify tags in your website (except that they are called elements or nodes instead of tags, because the DOM manipulates the data model in memory and not the representation as XML). This example shows how to set the content of the element with the id “foo” to “Hello, AJAX world!”: Read more…

AJAXing the Web

AJAX is one of the hottest new technologies, in the ever growing universe of Web development. In this article, we’ll get to know how AJAX fits in a real-world situation and how you can assess its value in a project. Hopefully, by the time you finish reading this article, you’ll know what AJAX is, why, and how to use it.Nothing really new about what is happening here.

The normal routine in Web development involves requesting a file from the Web Server and receiving a page as response. So whats new with AJAX. Just that the difference, is that requests are being made from the Client side Java Script, which is embedded within HTML.

So what is AJAX ?

AJAX is acronym of Asynchronous Java Script and XML Read more…

JavaScript Browser Detection

Browser detection is a vital tool when your web site looks different or does not function correctly when viewed in different browsers. Using Javascript, you can redirect viewers to different pages or display different content depending on a user’s browser.

We will use the index of function and the navigator object in order to preform browser detection. What we first need to do is to determine what type of browser the user is using. To do this, we use the navigator.userAgent function to determine the type (application) being used. We create a variable called browsername to do this. Here is what the script looks like so far: Read more…

Image Rollovers

Ever wonder how people make those images switch over when you put your mouse over them? Like so:

Well, they probably used Javascript. This tutorial will demonstrate one of the easiest ways to accomplish the rollover effect. Near the top of your HTML code, you need to insert a preloader script that will tell the browser to download the images you wish to have appear when the mouse is hovering over them. It is usually a good idea to put this code inside the tags. The code should look like this: Read more…

Style Sheet Switching

By using a little Javascript, you can allow users to switch between different style sheets and dramatically alter the appearance of a web page’s layout.

This first method creates a persistent style sheet. This means that the style sheet will definitely be loaded and enabled for use on this web page. Most style sheets used on the web are loaded in this manner by placing this code in the head area of an HTML document. The properties of the style change when we add a title attribute, like so:

<link rel="stylesheet" type="text/css" href="preferred.css" title="solder" /> Read more…