Use XMLHTTPRequest object for asynchronous AJAX Data Interaction
Server Side code and request page see http://www.cnblogs.com/linjiqin/archive/2011/03/26/1996629.html
The js Code is as follows:
// User name Verification Method
// Use the XMLHTTPRequest object for asynchronous AJAX Data Interaction
Var xmlhttp;
Function verify (){
Var userName = document. getElementById ("userName"). value;
// 1. Create an XMLHttpRequest object
// This is the most complex step in the absence of an XMLHttpReuquest object
// You need to create this object for IE and other types of browsers to write different code.
If (window. XMLHttpRequest ){
// For FireFox, javasillar, Opera, Safari, IE7, and IE8
Xmlhttp = new XMLHttpRequest ();
// Fix bugs in some specific versions of javasillar browsers
If (xmlhttp. overrideMimeType ){
Xmlhttp. overrideMimeType ("text/xml ");
}
} Else if (window. ActiveXObject ){
// For IE6, IE5.5, and IE5
// Two control names that can be used to create the XMLHTTPRequest object are saved in a js array.
// The previous version is newer
Var activexName = ["MSXML2.XMLHTTP", "Microsoft. XMLHTTP"];
For (var I = 0; I <activexName. length; I ++ ){
Try {
// Retrieve a control name for creation. If the creation is successful, terminate the loop.
// If creation fails, an exception is thrown back. You can continue the loop and try again.
Xmlhttp = new ActiveXObject (activexName [I]);
Break;
} Catch (e ){
}
}
}
// Confirm that the XMLHTtpRequest object is successfully created
If (! Xmlhttp ){
Alert ("XMLHttpRequest object creation failed !! ");
Return;
} Else {
Alert (xmlhttp. readyState );
}
// 2. register the callback function
// When registering a callback function, the function name is required. Do not enclose it in parentheses.
// We need to register the function name. If brackets are added, the return value of the function will be registered. This is incorrect.
Xmlhttp. onreadystatechange = callback;
// 3. Set connection information
// The first parameter indicates the http request method. It supports all http request methods, mainly using get and post.
// The second parameter indicates the url of the request, and the parameters of the get request are also in the url
// The third parameter indicates asynchronous or synchronous interaction, and true indicates Asynchronous interaction.
// Xmlhttp. open ("GET", "servlet/ajaxXmlServer? Name = "+ userName, true );
// POST Request Code
Xmlhttp. open ("POST", "servlet/ajaxXmlServer", true );
// Set the http request header in POST mode.
Xmlhttp. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ");
// Send data in POST Mode
Xmlhttp. send ("name =" + userName );
// 4. Send data and start interaction with the server
// In synchronous mode, the send statement is executed only after the server segment data is returned.
// In asynchronous mode, the send statement is executed immediately.
// Xmlhttp. send (null );
}
// Callback function
Function callback (){
// Alert (xmlhttp. readyState );
// 5. Receive response data
// Determine whether the object state is interactive.
If (xmlhttp. readyState = 4 ){
// Determine whether http interaction is successful
If (xmlhttp. status = 200 ){
// Use responseXML to receive DOM objects of XML Data Objects
Var domObj = xmlhttp. responseXML;
If (domObj ){
/< Message> 123123123 </message>
// Use getElementsByTagName In the dom to obtain the Element Node Based on the tag name. An array is returned.
Var messageNodes = domObj. getElementsByTagName ("message ");
If (messageNodes. length> 0 ){
// Obtain the text content in the message Node
// The text in the message label is the byte point of the element node corresponding to the message label in the dom. firstChild can obtain the first subnode of the current node.
// The Node corresponding to the text content can be obtained through the following methods
Var textNode = messageNodes [0]. firstChild;
// For a text node, nodeValue can be used to return the text content of the text node.
Var responseMessage = textNode. nodeValue;
// Display data on the page
// Use dom to find the Element Node corresponding to the div tag
Var divNode = document. getElementById ("result ");
// Set the html content in the Element Node
DivNode. innerHTML = responseMessage;
} Else {
Alert ("XML data format error, original text content:" + xmlhttp. responseText );
}
} Else {
Alert ("XML data format error, original text content:" + xmlhttp. responseText );
}
} Else {
Alert ("error !!! ");
}
}
}