The XMLHttpRequest object provides two attributes that can be used to access server responses. The first property responseText provides the response as a string, and the second property responseXML provides the response as an XML object XMLHttpRequest object with two attributes that can be used to access server response. The first property responseText provides the response as a string, and the second property responseXML provides the response as an XML object. Some simple use cases are suitable for obtaining responses by simple text, such as displaying the response in the warning box or the response is just a word indicating success or failure.
Use the innerHTML attribute to create dynamic content
If the server response is accessed as a simple text, the flexibility is poor. Simple text has no structure, so it is difficult to use JavaScript for logical expression, and it is also difficult to dynamically generate page content.
If the innerHTML attribute of the HTML element is used together, The responseText attribute becomes very useful. InnerHTML is a non-standard attribute that was first implemented in IE and later used by many other popular browsers. This is a simple string that indicates the content between a group of start and end tags.
By combining responseText and innerHTML, the server can "produce" or generate HTML content, which is "consumed" or processed by the browser using the innerHTML attribute. The following example shows a search function, which is implemented using the XMLHttpRequest object, its responseText attribute, and the innerHTML attribute of the HTML element. Click search to start search on the server. the server generates a result table as a response. When processing the response, the browser sets the innerHTML attribute of the div element to the responseText attribute value of the XMLHttpRequest object.
The procedure is as follows:1. click the search button to call the startRequest function. it first calls the createXMLHttpRequest function to initialize a new instance of the XMLHttpRequest object. 2. the startRequest function sets the callback function as the handleStateChange function. 3. the startRequest function uses the open () method to set the request method (GET) and request target, and sets it to asynchronously complete the request. 4. use the send () method of the XMLHttpRequest object to send the request; 5. the handleStateChange function is called every time the internal status of the XMLHttpRequest object changes. Once a response is received (if the value of the readyState attribute is 4), the innerHTML attribute of the div element is set using the responseText attribute of the XMLHttpRequest object. Code found 3-1 shows innerhtml.html. The code listing 3-2 shows innerHTML. xml, which indicates the content generated by the search.
Code List 3-1 innerHTML.html
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Using responseText with innerHTML
Var xmlHttp;
Function createXMLHttpRequest (){
If (window. ActiveXObject ){
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest ();
}
}
Function startRequest (){
CreateXMLHttpRequest ();
XmlHttp. onreadystatechange = handleStateChange;
XmlHttp. open ("GET", "innerHTML. xml", true );
XmlHttp. send (null );
}
Function handleStateChange (){
If (xmlHttp. readyState = 4 ){
If (xmlHttp. status = 200 ){
Document. getElementById ("results"). innerHTML = xmlHttp. responseText;
}
}
}
Script
Code List 3-2 innerHTML. xml
Activity Name
Location
Time
Waterskiing
Dock #1
9: 00 AM
Volleyball
East Court
2: 00 PM
Hiking
Trail 3
3: 30 PM
Using responseText and innerHTML can greatly simplify the process of adding dynamic content to the page. Unfortunately, this method has some defects. As mentioned above, the innerHTML attribute is not a standard attribute of the HTML element. Therefore, browsers compatible with the standard do not necessarily provide implementation of this attribute. However, most browsers currently support the innerHTML attribute. It is ridiculous that IE is the first browser to use innerHTML, but its innerHTML implementation is the most restricted. Nowadays, many browsers use the innerHTML attribute as the read/write attribute of all HTML elements. In contrast, Internet Explorer is limited. the innerHTML attribute is only a read-only attribute on HTML elements such as tables and table rows. to a certain extent, this restricts its usage.
