12월17일

http://tcpschool.com/ajax 페이지를 참고하여 작성했습니다!

*AJAX (Asynchronous JavaScript and XML)

동적인 웹페이지를 만들기 위한 개발 기법의 하나.

웹페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분을 갱신 할 수 있다.

AJAX가 서버와 주고받을 수 있는 데이터

-JSON

-XML

-HTML

-텍스트 등..

*Ajax 장점

- 웹페이지 전체를 다시 로딩하지 않고도, 웹페이지의 일부분만을 갱신 할 수 있다.

- 웹페이지가 로드 된 후에 서버로 데이터 요청을 보낼 수 있다.

- 웹페이지가 로드 된 후에 서버로부터 데이터를 받을 수 있다.

- 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

*Ajax의 한계

- 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링방식을 사용하므로,

서버 푸시 방식의 실시간 서비스는 만들 수 없다.

= 이말은, Ajax는 항상 Client가 먼저 Request를 날려야 한다는것. 그전에는 서버로부터 데이터를 받을 수 없다는것 같다.

(클라이언트 풀링 방식: 사용자가 직접 원하는 정보를 서버에 요청하여 얻는 방식

서버 푸시 방식: 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는것을 의미. 예를들어 각종 앱이 보내는 푸시알림이 서버푸시 방식의 대표적인 예라고 함.)

- Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.

- Ajax스크립트가 포함된 서버가 아닌 다른 서버로 Ajax요청을 보낼 수는 없습니다.

(무슨말인지 모르겠다. 예를들어, JAVA로 HttpConnection을 만들고 카O오 서버에서 Oauth인증을 요청했었지. 하지만 Ajax를 이용하면 이런 방법은 안된다는건가?)

- 클라이언트의 PC로 Ajax요청을 보낼 수는 없습니다.

Ajax를 자바스크립트로 구현하려면 정말 괴롭습니다>< 따라서 우리는 jQuery 라이브러리를 쓸겁니다!

*Ajax 동작 원리

Ajax에서 사용하는 기존 기술

- 웹페이지 표현을 위한 HTML과 CSS

- 데이터에 접근하거나 화면을 동적으로 조작하기 위해 사용되는 DOM모델

- 데이터의 교환을 위한 JSON이나 XML

- 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체

- 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는 데 사용되는 자바스크립트

Ajax 동작 원리

Ajax를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신을 하게 됩니다.

동작원리를 그림을 보며 간략히 설명해 보자면,

기존 웹프로그램은 웹브라우저가 HttpRequest 객체를 생성하면 서버가 그것을 처리해서

HTML 및 CSS데이터로 만들어서 '웹페이지 전체를 다시 로딩'하는 구조였다.

하지만 Ajax를 이용하면

웹브라우저는 이벤트가 발생하면 자바스크립트를 호출한다. 

그리고 자바스크립트는 XMLHttpRequest 객체를 생성하고 요청한다.

서버는 Ajax요청을 처리한 결과를 HTML, XML또는 JSON데이터로 return 하고

자바스크립트는 그것을 받아서 웹브라우저에게 전달 후 웹브라우저는 웹페이지의 일부분만을 다시 로딩하게 된다.

*load()

서버에게 HTML문서를 요청 할 경우 사용하는 개별함수. HTML결과값일경우 사용하면 좋다.

