jquery ajax 연구 노트 2 XMLHttpRequest 객체를 사용하는 responseXML_jquery

요약: 이 섹션에서는 Ajax 연구 노트 1
의 두 번째 방법을 보완합니다. XMLHttpRequest 객체의 responseXML 메소드를 사용하여 Ajax 연구에서 준비 및 요구 사항에 사용된 XML 데이터 객체
의 DOM 객체를 허용합니다. 참고사항 1 수정해야 할 코드와 새로운 코드
를 중심으로 지식을 소개합니다.
AJAXXMLServer.java

코드 복사 코드는 다음과 같습니다.

import javax.servlet.http.HttpServlet
import javax.servlet.http. HttpServletRequest;
import javax.servlet.ServletException;
import java.io.PrintWriter; data
public class AJAXXMLServer 확장 HttpServlet {
public void doGet(HttpServletRequest 요청, HttpServletResponse 응답)
throws ServletException, IOException {
//response.setContentType("text/html;charset=utf-8 ");
response.setContentType("text/xml;charset=utf-8"); //이번에는 text/xml로 수정
PrintWriter out=response.getWriter();
//1 . 매개변수 가져오기
String old=request.getParameter("name");
StringBuffer sb=new StringBuffer()
sb.append(""); . 문제가 있는지 확인하세요
if(old==null||old.length()==0){
sb.append("사용자 이름은 비워둘 수 없습니다.").append("}else{
//3. 확인 작업
String name=old;
if(name.equals("pan")){
/ /4.그리고 전통적 차이를 적용한다. 이 단계에서는 사용자에게 새 페이지를 보내는 것이 아니라 사용자가 관심 있는 데이터를 페이지로 반환해야 합니다
//작성 방법은 변하지 않았지만 본질이 바뀌었습니다
sb.append(" 사용자 이름[" name " ]이미 존재합니다").append(""); //XML 어셈블
}else{
sb.append("사용자 이름[" name "]을 사용할 수 있습니다. ").append(" "); //XML 어셈블
}
}
out.println(sb.toString());//참고, 이 문장은 누락되어서는 안 됩니다. , 배치에 주의하세요
}
public void doPost(HttpServletRequest, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response)
}


. web.xml 수정
AJAXXMLServer 클래스
web.xml

코드 복사

코드는 다음과 같습니다. AJAXXMLServer AJAXXMLServer

AJAXXMLServer/ AJAXXMLServer

verify.js 파일 수정
1위:



코드 복사

코드는 다음과 같습니다.

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

코드 복사

코드는 다음과 같습니다.

xmlhttp.open("GET","AJAXXMLServer?name=" 사용자 이름,true);//responseXML 메서드, 클래스 이름 수정 두 번째 장소: 복사 responseText

코드

코드는 다음과 같습니다.

//서버에서 반환된 데이터 가져오기//첫 번째 방법: 서버에서 일반 텍스트 데이터 출력을 가져옵니다.//var responseText=xmlhttp.responseText //페이지에 데이터를 표시하고 다음을 통해 div 태그에 해당하는 요소 노드를 찾습니다. dom //var divNode=document.getElementById("result"); //요소 노드에 html 콘텐츠 설정 //divNode.innerHTML=responseText

변경됨:
responseXML




코드 복사

코드는 다음과 같습니다.

//두 번째 방법: responseXML을 사용하여 XML 데이터 개체의 DOM 개체를 허용합니다.
var domObj = xmlhttp.responseXML;
var messageNodes = domObj.getElementsByTagName("message"); >//메시지 노드에서 텍스트 콘텐츠 가져오기
//메시지 태그의 텍스트는 dom의 메시지 태그에 해당하는 요소 노드의 하위 노드입니다. firstChild는 현재 노드의 첫 번째 하위 노드를 가져올 수 있습니다.
if (messageNodes.length > 0) {
var textNode = messageNodes[0].firstChild;
//텍스트 노드의 경우 nodeValue를 통해 텍스트를 반환할 수 있습니다.
var responseMessage = textNode .nodeValue ;
//div에 responseMessage 값 표시
var divNode=document.getElementById("result")
divNode.innerHTML=responseMessage;
} else {
alert( "The XML 데이터 형식이 잘못되었습니다. 원본 텍스트 내용은 다음과 같습니다."


코드 복사

코드는 다음과 같습니다.

if( xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/html "); } 변경됨: text/xml

코드 복사

코드는 다음과 같습니다.

if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml ");//XML을 사용할 때 이곳을 수정해야 합니다 } IE 브라우저의 경우 세 번째 부분을 수정하지 않으면 오류가 보고되지 않지만 Firefox 브라우저의 경우, 이 부분을 수정하지 않으면 다음 문장에서 오류가 발생합니다. var domObj = xmlhttp.responseXML;

경고문을 추가하면 확인할 수 있습니다. 세 번째 수정 코드의 if 문은 실행되지 않습니다. 이 if 문은 Firefox 브라우저에서 실행됩니다.

설명: 액세스 경로, 실행 스크린샷 및 ajax 연구 노트 1은 이미 언급되어 있으므로 생략합니다.