[jQuery] Ajax로 xml 파싱하기

AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술로, 서버와 통신시 데이터 포맷은 주로 XML과 Json을 사용합니다. 파싱속도는 Json이 XML보다 약간 더 빠르다고 알려져 있으며 구문 분석, 파싱((syntactic) parsing)은 일련의 문자열을 의미있는 토큰(token)으로 분해하고 이들로 이루어진 파스 트리(parse tree)를 만드는 과정을 말합니다. 쉽게, 주로 어떤 데이터를 다른 모양으로 가공하는 걸 말합니다. 

 

 

jQuery AJAX 메소드

 

Method	Description
$.ajax()	Performs an async AJAX request
$.ajaxPrefilter()	Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax()
$.ajaxSetup()	Sets the default values for future AJAX requests
$.ajaxTransport()	Creates an object that handles the actual transmission of Ajax data
$.get()	Loads data from a server using an AJAX HTTP GET request
$.getJSON()	Loads JSON-encoded data from a server using a HTTP GET request
$.parseJSON()	Deprecated in version 3.0, use JSON.parse() instead. Takes a well-formed JSON string and returns the resulting JavaScript value
$.getScript()	Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request
$.param()	Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests)
$.post()	Loads data from a server using an AJAX HTTP POST request
ajaxComplete()	Specifies a function to run when the AJAX request completes
ajaxError()	Specifies a function to run when the AJAX request completes with an error
ajaxSend()	Specifies a function to run before the AJAX request is sent
ajaxStart()	Specifies a function to run when the first AJAX request begins
ajaxStop()	Specifies a function to run when all AJAX requests have completed
ajaxSuccess()	Specifies a function to run when an AJAX request completes successfully
load()	Loads data from a server and puts the returned data into the selected element
serialize()	Encodes a set of form elements as a string for submission
serializeArray()	Encodes a set of form elements as an array of names and values

 

 

 

 

Get방식과 Post 방식의 차이

 

Get 요청은 웹브라우저의 주소창에 주소를 입력한 후 엔터를 칠 때, 페이지에서 링크를 클릭했을 때, 입력폼의 method 속성이 get 일 때, AJAX에서 서버에 연결할 때 get 으로 설정한 경우 발생한다. HTTP GET 요청 프로토콜은 서버에 보내는 데이터를 요청-URI 안에 포함되어 따로 message-body를 보낼 필요가 없다. 따라서 Get 방식이 Post 방식보다 간단하고, 빠르고, 거의 모든 경우에 사용할 수 있다.

 

예: /webapp/student/list.json?pageNo=2&pageSize=5 (서버에 보내는 데이터: ?pageNo=2&pageSize=5)

 

• 즐겨 찾기에 데이터와 URL을 함께 저장할 수 있어서 다시 요청하기 편하다.

• 손쉽게 다른 사람에게 전달할 수 있다.

• 용도: 데이터 조회 요청에 적합하다.

• 데이터가 타인에게 쉽게 노출될 수 있다.

• 로그인과 같은 보안 전송에는 사용하기 적합하지 않다.

• 바이너리 데이터를 전송할 수 없다. 전송하려면 base64와 같은 ASCII 형식으로 변환해야 한다.

• 보통 Request-Line의 크기가 8KB나 16KB로 제한되어 있어서, 대량의 데이터를 보낼 수 없다.

 

 

 

Post 요청은 입력폼의 method 속성이 post 일 때, AJAX에서 서버에 연결할 때 post 로 설정한 경우 발생하며 Post 방식을 꼭 사용해야 할 경우는 저장된 파일일때 ( 서버 상의 파일이 나 데이터베이스를 수정할 때 ), 서버에 많은 양의 데이터를 보낼때 ( POST 방식은 사이즈 제한이 없다), 사용자의 입력을 보낼때 ( 알 수 없는 문자열이 포함되어 있을 가능성이 있을 경우 )가 있다. HTTP POST 요청 프로토콜은 서버에 보내는 데이터가 요청-URI 안에 포함되지 않고 따로 message-body 부분에 첨부 

 

• 보통 웹서버에서는 message-body 부분으로 전송되는 데이터의 경우 대량으로 전송 받는 것을 허락 

• 대용량 데이터를 첨부할 수 있다.

• 웹브라우저 주소창에 보이지 않는다.

• 멀티파트 방식을 결합하면 바이너리 데이터도 보낼 수 있다.

• 용도: 게시글, 파일업로드 등 대량 데이터 전송 시, 로그인 폼처럼 보안을 요구하는 데이터 전송 시.

• 즐겨 찾기에 추가할 때 데이터가 포함되지 않기 때문에 조회 용 URL을 저장할 수 없다.

