Javascript ajax VS JQuery Ajax

Ajax 기본 내용은 AJAX 이해하기를 참고하세요.

 

---

Javascript ajax

 

JavaScript Ajax구현에 있어서 XMLHttpRequest객체(이하 XHR)는 반드시 필요한 객체입니다. 대부분의 웹브라우저는 XHR을 지원해 주지만 인터넷 익스플로러(IE), 특히 IE7이하 버전에서는 지원해주지 않습니다. 그렇기 때문에 XHR을 쓰지 않고 IE에서 지원해주는 ActiveXObject를 사용합니다. XHR이 ActiveXObject를 모방하여 만들어 졌으므로 구현에는 별로 차이가 없습니다.

 

//객체 생성부분
var xmlhttp;
if (window.XMLHttpRequest)
{
    xmlhttp = new XMLHttpRequest();
}
else
{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//Ajax구현부분
xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            //통신 성공시 구현부분
        }
}
xmlhttp.open("GET", "exam.xml", true);
xmlhttp.send();

위 예제코드는 JavaScript Ajax 간단한 구현 예제입니다. 위 코드와 같이 XHR를 생성한 후 생성된 객체를 통해 Ajax를 구현합니다. XHR의 함수는 크게 다음과 같이 나뉩니다.

• onreadystatechange : 비동기 통신시 서버와의 통신이 이루어 진 후 동작될 함수를 말합니다.
• send : 데이터 교환을 요청하는 함수입니다.
• open(GET or POST, url, async) : 서버와 데이터를 교환할 때 필요한 정보를 입력합니다. 첫번째 인자값은 Get,Post를 지정해주며 두번째 인자 값은 데이터를 교환할 서버의 url을, 세번째 인자 값은 비동기로 진행할 것인지에 대해서 입력해줍니다. 동기로 진행할 경우 위 onreadystatechange 함수 필요없이 응답을 기다렸다가 send함수 뒤에 나오는 script코드를 응답이 오면 동작하게 됩니다.

JavaScript에서 ajax를 구현하기 위해서는XHR의 함수도 잘 알아야 하지만 속성도 잘알아둬야 합니다. onreadystatechange함수 내에서 조건에 따라 처리해주는 구현이 다를 수 있기 때문입니다. 속성중 가장 중요한 속성을 나열 하면 다음과 같습니다.

• readyState : ajax통신의 진행중인 상태를 알려줍니다. 값에 따라 의미하는 상태는 다음과 같습니다.
  • 0 : 초기화 되지 않은 상태 (open메소드가 아직 호출되지 않은 상태)
  • 1 : open메소드가 호출된 상태 (send메소드는 호출 되지 않은 상태)
  • 2 : 송신완료, 요청을 시작한 상태 ( 요청은 하지 않았지만 데이터가 아직 오지 않은 상태)
  • 3 : 수신 중인 상태 (데이터가 들어오고 있는 상태)
  • 4 : 수신 완료 (데이터를 모두 받은 상태)
• Status : 데이터 수신의 성공 여부를 판단해주는 속성입니다 값에 따라 의미하는 상태는 다음과 같습니다
  • 0 : 로컬로 접근 성공을 의미합니다.
  • 200 : 해당 url로 접근 성공을 의미합니다.
  • 403 : 접근이 거부되었음을 의미합니다.
  • 404 : 해당 url이 없음을 의미합니다.
  • 500 : 서버오류를 의미합니다.
• responseXML : 받은 데이터를 XML타입으로 변환 시켜줍니다.
• responseText : 받은 데이터를 텍스트 타입으로 변환 시켜줍니다.

JavaScript의 Ajax는 텍스트 또는 XML타입으로만 데이터를 가져올 수 있습니다. 그렇기 때문에 JSON형식이나 CSV형식으로 데이터를 가져오기 위해서는 서버에서 텍스트(문자열) 형식으로 CSV 또는 JSON모양을 잡아주고 (예: "{'term' : "+term+", 'part' : "+part+" }") 데이터를 보냅니다. 자바스크립트 Ajax구현부에서 JSON 표현식으로 데이터를 받아왔을 때 받아온 데이터를 JSON형식으로 파싱해줍니다. 자세한 CSV, XML, JSON 데이터를 다루는법은 뒤에서 설명하겠습니다.

 

아래는 파싱의 예입니다.

 

//JSON파싱
JSON.parse(xmlhttp.responseText);

//IE(JSON 지원 안해주는 버전)에서의 파싱
eval("("+xmlhttp.responseText+")");

 

---

 

JQuery ajax

 

jQuery 라이브러리에서의 Ajax는 보다 다양하고 단순한 방법으로 JavaScript Ajax의 구현을 할 수 있게 해줍니다. 순수 JavaScript로 Ajax를 구현 하는 것보다 좀 더 명시적으로 코드를 작성할 수 있다는 장점도 있습니다. 

 

JQuery Ajax에서 가장 기본이자 중요한 API는 .ajax([settings]) 입니다.

setting는 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어간다. 주요한 옵션을 열거해보면 아래와 같습니다.

• data
  서버로 데이터를 전송할 때 이 옵션을 사용한다. 
• dataType
  서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.
• success
  성공했을 때 호출할 콜백을 지정한다.
  Function( PlainObject data, String textStatus, jqXHR jqXHR )
• type
  데이터를 전송하는 방법을 지정한다. get, post를 사용할 수 있다.

 

JQuery Ajax문서에서 .ajax()는 는 JQuery.ajax()로 표시되는데 실제 코드에서는 $.ajax()로 사용됩니다.

 

$(#이름) => 이름은 html 태그의 id를 지칭한다.

사용예제

<p id="titmezones"></p>

<script>

  $.ajax({

    var str = '현재시간은 ~~~'

    $(#timezones).html('<ul>' + str + '</ul>');

  })

</script>