Use XHR objects to send and accept xml data

Source: Internet
Author: User

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 !!! ");
}
}
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.