• 특정 페이지의 링크 정보를 다른 사람에게 전달할 수 없다.

 

 

 

 

 

$.post  &  $.get

$.post & $.get 는  $.ajax를 상속
$.post & $.get는 고수준으로 구현했다고 보면 되고, $.ajax 는 저수준
수준이 낮은게 아니라 더 낮은 단계의 api를 사용할 수 있다

 

jQuery $ .get() 메소드

 

HTTP GET 요청을 사용하여 서버에서 데이터를 요청
선택적 콜백 매개 변수는 요청이 성공하면 실행될 함수의 이름

$.get(URL,callback);

 

 

jQuery $ .post () 메소드

 

HTTP POST 요청을 사용하여 서버에서 데이터를 요청
필수 URL 매개 변수는 요청하려는 URL을 지정 
선택적 data 매개 변수는 요청과 함께 전송할 일부 데이터를 지정
선택적 콜백 매개 변수는 요청이 성공하면 실행될 함수의 이름

 

$.post(URL,data,callback);

 

 

---

 

1. 서버에 요청하기

 

$.ajax({
    url : "경로",
    type : "POST",
    success : function(xml){
        console.log(xml);
    }
}); 

 

요청경로(URL) : 필요한 경로에 맞게 사용. 실제 웹루트안에 XML 파일에 요청,
서버에서 XML을 만들어서 리턴, 페이지 자체를 XML페이지로 등등
type : 생략해도 jQuery가 알아서 잘 잡음
결과 : 콘솔창에 XML문서가 표시

 

// script

$.ajax({
    url: 'document.xml', // 읽어올 문서
    type: 'GET', // 방식
    dataType: 'xml', // 문서 타입
    timeout: 1000, // 시간 설정
    error: function(){ // 로딩 에러시
        alert('Error loading XML document');
    },
    success: function(xml){
    $(xml).find('item').each(function(){  // xml 문서 item 기준으로 분리후 반복
        var link = $(this).find("link").text();
        var title = $(this).find("title").text(); 
        var description = $(this).find("description").text(); 
        var tag = $(this).find("tag").text(); 

        var view_text = link + title + description + tag ; 
        $("#id").append(view_text);  // #id 에 view_text 삽입
    });
} 
});

// 출처: https://abisuk.tistory.com/entry/ajax-기본-샘플-소스-xml-파싱해서-읽어서-뿌리기 [아비분석실]

// xml 파일

<item>
	<category>
		<![CDATA[ 카테고리 ]]>
	</category>
	<title>
		<![CDATA[ 제목 ]]>
	</title>
	<link>
		http://주소
	</link>
	<description>
		<![CDATA[ 내용 ]]>
	</description>
	<tag>
		<![CDATA[ 태그 ]]>
	</tag>
</item>


// 출처: https://abisuk.tistory.com/entry/ajax-기본-샘플-소스-xml-파싱해서-읽어서-뿌리기 [아비분석실]

 

 

 

 

 

 

2. 사용할 핵심 함수

 

1. find()

jQuery를 사용, find 함수는 사전의미 그대로 무언가를 찾는 함수 

 

$('body').find('span').text();

 

 

2. text()

인자가 없으면 셀럭터로 선택된 것의 문자열을 가지고 오고 인자를 넣어주면 셀렉터로 선택된 것에 문자열(인자)을 적용

 

$('body').find('span').text();
$('body').find('span').text('TEXT');

 

 

3. attr()

attr함수는 어트리뷰트의 줄임말로 속성을 제어하는 함수 
인자는 두가지를 넣을 수 있고 첫번째 인자는 속성명, 두번째 인자는 속성값
첫번째 인자만 넣을 경우 속성명에 해당하는 값을 리턴하고, 두번째 인자까지 넣을 경우 속성값을 적용 

 

$('body').find('span').attr('id');
$('body').find('span').attr('id', 'A');

 

 

 

 

 

3. html로 리턴

먼저 우리는 ajax success함수에서 리턴받을 XML 명을 xml 이라고 적어놨으므로 첫번째 선택자는 xml 

 

// $(xml);  //서버에 요청하여 받은 XML 이 선택

var txt = $(xml).find('첫번째문단').text(); 
// find 함수로 노드명을 적으면 셀렉트가 되고, 
// 그뒤에 text 함수를 사용하시면 해당 노드의 텍스트를 가지고옵니다.

// 출처: https://annotations.tistory.com/58 [Annotation]

 

노드의 속성값을 가지고 오려면 attr 사용

 

var attr = $(xml).find('두번째문단').attr('순서');

출처: https://annotations.tistory.com/58 [Annotation]