[웹/SPRING]Ajax란~

Ajax(Asynchronous JavaScript + XML)란?

XML기반의 기술로 비동기적 자바스크립트 XML의 준말입니다. 자바스크립트로 HTTP 요청을 보내 XML로 응답을 받는 기술입니다.

표준XML과 CSS로 작성된 화면과 DOM(Document Object Model)을 이용한 상호작용, 서버와의 데이터 교환은 XML형식을 이용하며 비동기 통신의

웹브라우저에 내장된 XMLHttpRequest 객체를 이용하는 자바스크립트 기술입니다~~

기존의 방식의 웹사이트는 웹브라우저가 웹 서버에 요청을 전송하면 웹 서버는 JSP/PHP/ASP 등의 언어로 이루어진 서버 측 어플리케이션을 사용해 

요청을 처리한 뒤, 처리 결과를 HTML로 생성해 웹 브라우저에 응답합니다. 웹 브라우저는 응답받는 HTML을 분석한 뒤 그 내용을 화면에 그려주게 됩니다. 

즉, 웹 브라우저가 웹 서버와 통신을 하고 요청 결과는 HTML로 생성되며, 사용자 입장에서 페이지 이동이 발생하는 것을 확인할 수 있게 됩니다.

Ajax 방식의 웹 사이트는 별도의 웹 페이지 호출 없이 웹 어플리케이션과 비동기적으로 데이터를 주고 받은 후 클라이언트에서 응답 받은 데이터를 

처리할 수 있게 됩니다. 웹 페이지의 이동없이 화면을 유지한 채 웹 서버와 데이터 교환을 할 수 있게 되죠~

Ajax 방식의 웹 사이트는 기존의 방식과는 다르게 XMLHttpRequest 객체가 웹 서버와 통신을 하며, 응답 결과가 HTML이 아닌 XML 또는 

단순 텍스트로 처리됩니다.

Ajax 방식 웹 사이트의 장점

- 비동기 통긴 기반으로 데이터 전송과는 별개로 사용자는 다른 작업을 수행할 수 있다

- 데이터만을 응답으로 받으므로 서버 측 처리 속도가 빠르며, 전송 데이터의 크기도 적어진다

- 불필요한 데이터 요청을 최소화할 수 있다

- 많은 부분을 웹 브라우저에서 처리되므로 서버에 부하를 줄일 수 있다

jQuery를 이용한 Ajax

- XHR을 이용한 자바스크립트의 Ajax는 크로스브라우징을 할 수 없다

- 하나의 코드로 다양한 브라우징에 대응할 수 없다

- jQuery Ajax는 크로스브라우징을 지원한다

jQuery Ajax API

Ajax 통신에 필요한 여러가지 설정에 관련된 기능을 제공하는 Global Ajax Event Headers, 통신에는 직접적으로 관여하지 않지만 도움이 되는 

Help Function, POST와 GET 메소드 통신을 할 수 있도록 하는 Shorthand Methods, 가장 기본적인 통신을 제공하는 Low-Level Interface

등을 제공합니다. 이처럼 jQuery는 Ajax 관련 다양한 API를 제공하지만 그 중 Low-Level Interface API를 많이 사용합니다.

- jQuery Ajax API

http://api.jquery.com/catagory/ajax/

jQuery Ajax Low-Level Interface API

- jQuery.ajax API의 기본 형태

jQuery.ajax(url [, setting])

url : Ajax 통신 요청을 보낼 url

settings : 통신을 위한 여러 설정

- jQuery.ajax API 기본 예제들

  - $객체.load(url [,data] [,complete] );
        url : Ajax 통신을 할 url
                쿼리스트링을 붙여서 사용하면 GET method 통신을 함

        data : 요청 데이터
                JSON, String
                JSON으로 입력 시 POST 통신
                String으로 입력 시 GET 통신
               
        complete : 요청완료 후 응답 callback function
          function(
                String responseText,
                String textStatus,
                jqXHR jqXHR);

        요청의 결과로 받은 응답 텍스트를 지정된 객체에 적용한다
        추가적인 기능을 complete 속성에 함수로 적용할 수 있다

  - $.get(url, [,data] [, success] [, dataType]);
        GET method로 Ajax 통신을 한다

        url : 통신 url

        data : 요청 데이터
                JSON, String

        success : 요청 성공 시 callback
          function(
                Object data,
                String textStatus,
                jqXHR jqXHR);

        dataType : 응답 메시지 데이터 타입
                xml, json, script, text, html
                응답 받길 원하는(처리할 수 있는) 타입을 명시한다

  - $.post(url, [,data] [, success] [, dataType]);
        POST method로 Ajax 통신을 한다

        url : 통신 url

        data : 요청 데이터
                JSON, String

        success : 요청 성공 시 callback
          function(
                Object data,
                String textStatus,
                jqXHR jqXHR);

        dataType : 응답 메시지 데이터 타입
                xml, json, script, text, html
                응답 받길 원하는(처리할 수 있는) 타입을 명시한다


  - $.ajax(url [, settings]);
  - $.ajax([settings])

        url : 통신 url
        settings : 통신 설정
                JSON

            type : "GET"(default) | "POST"
                예전버전(1.9.0 이전) 지원 (method와 같이 볼 것)

            url : 통신 url

            data : 요청 데이터
                JSON, String, Array

            success : 요청 성공 시 callback
                function(
                  Anything data,
                  String textStatus,
                  jqXHR jqXHR);

            error : 요청 실패 시 callback
                function(
                  jqXHR jqXHR,
                  String textStatus,
                  String errorThrown);
                 
                  jqXHR : XHR 객체
                  textStatus : 통신 상태에 대한 메시지
                  errorThrown : Not Found

            async : 비동기 설정
                true(default) | false

            beforeSend : 요청 전 처리 기능
                function(jqXHR jqXHR, Object settings)

            complete : 요청 완료 후 처리 기능(성패에 상관없음)
                function(jqXHR jqXHR, String textStatus)

            contentType : 요청 데이터의 ContentType
                Boolean | String(MIME type)

                default
                'application/x-www-form-urlencoded; charset=UTF-8'

            dataType : 기대하는(처리할) 응답 데이터 타입
                "xml" | "json" | "script" | "html" | "text"

                default - 똑똑하게 알아서

            method : 요청 메소드 지정(1.9.0에서 추가)
                RESTful method 추가

            statusCode : 상태 코드에 따른 처리 추가
                JSON

                ex) statusCode: {
                        404: function() {
                            alert("Page Not Found");
                        }
                    }

웹에서 Ajax 비동기통식 방식을 사용하는 경우는 실시간 검색이나 회원가입 유효성검사등 실시간으로 데이터가 필요한 경우 자주 사용합니다.

Ajax를 쓰려면 json parser가 필요한데, 데이터 포맷이나 복사가 필요한 경우가 발생할 때 ajax와 함께 사용하는 것이 좋습니다.

Ajax를 사용할 때, 단점이 있다면 Ajax를 쓸 수 없는 브라우저에 대한 문제가 있으며 Http클라이언트의 기능이 한정되어 있습니다. 

그리고 Ajax의 제일 큰 단점은 실시간으로 요청을 남발하면 서버에 부하가 늘 수 있습니다. 그러므로 Ajax는 웹 사이트를 꾸밀때, 가장 작은 

피지컬을 갖는 곳에다가 많이 사용하는 것이 좋습니다~!!