First Ajax experience

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. Thank you for your correction.

1. Create an XMLHTTPRequest object

There are many types of browsers, and the methods for creating XMLHttpRequest are also different. Therefore, to be compatible with various browsers, various browsers should also be taken into account when creating XMLHttpRequest. Currently, mainstream browsers include IE, Firefox, and opera in windows.CodeTry to be compatible with these browsers. After referring to some materials, I used the following method to create the XMLHTTPRequest object:

Code:

// 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, an "Access Denied" error occurs. A Web server must be run at the local height, instead of opening the webpage directly in the browser.

Code:

// 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 true is used here.
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.

Code:

<%
'Modify the header identifier to indicate that this is an XML document
Response. contenttype = "text/XML"
'......
Strxml = "<? XML versin = "" 1.0 "" encoding = "" UTF-8 ""?> "
'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:

Code:

<? 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:

Code:

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:

Code:

<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;

Okay, these are about to write Ajax.ProgramFor more information, see Ajax.