Ajax| Program
AJAX, an acronym for Asynchronous JavaScript and XML, is a popular technology in today's fast-growing web development community. While this new technology provides great power, it also burns an indisputable argument over the "Back" button issue. The author of this article will explain how to use Ajax in the real world and how to evaluate its value in a project.
After you've finished reading this article, you'll understand what Ajax is, in what circumstances, and how and how to use it.
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
Property |
Describe |
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 response of the server. |
Status |
The status code of the response from the server. |
StatusText |
The status message returned as a string. |
Table 2 method
method |
description |
abort () |
|
getallresponseheaders () |
|
getresponseheader ("Headerlabel") |
Retrieves the value of an HTTP header from the response body. |
open ("Method", "URL" [, asyncflag[, "UserName" [, "Password"]]) |
|
send (content) |
|
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:
Iv. Creating the Request object
In order to create the request object, you must check whether the browser uses XMLHttpRequest or ActiveXObject. The main difference between the two objects is the use of their browsers. Windows IE version 5 and above use ActiveX objects, while Mozilla,netscape 7,opera and Safari 1.2 and above use XMLHttpRequest objects. Another difference is the way you create objects: Opera,mozilla,netscape and Safari allow you to simply invoke the object's constructor, but Windows IE needs to pass the object's name to the ActiveX constructor. Here's an example of how to create code to decide which object to use and how to create it:
if (window. XMLHttpRequest) {request = new XMLHttpRequest ();} else if (window. ActiveXObject) {request = new ActiveXObject ("MSXML2.") XMLHTTP ");} |
[1] [2] Next page