How to use AJAX for Web application development

First, Introduction

AJAX, an acronym for Asynchronous JavaScript and XML, is the latest technical word. Asynchrony means that you can send a request to a server via Hypertext Transfer Protocol (HTTP) and continue processing additional data while waiting for the response. This means, for example, that you can call a server-side script to retrieve data in XML from a database, send the data to a server in a database, or simply load an XML file to populate your Web site without refreshing the page. However, while this new technology provides great power, it also raises a lot of controversy over the "Back" button issue. This article will help you determine when using AJAX is the best choice in the real world.

First, I assume you have a basic understanding of the acronym JavaScript and XML parts. Although you can request any type of text file via Ajax, I focus on XML here. I will explain how to use Ajax in the real world and how to evaluate its value in a project. After you have finished reading this article, you will understand what Ajax is, in what circumstances, and how and how to use the technology. You will learn how to create objects, make requests, and customize responses while maintaining a visual experience for the user.

I have created a sample project for this article (you can download the source code). This example implements a simple request-it loads an XML file that contains the content of the page and analyzes the data to display it in an HTML page.

Ii. General properties and methods

Tables 1 and 2 provide an overview of the properties and methods-they are supported by browsers such as Windows Internet Explorer 5,mozilla,netscape 7,safari 1.2, and opera.

Table 1 Properties

Attribute description

onReadyStateChange the event handler is activated when the request object changes.

ReadyState returns a value indicating the current state of the object.

ResponseText the version of the response string from the server.

Responsexml a DOM-compliant document object from the server's response.

Status code of the response from the server.

StatusText the status message returned as a string.

Table 2 method

Method description

Abort () cancels the current HTTP request.

getAllResponseHeaders () retrieves all HTTP header values.

getResponseHeader ("Headerlabel") retrieves the value of an HTTP header from the body of the response.

Open ("Method", "URL" [, asyncflag[, "UserName" [, "Password"]]) Initializes a msxml2.xmlhttp request, specifying the method, URL, and authentication information from the request.

Send (content) sends an HTTP request to the server and receives a response.

setRequestHeader ("label", "value") specifies the name of an HTTP header.

Third, where to start

First, you need to create the XML file-we will request it later and analyze it as the page content. The file you are requesting must reside on the same server as the target project.

Next, create the HTML file that makes the request. The request occurs when the page is loaded by using the OnLoad method in the page body. Next, the file requires an ID div tag so that we can locate the content when we are ready to display it. When you have finished all of these, the main body of your page looks as follows: