What Is Ajax



What Is Ajax?

Ajax stands for Asynchronous JavaScript and XML. Ajax isn’t a technology; it mixes well-known programming techniques in an uncommon way to enable web developers to build Internet applications with much more appealing user interfaces. When using desktop applications, we expect the results of our work to be made available immediately and without us having to wait for the whole screen to be redrawn by the program. While using a spreadsheet such as Excel, for instance, we expect the changes we make in one cell to propagate immediately through the neighboring cells while we continue to type, scroll the page, or use the mouse.

Unfortunately, this sort of interaction has rarely been available to users of web-based applications. Much more common is the experience of entering data into form fields, clicking on a button or link, and then sitting back while the page slowly reloads to exhibit the results of the request. In addition, we often find that the majority of the reloaded page consists of elements that are identical to those of the previous page and that have therefore been reloaded unnecessarily such as background images, logos, and menus.

Ajax gives a solution to this problem. By working as an extra layer between the browser and the web server, Ajax handles server communications in the background, submitting server requests and processing the returned data. The results may then be integrated into the page being viewed, without that page needing to be refreshed or a new one loaded.

In Ajax applications, such server requests are not necessarily synchronized with user actions such as clicking on buttons or links. A well-written Ajax application may already have asked of the server, and received, the data required by the user perhaps before the user even knew he wanted it. This is the meaning of the asynchronous part of the Ajax acronym.

The parts of an Ajax application that happen "under the hood" of the browser, such as sending server queries and dealing with the returned data, are written in JavaScript, and XML is a means of coding and transferring formatted information used by Ajax to efficiently transfer data between server and client.

What makes AJAX Useful?

AJAX development is a big step towards web development: instead of having to send everything to the server in a single, huge mass, then wait for the server to send back a new page for rendering, web developers can communicate with the server in smaller chunks, and selectively update specific areas of the page based on the server’s responses to those requests. This is where the word asynchronous in the AJAX originated.

It’s is easy to understand the idea of an asynchronous system by considering its opposite—a synchronous system. In a synchronous system, everything occurs in order. If a car race was a synchronous system, it would be a very dull affair. The car that started first on the grid would be the first across the finish line, followed by the car that started second, and so on. There would be no overtaking and if a car broke down, the traffic behind would be forced to stop and wait while the mechanics made their repairs. Traditional web applications use a synchronous system: you must wait for the server to send you the first page of a system before you can request the second page.

Traditional Web Application Vs Ajax Web Application

Fig. Traditional Web Application

Fig. AJAX Web Application

Ajax incorporates:

• standards-based presentation using XHTML and CSS.

• dynamic display and interaction using the Document Object Model.

• data interchange and manipulation using XML.

• asynchronous data retrieval using XMLHttpRequest.

• and JavaScript binding everything together.

Introducing HTTP

HTTP or Hypertext Transfer Protocol is the main protocol of the World Wide Web. Whenever you type a URL into the browser, an "http://" is prepended to the address, indicating that you will be using HTTP to access the information at the given location. The browser is an HTTP client, and the web page server is an HTTP server. HTTP defines a set of rules regarding how messages and other data should be formatted and exchanged between servers and browsers.

HTTP consists of two parts: a request and a response. When you type a URL in a web browser, the browser creates and sends a request on your behalf. This request contains the URL that you typed in as well as some information about the browser itself. The server receives this request and sends back a response. The response contains information about the request as well as the data located at the URL (if any). It's up to the browser to interpret the response and display the web page.

The HTTP Request and Response

The HTTP protocol can be compared to a conversation based on a series of questions and answers, which we refer to as HTTP requests and HTTP responses. The contents of HTTP requests and responses are easy to read and understand, being near to plain English in their syntax.

1. HTTP Request

The format of an HTTP request is as follows:

[]

After opening a connection to the intended server, the HTTP client transmits a request in the following format:

• An opening line

• A number of header lines

• A blank line

• Optionally, a message body

The opening line is generally split into three parts; the name of the method, the path to the required server resource, and the HTTP version being used. The request types defined in HTTP for Ajax developers are GET and POST. Anytime you type a URL in a web browser, the browser sends a GET request to the server for that URL, which basically tells the server to get the resource and send it back. For example:

GET / HTTP/1.1

Host:

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)

Gecko/20050225 Firefox/1.0.1

Connection: Keep-Alive

