jquery ajax study notes 2 responseXML_jquery using XMLHttpRequest object

Summary: This section supplements the second method in ajax study notes 1
: using the responseXML method of the XMLHttpRequest object to accept the DOM object of the XML data object
which has been used in the preparations and needs in ajax study notes 1 The knowledge is introduced in more detail. This section mainly introduces the code that needs to be modified and the new code
. Add a new servlet class
AJAXXMLServer.java

Copy code The code is as follows:

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
//XML data
public class AJAXXMLServer extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/html;charset=utf-8");
response.setContentType("text/xml;charset=utf-8"); //Modify this time to text/xml
PrintWriter out=response.getWriter();
//1. Get parameters
String old=request.getParameter("name");
StringBuffer sb=new StringBuffer();
sb.append("");
//2. Check if there is any problem
if(old==null||old.length()==0){
sb.append("Username cannot be empty").append(""); // Assembling XML
}else{
//3. Verification operation
String name=old;
if(name.equals("pan")){
//4. And traditional Apply the difference. This step requires returning the data that the user is interested in to the page, rather than sending a new page to the user
//The writing method has not changed, but the essence has changed
sb.append("user name[" name " ]Already exists").append(""); //Assemble XML
}else{
sb.append("Username[" name "] can be used").append(" "); //Assemble XML
}
}
out.println(sb.toString());//Note, this sentence must not be missing, and pay attention to its placement
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}
}

. Modify web.xml
Add the configuration of the AJAXXMLServer class
web.xml

Copy code Code As follows:

AJAXXMLServer
AJAXXMLServer


AJAXXMLServer
/AJAXXMLServer

. Modify the verify.js file
First place:

Copy code The code is as follows:

Change xmlhttp.open("GET","AJAXServer?name=" username,true);

to

Copy code The code is as follows:

xmlhttp.open("GET","AJAXXMLServer?name=" username,true);//responseXML method, modify the class name

Second place:
Copy
responseText

Code The code is as follows:

//Get the data returned by the server
//The first way: Get the plain text data output by the server
//var responseText=xmlhttp.responseText;
//Display the data on the page and find the element node corresponding to the div tag through dom
//var divNode=document.getElementById("result");
//Set the content of html in the element node
//divNode.innerHTML=responseText;

changed to:
responseXML

Copy code The code is as follows:

//Second way: Use responseXML to accept the DOM object of the XML data object
var domObj = xmlhttp.responseXML;
var messageNodes = domObj.getElementsByTagName("message");
//Get the text content in the message node
//The text in the message tag is a child node of the element node corresponding to the message tag in the dom. firstChild can get the first child node of the current node
if (messageNodes.length > 0) {
var textNode = messageNodes[0].firstChild;
//For text nodes, text can be returned through nodeValue
var responseMessage = textNode .nodeValue;
//Display the value responseMessage on the div
var divNode=document.getElementById("result");
divNode.innerHTML=responseMessage;
} else {
alert( "The XML data format is wrong, the original text content is:"

Copy code


The code is as follows:

if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/html "); } changed to:

text/xml

Copy code

The code is as follows:

if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml");//You need to modify this place when using XML } For IE browser, if the third part is not modified, no error will be reported, but for Firefox browser, if this part is not modified, the following statement will report an error

var domObj = xmlhttp.responseXML;

It can be verified by adding an alert statement. The if statement of the third modified code will not be executed in the IE browser. This if statement will be executed in the Firefox browser.

Explanation: access path, The running screenshots and ajax study notes 1 are already mentioned, so they are omitted.