<! 주의: 레이아웃을 받으면 안된다! 내용만 불러와야 한다. (하지만 서버가 HTML만 주는 경우는 극히 드물다..>

load(url, parameters, callback) 형식으로 작성

url: 요청이 전송되는 서버측 URL

parameter: URL에 전달하고자 하는 data

callback 응답 결과 데이터가 일치하는 엘리먼트로 로드 된 이후 호출되는 함수.

<HTML은 바로 화면에 출력 할 수 있으니까 따로 처리 할 필요가 없다!>

<콜백함수 안에서 xml이랑 json같은경우에는 HTML로 변환해줘야 한다. 이부분은 개발자가 해줘야 하는 작업이다.>

*$.get() 메서드

제이쿼리에서는 Ajax를 이용하여 GET방식의 HTTP요청을 구현한 $.get() 메서드를 제공한다.

이 메서드를 사용하면 서버에 gET 방식의 HTTP요청을 보낼 수 있다.

-원형

$.get(URL주소,[콜백함수]);

URL주소는 클라이언트가 HTTP요청을 보낼 서버의 주소다.

콜백함수는 HTTP요청이 성공했을 때 실행할 함수를 정의한다.

아래의 예제를 보자.

#requestBtn를 클릭하면 get방식으로 URL에게 요청을 하게 된다.

URL다음으로는 파라미터로 전송할 데이터를 입력한다.

그리고는 요청이 성공할 경우 실행할 콜백함수를 입력한다.

$.post() 메서드

제이쿼리에서는 Ajax를 이용하여 POST방식의 HTTP 요청을 구현한 $.post()메서드를 제공한다.

이 메서드를 사용하면 서버에 POST방식의 HTTP 요청을 보낼 수 있다.

$.post(URL주소 [,데이터][,콜백함수]);

URL주소는 클라이언트가 HTTP요청을 주소다.

데이터는 HTTP요청과 함께 서버로 보낼 데이터를 전달한다.(이때 서버에서 getParameter로 받아야함.)

콜백함수는 마찬가지로 요청 성공시 실행할 함수를 정의한다.

$.ajax()메서드

제이쿼리는 Ajax와 관련된 다양하고도 편리한 많은 메서드를 제공한다.

그중에서도 $.ajax()메서드는 모든 제이쿼리 Ajax메서드의 핵심이 되는 메서드이다.

$.ajax(URL주소[,옵션])

옵션은 HTTP 요청을 구성하는 키의 값의 쌍으로 구성되는 헤더의 집합이다.

예제>

*직렬화

직렬화란 입력받은 여러 데이터를 하나의 쿼리 문자열로 만드는것을 의미한다.

이렇게 함으로써 form요소를 통해 입력받은 데이터를 한번에 서버로 보낼 수 있게 된다.

한글이 포함된 입력 데이터가 쿼리 문자열로 변환될때는 퍼센트 인코딩을 통해 변환된다.

이때 모든 한글 문자는 퍼센트 기호를 포함한 16진수 값으로 변환된다.

예제 직접 돌려보기->

http://tcpschool.com/examples/tryit/tryhtml.php?filename=jq_ajax_form_01

*

서버에 어떤 데이터 포맷의 데이터를 요청하냐에 따라서 여러 개별함수로 나뉜다.

*$.getJSON(url, parameters, callback)

URL을 사용하여 서버에 대한 GET 요청을 전송

매개 변수는 쿼리 문자열로 전달

응답은 JSON문자열로 해석되며 결과는 callback 함수에 전달

url: 요청이 전송되는 서버측 

parameters: URL에 덧붙이는 파라미터(KEY와 VALUE로 구성)

callback: 성공 이후 실행할 함수.

//getJson 함수 예제

//'b.json'이라는 같은 위치의 파일을 요청하고, callback함수의 전달인자로는 data인데,

이 data는 서버가 전달해준 데이터가 넘어온다. 

이것은 JSON데이터 일테니, each함수로 각각 처리해준다.

*getScript

특정 로직후에 스크립트를 불러와야 하는 경우 사용 할 수 있다.

나누어서 스크립트를 불러와야 하는경우 사용하면 좋다.

*xml타입은 get이나 post함수를 사용하여 요청하고,

화면에 표시 될 수 있도록 html로 변경한다.

//클릭했을때 d.xml파일을 요청하고, 

//data(xml)데이터에서 모든entry를 선택 후,(여기서 this는 각각의 entry가 되겠지.)

//attr로 속성을 가져온다.

*서버로 파라미터를 전달하고, 서버에서 처리해주는값을 받아서 뿌려보는 예제.

//서버에 term이라는 이름으로 text를 전달한다. key랑 value로. 파라미터로.

form은 기본이벤트(submit)을 가지고 있기 때문에,

기본 이벤트를 예방하기 위해서 return false를 해야한다.

*Ajax(options) options를 통해 Ajax 요청을 전송

-opentions: 요청에 대한 매개변수를 정의하는 프로퍼티 객체

url - 요청 URL

type - 사용 할 HTTP 메서드 (생략시 GET)

data - Object타입. 요청에 전달 될 프로퍼티를 가진 객체

dataType - 응답의 결과로 반환되는 데이터의 종류.

*Ajax에 관련된 jQuery 커맨드

timeout - Ajax요청의 제한시간, 제한시간 초과시 error callback호출하거나 요청 취소

global - True: 전약 함수 활성, false: 전약 함수 비활성

success - 응답 성공시 호출되는 함수

error - 응답이 에러상태 코드 반환하면 호출되는 함수

complete - 요청이 완료되면 호출되는 함수

beforeSend - 요청 전송 이전 호출 함수

async - true: 비동기호출, false: 동기 호출

processData - false시 URL 인코딩 형태로 처리되어 전달되는 데이터를 금지

ifModified - true시 헤더정보 확인하여 미변경시 요청 성공

//ajax 예제

//slide하면 이미지가 옮겨짐

//마우스 떼면 자동으로 동작

//마우스 올리면 타이머 동작

//인디케이터 누르면 이미지 표시.

$(function(){

        var $container = $('.slideshow'); //슬라이더 쇼 전체 컨테이너

        var $slideGroup = $('.slideshow-slides'); //슬라이더 그룹

        var $slides = $slideGroup.find('.slide'); //각각의 슬라이더 4개.

       

        var $nav = $container.find('.slideshow-nav'); // 네비게이션.

        var $indicator = $container.find('.slideshow-indicator');

        var currentIndex = 0; //현재 몇 페이지를 보고있는지 알아야 함.

        var indicatorHTML =   '';

       

       

        $slides.each(function(i){

              

               $(this).css({ // 속성 변경

                       left : (100 * i) + '%'

               });

              

               indicatorHTML += '<a href="#">' + (i + 1) + '</a>';

        });

 

        $indicator.html(indicatorHTML);

        $indicator.on('click', 'a', function(event){

               event.preventDefault();

               goToSlide($(this).index());

        });

        //슬라이드 이동 함수 넘어오는 index만큼을 이동한다.

        function goToSlide(index) { //-1 = 100% - = -100%:오른쪽으로 간다.

               $slideGroup.animate({

                       left: -100 * index + '%'

               }, 500);

               currentIndex = index;

               updateNav();

        }

        //네비게이션 업데이트.

        function updateNav(){

               var $navPrev = $nav.find('.prev');

               var $navNext = $nav.find('.next');

               if(currentIndex == 0){

                       $navPrev.addClass('disabled');

               }else{

                       $navPrev.removeClass('disabled');

               }

              

               if(currentIndex == 3){

                       $navNext.addClass('disabled');

               }else{

                       $navNext.removeClass('disabled');

               }

        }

        //네비게이션 이벤트

        //a태그 두개가 있음.

        $nav.find('a').click(function(event){

               event.preventDefault();

               if($(this).hasClass('prev')){ //=>음수를 넣어주고

                       goToSlide(currentIndex - 1);

               }else { //=> 양수를 넣어준다.

                       goToSlide(currentIndex + 1);

               }

        });

       

        function startTimer() {

               timer = setInterval(function(){

                       nextIndex = (currentIndex + 1) % 4;

                       goToSlide(nextIndex);

               }, 2000);

        }

        //타이머 정지함수

        function stopTimer(){

               clearInterval(timer);

        }

        //마우스 이벤트... 여러개의 이벤트 등록할 수 있다! 키랑 밸류값으로..

        $container.on({

               mouseenter : stopTimer,

               mouseleave : startTimer

        });

        startTimer();

        updateNav();

});