The first part of the request line specifies this as a GET request. The second part of that line is a forward slash (/), indicating that the request is for the root of the domain. The last part of the request line specifies to use HTTP version 1.1 (the alternative is 1.0). And where is the request sent? That's where the second line comes in.

The second line is the first header in the request, Host. The Host header indicates the target of the request. Combining Host with the forward slash from the first line tells the server that the request is for . (The Host header is a requirement of HTTP 1.1; the older version 1.0 didn't require it.) The third line contains the User-Agent header, which is accessible to both server- and client-side scripts and is the cornerstone of most browser-detection logic. This information is defined by the browser that you are using (in this example, Firefox 1.0.1) and is automatically sent on every request. The last line is the Connection header, which is typically set to Keep-Alive for browser operations. Note that there is a single blank line after this last header. Even though there is no request body, the blank line is required.

If you were to request a page under the domain, such as , the request would look like this:

GET /books/ HTTP/1.1

Host:

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)

Gecko/20050225 Firefox/1.0.1

Connection: Keep-Alive

Note that only the first line changed, and it contains only the part that comes after in the URL.

Sending parameters for a GET request requires that the extra information be appended to the URL itself. The format looks like this:

URL ? name1=value1&name2=value2&..&nameN=valueN

This information, called a query string, is duplicated in the request line of the HTTP request, as follows:

GET /books/?name=Professional%20Ajax HTTP/1.1

Host:

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)

Gecko/20050225 Firefox/1.0.1

Connection: Keep-Alive

Note that the text "Professional Ajax" had to be encoded, replacing the space with %20, in order to send it as a parameter to the URL. This is called URL encoding and is used in many parts of HTTP. (JavaScript has built-in functions to handle URL encoding and decoding; these are discussed later in the chapter). The name-value pairs are separated with an ampersand. Most server-side technologies will decode the request body automatically and provide access to these values in some sort of logical manner. Of course, it is up to the server to decide what to do with this data.

The POST request, on the other hand, provides additional information to the server in the request body. Typically, when you fill out an online form and submit it, that data is being sent through a POST request.

Here's what a typical POST request looks like:

POST / HTTP/1.1

Host:

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)

Gecko/20050225 Firefox/1.0.1

Content-Type: application/x-www-form-urlencoded

Content-Length: 40

Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley

You should note a few differences between a POST request and a GET request. First, the request line begins with POST instead of GET, indicating the type of request. You'll notice that the Host and User-Agent headers are still there, along with two new ones. The Content-Type header indicates how the request body is encoded. Browsers always encode post data as application/x-www-form-urlencoded, which is the MIME type for simple URL encoding. The Content-Length header indicates the byte length of the request body. After the Connection header and the blank line is the request body. As with most browser POST requests, this is made up of simple name-value pairs, where name is Professional Ajax and publisher is Wiley. You may recognize that this format is the same as that of query string parameters on URLs.

As mentioned previously, there are other HTTP request types, but they follow the same basic format as GET and POST. The next step is to take a look at what the server sends back in response to an HTTP request.

2. HTTP Response.

The format of an HTTP response, which is very similar to that of a request, is as follows:

[]

As you can see, the only real difference in a response is that the first line contains status information instead of request information. The status line tells you about the requested resource by providing a status code. Here's a sample HTTP response:

HTTP/1.1 200 OK

Date: Sat, 31 Dec 2005 23:59:59 GMT

Content-Type: text/html;charset=ISO-8859-1

Content-Length: 122

Wrox Homepage

In this example, the status line gives an HTTP status code of 200 and a message of OK. The status line always contains the status code and the corresponding short message so that there isn't any confusion. The most common status codes are:

• 200 (OK): The resource was found and all is well.

• 304 (NOT MODIFIED): The resource has not been modified since the last request. This is used most often for browser cache mechanisms.

• 401 (UNAUTHORIZED): The client is not authorized to access the resource. Often, this will cause the browser to ask for a user name and password to log in to the server.

• 403 (FORBIDDEN): The client failed to gain authorization. This typically happens if you fail to log in with a correct user name and password after a 401.

• 404 (NOT FOUND): The resource does not exist at the given location.

