jQuery는 xml 형식의 반환 데이터를 처리합니다(예제 분석)_jquery

이 예제 프로그램에서는 $.ajax() 메서드를 사용하겠습니다. $.get() 메서드를 사용할 수도 있지만 코드가 이해하기 쉽고 복잡하지 않은 것이 더 좋습니다.

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

//사용자 이름 확인 방법을 정의합니다.
function verify(){
//먼저 페이지에서 버튼 누름을 테스트하면 이 메서드를 호출할 수 있습니다.
//자바스크립트의 경고 메서드를 사용하여 팝업 프롬프트 상자를 표시합니다
/ /alert("버튼이 클릭되었습니다! ! ");
//1. 텍스트 상자의 내용을 가져옵니다.
//document.getElementById("userName") //Jquery의 노드 검색 방법 A 매개변수의 id 속성 값에 #을 추가하면 노드를 찾을 수 있습니다.
//jquery 메서드는 jquery 개체를 반환하며 해당 개체에 대해 다른 jquery 메서드를 계속 실행할 수 있습니다.
var jqueryObj = $("#userName");
//노드 값 가져오기
var userName = jqueryObj.val();
//alert(userName);
//2. 텍스트 상자의 데이터를 서버 세그먼트의 서블릿으로 보냅니다.
//자바스크립트에서는 간단한 객체 정의 방법
var obj = {name: "123",age:20};
//jquery의 XMLHTTPrequest 객체를 사용하여 요청 캡슐화 가져오기
$.ajax({
type: " POST", //http 요청 방법
url: "AJAXXMLServer", //서버 세그먼트 url 주소
data: "name=" userName, //서버 세그먼트로 전송되는 데이터
dataType: "xml" , // JQuery에 반환할 데이터 형식 지정
성공: 콜백 //상호작용이 완료되고 서버가 데이터를 올바르게 반환할 때 호출되는 콜백 함수 정의
});
}

콜백 함수:

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

//콜백 함수
함수 콜백(data) {
// Alert("서버 세그먼트의 데이터가 돌아왔습니다!!");
//3. 서버가 반환한 데이터를 받습니다.
//데이터입니다. dom 객체 데이터를 구문 분석해야 합니다.
//먼저 dom 객체를 JQuery 객체로 변환해야 합니다.
var jqueryObj = $(data);
//메시지 노드 가져오기
var message = jqueryObj.children();
//텍스트 콘텐츠 가져오기
var text = message.text();
//4. 서버 세그먼트에서 반환된 데이터를 페이지에 동적으로 표시합니다
//결과 정보를 저장하는 노드 찾기
var resultObj = $("#result");
//페이지의 div 노드에 있는 내용을 동적으로 변경
resultObj.html(text );
경고("");
}