Introduction to Ajax XMLHttpRequest and real-time detection of user names are registered

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, the creation of XMLHttpRequest should also take into account the situation of various browsers. 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 referencing some of the data, I use the following method to create the XMLHttpRequest object:

The code is as follows

Copy 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, and if not, there will be an "access denied" error. At the local height, you must also run a Web server and not open the page directly in the browser.

The code is as follows

Copy 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's 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.

The code is as follows	Copy Code
<% ' Modifier Header ID indicates that this is an XML document Response.contenttype= "Text/xml" ' ...... Strxml= "<?xml versin=" "1.0" "encoding=" "Utf-8" "?>" ' 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:

The code is as follows	Copy Code
<?xml version= "1.0" encoding= "gb2312"?> <root> <item> <title>ajax study</title> <content>study ajax</content> </item> </root>

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

code is as follows

copy code

function Domyxml () {     var xmldoc,items,title,content;    // Get the XML document     Xmldoc=xmlobj.responsexml from the XMLHttpRequest object First,    //Get Items     items=xmldoc.getelementsbytagname ("item");    //Finally get what you want with tagname    //If there is more than one item in the 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:

The code is as follows	Copy Code
<title>ajax study</title> <body> <div id= "Mydisplay" ></div> </body>

This defines a DIV container with ID mydisplay to display the output, OK, and then go to JS:

The code is as follows	Copy Code
//... Connect Domyxml; Content=items[0] ... var strhtml; Organize what you want to show first. Strhtml= "Item title:" + title + "<br/>item content:" + content; Gets the target container, and then sets its innerhtml to be displayed document.getElementById ("Mydisplay"). innerhtml=strhtml;

Now let's take a look at an AJAX application of registered user Instant detection instance

Instance 1

First, define the XMLHTTP object

The code is as follows	Copy Code
var xmlHttp = false; try { XmlHttp = new ActiveXObject ("Msxml2.xmlhttp"); catch (e) { try { XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP"); } catch (E2) { XmlHttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!= "undefined") { XmlHttp = new XMLHttpRequest (); }

For a description of this section, please see
Next is the Custom function

The code is as follows	Copy Code
function CallServer () { var u_name = document.getElementById ("U_name"). Value; if ((U_name = null) | | (U_name = "")) Return var url = "Cu.asp?name=" + Escape (u_name); Xmlhttp.open ("Get", url, True); Xmlhttp.onreadystatechange = Updatepage; Xmlhttp.send (NULL); }

The main function of the function is to get the contents of the cu.asp asynchronously, before this will extract the current page form element "U_name" that is the User Name text box Zhogn value, by cu.asp parameters and assignment after the different results (true or false).

So here is the cu.asp, his main function is to accept the URL parameter name value to do content display, the content is t1.htm asynchronous acquisition.

The code is as follows	Copy Code
<!--Cu.asp's source code example--> <!--#include file= "conn.asp"--> <% Name=request.querystring ("name") Set rs = Server.CreateObject ("ADODB.") Recordset ") sql = "SELECT * from U_ser where u_name=" "&name&" "" Rs. Open sql,conn,1,1 If rs.eof and Rs.bof then Response.Write ("true") Else Response.Write ("false") End If Rs.close Set rs=nothing Call CloseDatabase %>

How do I display the information I get asynchronously on the current page?

The code is as follows	Copy Code
function Updatepage () { if (Xmlhttp.readystate < 4) { Test1.innerhtml= "Loading ..."; } if (xmlhttp.readystate = = 4) { var response = Xmlhttp.responsetext; Test1.innerhtml=response; } }

This will enable the detection of the user name is registered, so that the Ajax registration seems to be very simple