Following the status line are some headers. Typically, the server will return a Date header indicating the date and time that the response was generated. (Servers typically also return some information about themselves, although this is not required.) The next two headers should look familiar as well, as they are the same Content-Type and Content-Length headers used in POST requests. In this case, the Content-Type header specifies the MIME type for HTML (text/html) with an encoding of ISO-8859-1 (which is standard for the United States English resources). The body of the response simply contains the HTML source of the requested resource (although it could also contain plain text or binary data for other types of resources). It is this data that the browser displays to the user.

Note that there is no indication as to the type of request that asked for this response; however, this is of no consequence to the server. It is up to the client to know what type of data should be sent back for each type of request and to decide how that data should be used.

XMLHTTPRequest Object

This object allows for asynchronous GETs + POSTs to the server. It does not show the user anything i.e. no status messages. We can have multiple XMLHTTPRequest active at a time. It allows you to specify a handler method for state changes. Handler notified when request is: initialized, started, in the process of being returned, completely finished

Creating XMLHTTPRequest Object

You cannot make use of the XMLHTTPRequest until you have created an instance of it.

Microsoft first introduced the XMLHTTPRequest object, implementing it in Internet Explorer 5 as an ActiveX object. Microsoft first introduced the XMLHTTPRequest object, implementing it in Internet Explorer 5 as an ActiveX object.

The following line creates an XMLHTTPRequest object called request:

var request = new XMLHTTPRequest();

Here we have declared a variable request and assigned to it the value returned from the statement new XMLHTTPRequest(), which is invoking the constructor method for the XMLHTTPRequest object.

To achieve the equivalent result in Microsoft Internet Explorer, you need to create an ActiveX object. Here's an example:

var request = new ActiveXObject("Microsoft.XMLHTTP");

This assigns the name request to the new object.

Some versions of Internet Explorer have a different version of MSXML, the Microsoft XML parser, installed; in those cases you need to use the following instruction:

var request = new ActiveXObject("Msxml2.XMLHTTP");

For cross Browser detection , this is the following code:

function getXMLHTTPRequest()

{

var request = false;

try

{

request = new XMLHttpRequest(); /* e.g. Firefox */

}

catch(err1)

{

try

{

request = new ActiveXObject("Msxml2.XMLHTTP");

/* some versions IE */

}

catch(err2)

{

try

{

request = new ActiveXObject("Microsoft.XMLHTTP");

/* some versions IE */

}

catch(err3)

{

request = false;

}

}

}

return request;

}

Methods and Properties of XMLHTTPRequest Object

|Properties |Description |

|onreadystatechange |Determines which event handler will be called when the object's readyState property changes |

|readyState |Integer reporting the status of the request: |

| |0 = uninitialized |

| |1 = loading |

| |2 = loaded |

| |3 = interactive |

| |4 = completed |

|responseText |Data returned by the server in text string form |

|responseXML |Data returned by the server expressed as a document object |

|status |HTTP status code returned by server |

|statusText |HTTP reason phrase returned by server |

|Methods |Description |

|abort() |Stops the current request |

|getAllResponseHeaders() |Returns all headers as a string |

|getresponseHeader(x) |Returns the value of header x as a string |

|open('method','URL','a') |specifies the HTTP method (for example, GET or POST), the target URL, and whether the |

| |request should be handled asynchronously (If yes, a='TRue'the default; if no, a='false'.) |

|send(content) |Sends the request, optionally with POST data |

|setRequestHeader('x','y') |Sets a parameter and value pair x=y and assigns it to the header to be sent with the |

| |request |

Methods:

1. open():

The open() method prepares the XMLHTTPRequest object to communicate with the server. After you have created an XMLHttp object, you are ready to start making HTTP requests from JavaScript. The first step is to call the open() method, which initializes the object. The syntax is as under:

open(“method”, “URL”, [async, username, password])

You need to supply at least the two mandatory arguments to this method. First, specify which HTTP method you intend to use, usually GET or POST as a string value. Next, the destination URL of the request is included as the second argument. If making a GET request, this URL needs to be suitably encoded with any parameters and their values as part of the URL. For security reasons, the XMLHTTPRequest object is allowed to communicate only with URLs within its own domain. An attempt to connect to a remote domain results in a "permission denied" error message. Optionally you may include a third argument to the send request, a boolean value to declare whether the request is being sent in asynchronous mode. If async is set to false, the request is sent synchronously, and JavaScript waits for a response from the server before continuing code execution. That means if the response takes a long time, the user cannot interact with the browser until the response has completed. The default value is true. When set to true, the request is sent asynchronously, and JavaScript code execution continues without waiting for the response; you must use an event handler to watch for the response to the request.

