Ajax first Experience Hand posts

Ajax

Ajax is a hot thing in the past two years, I also join the fun, some days to find some tutorials to learn, the following is the whole process of learning to write their own things, but, because it is a beginner, so

Please forgive me if you have a mistake, and you are welcome to correct me, vipxjw#163.com.

PS. After the finished reading, the results again verify that the tutorial is really messy can, East said a piece of the West said, the level is not very clear said:).

1. Create a XMLHttpRequest Object

Now there are many browsers, the way to create XMLHttpRequest is not the same, so in order to be compatible with various browsers, in the creation of XMLHttpRequest should also take into account a variety of bangs

The situation of the navigator. The current mainstream browsers under Windows have IE, Firefox and opera, so we write code to try to be compatible with these several browsers. After referring to some information, I use

The following method creates the XMLHttpRequest object:

[Copy this Code] CODE:
First define a variable and assign the initial value to False to make it easy to determine if the object was created successfully

var xmlobj = false;

Use try to capture the creation failure, and then another way to create

try {

Use this method in Mozilla to create a XMLHttpRequest object

Xmlobj=new XMLHttpRequest;

}

catch (e) {

try {

If unsuccessful, try the way in newer IE

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

}

catch (E2) {

try {

Failure attempts to use the older version of IE in the way

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

}

catch (E3) {

or fail, it is assumed that the creation failed ...

Xmlobj=false;

}

}

}

If creating a XMLHttpRequest object fails, remind the visitor that the page may not be properly accessed

if (!xmlobj) {

Alert ("XMLHttpRequest init failed!");

}

2. Use XMLHttpRequest to get XML documents

Using XMLHttpRequest to get XML needs to be aware that this document must be in the same domain as myself, and my understanding is under the same domain name, or in the same directory, if it is not

An "Access Denied" error appears. At the local height, you must also run a Web server and not open the page directly in the browser.

[Copy this Code] CODE:
Open a request using the Open method, which has 3 parameters, namely, the request method, the URL of the request file, and the synchronization method (? Not quite clear what it is called:)

The request method can be one of the get,post,head, because I want to get the file, so I

Request the URL of the file, directly with the relative path

Synchronous mode, which indicates whether the request is waiting for a response (false) or continues to execute the following code (TRUE), which is called asynchronous. Ajax's first A is meant to be asynchronous, so here

With True

Xmlobj.open ("Get", "Sample.xml", true);

Because the asynchronous way is used, it is necessary to handle the state of the XMLHttpRequest object as it is changed.

Xmlobj.onreadystatechange=function () {

If the XMLHttpRequest state is 4, it should be ready, then continue processing

if (xmlobj.readystate==4) {

Need to determine whether the return state is OK, in some cases, if the file does not exist, to return 404

if (xmlobj.status==200) {

All OK, call the processing process

Domyxml ();

}

}

}

Send the request because it is get, so send's contents are null

Xmlobj.send (NULL);

3. Use ASP to create XML document

In order to dynamically display the need, it is necessary to use the Dynamic Web page, I use ASP.

[Copy this Code] CODE:
<%

' Modifier Header ID indicates that this is an XML document

Response.contenttype= "Text/xml"

' ......

Strxml= ""

' Here's what XML requires to output the contents of the database.

strxml=strxml& "..."

' ......

Response.Write (Strxml)

%>

4. Working with XML documents

After you get the XML document, get what you need, if I get the following XML document from the service:

[Copy this Code] CODE:

ajax study

study ajax

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

[Copy this Code] CODE:
function Domyxml () {

var xmldoc,items,title,content;

Get the XML document from the XMLHttpRequest object first

Xmldoc=xmlobj.responsexml;

Get Items again

Items=xmldoc.getelementsbytagname ("item");

Finally, according to TagName to get what you want.

If you have more than one item in an XML document, you can use the subscript of the array to represent the first few

Title=items[0].getelementsbytagname ("title") [0].firstchild.data;

Content=items[0].getelementsbytagname ("content") [0].firstchild.data;

}

Well, now that I've got what I want, I can show it.

5. Output processing Results

Let's assume that you have an HTML document that shows what you want to output:

[Copy this Code] CODE:

ajax study

This defines a DIV container with ID mydisplay to display the output, OK, and then go to JS:
The following is the program code
//... Connect Domyxml;

Content=items[0] ...

var strhtml;

Organize what you want to show first.

Strhtml= "Item title:" + title + "
item content:" + content;

Gets the target container, and then sets its innerhtml to be displayed

document.getElementById ("Mydisplay"). innerhtml=strhtml;

OK, these are almost the basis for writing AJAX programs, specifically to see the individual play, of course, Ajax and not only these, and if the Post method to send data, but this has not learned,

So that's all I can say '. Or that sentence, because it is a beginner, there are mistakes unavoidable, welcome to correct.