jQuery $.ajax() 공략

ajax 통신의 시작은 $.ajax() 라는 함수로 시작합니다. 이 $.ajax()함수에는 기본적으로 한개의 인자가 들어갑니다.그 인자는 바로 json 오브젝트 형태의 ajax 객체에 대한 설정 프로퍼티 인데요. 일단 이에 설정 할 수 있는 프로퍼티들을 정리 해 보았습니다.

JQuery Ajax 프로퍼티 목록

위에 나열 된 프로퍼티 중 기본적으로 사용 되는 프로퍼티는 url, type, data, timeout, error, success 입니다. 일단 이 6개의 프로퍼티만 사용해도 기본적인 비동기 통신은 무리 없이 진행 할 수 있습니다. 우선 예제 소스 보시죠. 

위 소스는 document.xml 이라는 xml 파일을 읽어 들이는 간단한 소스 입니다. 단순히 존재하는 xml 파일을 읽어 올 뿐이라서, 넘겨주는 데이터도 없기 때문에 data 프로퍼티도 생략 한 형태입니다. 일단 전반적인 이해를 돕기 위해 대상이 되는 document.xml 파일을 살펴 보겠습니다.

정말 간단하죠? -_-;; 갑자기 왜 사자와 호랑이가 생각 났는지 모르겠지만…. 여튼, document.xml 의 구조를 살펴 보면, 최상위 노드인 동물(animal) 노드에 고양이과 동물(cat) 노드가 각각 있고, 각 cat노드의 하위에는 이름 프로퍼티인 text 노드가 있습니다.

아제 다시 jquery 코드로 돌아가서 살펴 보면 $.ajax() 펑션에 다음과 같은 구조의 프로퍼티 객체가 들어가 있습니다.

1)     url ? document.xml 파일을 비동기 방식으로 읽어 올 대상으로 설정 했습니다.

2)     type - 통신 방식을 get방식으로 설정했습니다.

3)     timeout - 통신 에러시 최대 대기 시간을 1초로 설정 했습니다.

4)     error ? 에러시 처리할 콜백 함수를 정의했습니다. 간단히 에러 메시지를 경고창으로 띄웁니다.)

5)     success ? 통신 성공시 처리할 콜백 함수를 정의 했습니다. 함수 처리 내용은 밑에서 따로 분석 하겠습니다.

이렇게 위와 같이 5개의 프로퍼티를 설정해 주었습니다. 이제 해당 함수가 불리워 질 때, ajax를 통하여document.xml 파일을 읽어 오고, 이를 성공적으로 읽어 왔을 시, success함수를 통해 후처리를 하게 됩니다.

success 함수에서는 인자로 불리워진 데이터 객체를 받게 됩니다. 위 코드를 실행 시키면,  document.xml 파일을 읽어 들여서 jquery의 탐색 함수를 사용해서 cat 노드들을 찾은 후, 그 자식 노드들을 each함수를 통해 하나씩 읽어 들여 가며 해당 하는 객체의 text 속성을 읽어 그 값을 item_text라는 변수에 저장한 후, 이를 경고창으로 표시합니다.

실행 결과는 다음과 같습니다. 

위와 같이 두개의 얼럿창이 뜨게 됩니다.

일단 이로써 첫번째 글을 마치고 다음 응답글에서는 ajax를 이용해서 데이터를 넘겨 보도록 하겠습니다.

[JQuery-Ajax] 2.객체를 이용해 값 입력하기

이번에는 jquery의 ajax를 이용해 값을 넘겨 보도록 하겠습니다.

이전 글에서 언급 했듯이, ajax로 값을 넘기기 위해서는 data 프로퍼티를 이용하면 됩니다.

예제 소스 코드 입니다.(풀 코드는 파일로 첨부 합니다.)

jquery 코드만을 발췌한 거라, html 구조는 생략 되어 있지만, jquery의 셀렉터 부분만 보셔도 어느정도 구조를 가늠 할 수 있으리라 생각됩니다. ^^;

간략히 설명하자면 id가 각각 input_id, 그리고 input_name인 두개의 text 입력 상자가 있으며, 이들 값을 입력할 때 사용하는 버튼 객체(id="btn")가 하나 있습니다. 그리고 읽어 들여온 문서를 보여줄 div_tab이라는 아이디를 가진 div 엘리먼트가 하나 있습니다.