2. send():

After creating XMLHTTPRequest using the open() method, you can send the request using the send() method. One argument is accepted by the send() function. The syntax is as under:

send(content)

If your request is a GET request, the request information will be encoded into the destination URL, and you can then simply invoke the send() method using the argument null:

objectname.send(null);

If your request is POST request, the content of the request (suitably encoded) will be passed as the argument.

objectname.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

objectname.send(var1=value1&var2=value2);

In this case we use the setRequestHeader() method to indicate what type of content we are including.

Properties:

1. onreadystate:

This property lets the user to handle asynchronous loading operations. If you assign the name of a JavaScript function in your script to this property, that function will be called each time the XMLHttpRequest object’s status changes - as when it’s downloading data. You can use a shortcut to assign a Javascript function to the onreadystate change property - you can create a function on the fly (sometimes called an anonymous function because it doesn’t have a name). To create a function on the fly, just use the function statement and define the body of this new function in curly braces this way:

.-------------

function getData(dataSource, divID)

{

if(XMLHttpRequestObject)

{

var obj = document.getElementById(divID);

XMLHttpRequestObject.open(“GET”, dataSource);

XMLHttpRequestObject.onreadystatechange = function()

{

.-------------

}

}

}

This new, anonymous function will be called when the XMLHttpRequest object undergoes some change, as when it downloads data. You need to watch two properties of this object here - the readyState property and the status property.

2. readystate:

The readyState property tells you how the data loading is going. This property is monitored by the onreadystatechange property, and changes in the value of readyState cause onreadystatechange to become true and therefore cause the appropriate function to be executed. The function called on completion of the server request is normally referred to as the callback function. There are five possible values for readyState:

• 0 (Uninitialized): The object has been created but the open() method hasn't been called.

• 1 (Loading): The open() method has been called but the request hasn't been sent.

• 2 (Loaded): The request has been sent.

• 3 (Interactive). A partial response has been received.

• 4 (Complete): All data has been received and the connection has been closed.

When a server request is first made, the value of readyState is set to zero, meaning uninitialized. As the server request progresses, data begins to be loaded by the server into the XMLHTTPRequest object, and the value of the readyState property changes accordingly, moving to 1 and then 2. An object readyState value of 3, interactive, indicates that the object is sufficiently progressed so that certain interactivity with it is possible, though the process is not yet fully complete. When the server request has completed fully and the object is available for further processing, the value of readyState changes finally to 4. In most practical cases, you should look for the readyState property to achieve a value of 4, at which point you can be assured that the server has finished its task and the XMLHTTPRequest object is ready for use.

3. status:

The status property holds the status of the download itself. (This is the standard HTTP status code that the browser got for the URL you supplied.) Here are some of the possible values the status property can hold (note that a value of 200 means everything is just fine):

• 200 - OK - The request succeeded.

• 204 - No Content - The document contains no data.

• 401 - Unauthorized - The request needs user authentication.

• 403 - Forbidden - The server has refused to fulfill the request

• 404 - Not Found - The requested resource does not exist on the server.

• 408 - Request Timeout - The client failed to send a request in the time allowed by the server.

• 500 - Internal Server Error - Due to a malfunctioning script, server configuration error or similar.

For example:

--------

function getData(dataSource, divID)

{

if(XMLHttpRequestObject)

{

var obj = document.getElementById(divID);

XMLHttpRequestObject.open(“GET”, dataSource);

XMLHttpRequestObject.onreadystatechange = function()

{

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)

{

--------

}

}

}

}

4. statusText:

This property contains the text description of the status (such as "OK" or "Not Found"). For example:

if (xmlHttp.status == 200)

alert("Data returned is: "+ xmlHttp.responseText;

else

alert("An error occurred: "+ xmlHttp.statusText;

5. responseText and responseXML:

These properties represent the data returned from the server. To get the data from server use either of the two properties.

The responseText property tries to represent the information returned by the server as a text string. For example:

-------------

function getData(dataSource, divID)

{

if(XMLHttpRequestObject)

{

var obj = document.getElementById(divID);

XMLHttpRequestObject.open(“GET”, dataSource);

XMLHttpRequestObject.onreadystatechange = function()

{

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)

{

obj.innerHTML = XMLHttpRequestObject.responseText;

}

}

}

}

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download