First AJAX experience

AJAX is a hot thing in the past two years, and I have also joined in the fun. I went to some tutorials the other day to learn about it. Next I will write my own things according to the entire process. However, because it is a beginner

Please forgive me for any errors. please correct me, vipxjw # 163.com.

PS. After writing it, I checked the result and again verified that it was really messy to write the tutorial. I spoke about it in east and west, but I am not very clear about it :).

1. Create an XMLHttpRequest object

There are many types of browsers, and the methods for creating XMLHttpRequest are also different. To be compatible with various browsers, you should also consider the various types of tokens when creating XMLHttpRequest.

Browser. Currently, mainstream browsers include IE, Firefox, and Opera in Windows, so the code we write should be compatible with these browsers as much as possible. I used

The following method creates an XMLHttpRequest object:

Copy codeThe Code is as follows:
// Define a variable and assign the initial value to false to determine whether the object is created successfully.

Var xmlObj = false;

// Use try to capture creation failures and try another method to create

Try {

// Use this method in Mozilla to create an XMLHttpRequest object

XmlObj = new XMLHttpRequest;

}

Catch (e ){

Try {

// If it fails, try the method in the newer IE

XmlObj = new ActiveXObject ("MSXML2.XMLHTTP ");

}

Catch (e2 ){

Try {

// If it fails, try the method in older version IE

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

}

Catch (e3 ){

// The creation fails ......

XmlObj = false;

}

}

}

// If the XMLHttpRequest object fails to be created, the system reminds the visitor that the page may not be accessed correctly.

If (! XmlObj ){

Alert ("XMLHttpRequest init Failed! ");

}

2. Use XMLHttpRequest to obtain XML documents

When using XMLHttpRequest to obtain XML, you must note that this document must be in the same domain as yourself. In my understanding, it is under the same domain name or in the same directory. If not

The "Access Denied" error may occur. A Web server must be run at the local height, instead of opening the webpage directly in the browser.

Copy codeThe Code is as follows:
// Use the open method to open a request. This method has three parameters: Request Method, request File URL, and synchronization method (? I am not very clear about the specific name :)

// The request method can be GET, POST, or HEAD.

// The URL of the request file. Use the relative path directly.

// Synchronous mode, indicating whether to wait for the response (false) after the request is sent or continue to execute the following code (true), that is, asynchronous. The first ajax a is asynchronous, so here

Use true

XmlObj. open ("GET", "sample. xml", true );

// Because the asynchronous method is used, the corresponding processing should be performed when the status of the XMLHttpRequest object changes.

XmlObj. onreadystatechange = function (){

// If the XMLHttpRequest status is 4, it should be ready, then continue to process

If (xmlObj. readyState = 4 ){

// Determine whether the returned status is 200 OK. In some cases, if the file does not exist, the system returns 404

If (xmlObj. status = 200 ){

// Call the handling process

DoMyXML ();

}

}

}

// Send the request. Because it is GET, the sent content is null.

XmlObj. send (null );

3. Use ASP to create XML documents

Dynamic Web pages are required for dynamic display. I use ASP.

Copy codeThe Code is as follows:
<%

'Modify the header identifier to indicate that this is an XML document

Response. ContentType = "text/xml"

'......

StrXML = "<? Xml versin = "" 1.0 "" encoding = "" gb2312 ""?> "

'Here, the content in the database is output according to XML requirements.

StrXML = strXML &"....."

'......

Response. Write (strXML)

%>

4. Process XML documents

After obtaining the XML document, you need to obtain the required information from it. For example, if I have obtained the following XML document from the service:

Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "gb2312"?>

<Root>

<Item>

<Title> AJAX Study </title>

<Content> Study AJAX </content>

</Item>

</Root>

What I want is the title and content, so you can do as follows:

Copy codeThe Code is as follows:
Function DoMyXML (){

Var xmlDoc, items, title, content;

// Obtain the XML document from the XMLHttpRequest object first

XmlDoc = xmlObj. responseXML;

// Obtain the items

Items = xmlDoc. getElementsByTagName ("item ");

// Obtain the desired content based on the TagName.

// If the XML document contains multiple items, you can use the subscript of the array to indicate the number of items.

Title = items [0]. getElementsByTagName ("title") [0]. firstChild. data;

Content = items [0]. getElementsByTagName ("content") [0]. firstChild. data;

}

Now that you have obtained what I want, you can display them.

5. output processing results

Assume that the following HTML document is used to display the content to be output:

Copy codeThe Code is as follows:
<Html>

<Head>

<Title> AJAX Study </title>

</Head>

<Body>

<Div id = "mydisplay"> </div>

</Body>

</Html>

A div container with the ID of mydisplay is defined here to display the output content. After that, go to JS:
[Code]
//... Connect to DoMyXML;

// Content = items [0] ......;

Var strHTML;

// Organize the content to be displayed first

StrHTML = "Item title:" + title + "<br/> Item content:" + content;

// Obtain the target container and set its innerHTML to the content to be displayed.

Document. getElementById ("mydisplay"). innerHTML = strHTML;
[/Code]
OK, these are almost the basis for compiling AJAX programs. The specific usage depends on the individual. Of course, AJAX is not the only one. If the POST method is used to send data, but this is not yet learned,

So we can only talk about these ^_^. Or that sentence, because it is a beginner and errors are inevitable. please correct me.