이를 구현해서 웹브라우저로 띄우면 다음과 같은 화면이 나옵니다.

이제 이 창의 텍스트 입력 상자에 값을 입력하고 버튼을 클릭하면 ajax의 타겟으로 지정된 ak.jsp가 불리워 지고 ak.jsp의 내용이 div_tab 안에 나타나게 될 텐데요. 우선 ak.jsp파일을 살펴 보도록 하지요.

주요한 부분만 발췌 했는데, 이 jsp 페이지를 구성하는 엘리먼트는 tab이라는 id를 가진 table 엘리먼트 하나 뿐입니다. ^^;

일단 jsp 구성을 살펴 보자면 선언부에서 ArrayList 객체를 선언 해 주고, 이후 request에서 각각의 파라미터를 얻어와 이를 적절히 합쳐서 ArrayList에 담은 후, ArrayList 안에 담긴 결과물을 다시 jquery를 이용해 table에 append 시켜 주어 테이블을 구성 하도록 되어 있습니다. 이렇게 구성된 html파일을 앞선 html 페이지에서 읽어 들여서 div안에 표시 하게 되는 것이죠.

그럼, 입력 결과를 살펴 볼까요?

네 이렇게 입력한 내용이 추가가 되어 나타나는 것을 볼 수 있습니다.

해당 테스트 파일을 본 글에 게시 하고, 다음 응답글에서는 보다 간편화 시킨 ajax 문법을 알아 보도록 하겠습니다.

[JQuery-Ajax] 3.함수 간소화 시키기

지금까지의 예제에서 JQuery로 Ajax 통신을 처리 할 때, $.ajax()함수를 사용했고, 프로퍼티를 json object로 만들어 입력 하였습니다. 근데 이걸 간소화 시킬 수 있는 방법이 있어서 요번 글에서 소개 하고자 합니다.

바로 $.get() 함수와 $.post()함수, 그리고 load()함수인데요. 함수 명만 봐도 아시겠지만, $.ajax()함수에서 type 항목에 설정 했던, 통신 방식을 기준으로 메소드화 시킨 함수들입니다. $.get() 함수는 get방식의 통신을, $.post()함수는 post방식의 통신을 하며, load()함수는 파라미터가 있다면 post방식으로, 파라미터가 없다면 get방식으로 통신을 합니다.

 $.get()과 $.post()함수, load()함수는 $.ajax()함수와는 달리 필요한 프로퍼티들을 json 오브젝트로 받는게 아니고, 직접 인자로 입력 받습니다. 일단 말로 백번 설명하는 것 보다. 1번 항목에서 사용했던 예제를 간소화 시킨 코드와 비교해 보도록 하겠습니다.

1번에서 사용했던 예제 소스입니다.(기억 나시죠? 사자, 호랑이) 이 소스를 간소화(통신 타입이 get방식이니 .get() 함수를 이용하면 되겠지요) 시키면 다음과 같은 소스가 됩니다.

정말 간단해 졌지요? 간단해진 대신, 그만큼 이것저것 빠진것도 많은데요. 위 소스와 비교 해 봤을때, timeout 항목과, error 항목이 빠졌습니다. 그것은 $.get() 함수와 $.post()함수, 그리고 load()함수가 인자로 받을 수 있는 항목들이 제한되어 있기 때문인데, 인자로 받을 수 있는 항목들은 다음과 같습니다.

1.url - 불러들일 문서 주소

2.data - 파라미터로 보낼 값들, json object

3.success - 콜백 함수

4.datatype - 콜백시 받아올 데이터의 형식

네, 확실히 함수 자체가 간소화 되는 만큼 잃는 부분도 많은것 같습니다.... 만, 뭐 꼭 필요한 경우가 아니면 $.get()과 $.post()함수, load()함수를 쓰는것 만으로도 핵심적인 기능은 대부분 소화 할 수 있을 것 같습니다.

한번 더 정리하는 의미에서 2번 글에서 사용한 예제를 $.post()함수를 사용해서 표현해 보겠습니다.