[jQuery] Ajax의 흐름과 예제

 

 

1. AJAX(Asynchronous Javascript and XML)란 무엇인가?

 

Ajax의 예를들면, 

네이버나 다음같은 포털사이트에 가보면, 

메인페이지에서 뉴스 등 밑에 < , > 요런 버튼을 눌렀을 때 페이지가 Reloading 되지 않고 뜨는걸 볼 수있다.

 

보통 웹의 흐름에서는 새로운 URL로 호출 되면서 페이지가 새로 뿌려지지만,

AJAX를 사용하면 일부만을 로드해올 수 있는 것이다.

이름처럼 비동기 통신을 통해서.

 

 

 

 

2. 어떤 원리이고 흐름인가?

 

보통 웹사이트 들어갈 때 어떻게 들어가는가?

브라우저 위에 주소창에 URL을 쓰고 들어간다. 그러면 브라우저가 그 URL(서버)로 연결시켜준다.

서버에서 받아온 데이터들을 브라우저가 받아서 파싱해서 뿌려준다.

 

이게 보통 웹의 흐름이라면,

 

AJAX는 AJAX 자체가 브라우저라고 생각하면 된다. 

URL을 받고, AJAX 내부에서 XMLHttpRequest 통신을 해서 URL(서버)로 연결시켜준다.

서버에서 받아온 데이터들을 AJAX가 받는다.  (어떻게 뿌릴지는 여기서 직접 알아서 한다 ㅋㅋ)

 

 

 

 

3. 예제

 

jQuery 같은 프레임워크를 안쓰고 AJAX 통신 하는 예제는 

http://mainia.tistory.com/314  <- 이 블로그 참조

 

jQuery를 이용하면 간단 명료하게 작성 가능하다.

 

 

 

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>   <script> $(document).ready(function() {      jQuery.ajax({            type:"GET",            url:"/test",            dataType:"JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨            success : function(data) {                  // 통신이 성공적으로 이루어졌을 때 이 함수를 타게 된다.                  // TODO            },            complete : function(data) {                  // 통신이 실패했어도 완료가 되었을 때 이 함수를 타게 된다.                  // TODO            },            error : function(xhr, status, error) {                  alert("에러발생");            }      }); }); </script> 경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다. 어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com

 

 

 

* <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

이렇게 쓰면 jQuery의 항상 최신 버전을 쓸 수 있다.

 

 

보통 complete을 쓸 지, success를 쓸 지는 상황에 따라 다르다.

둘 중 하나만 써야함. 그냥 설명하기 위해 2개 쓴 것임.

(반드시 둘 중 하나만 써야하는건 아니고, 둘다 쓰면 두 번 호출되기 때문에)

 

 

 

 

 

4. 값 받아오기

 

success를 통해 받아온 값을 alert 으로 띄운다거나,

HTML 코드에 추가해서 나타내거나 여러가지 방법으로 보여지도록 할 수 있다.

 

JSON으로 받는 법을 정리하겠다

 

 

JSON 객체는 요렇게 생긴 객체임. 

 

{"name": "lioncat", "age": 14, "nickname": "qwerty"}

 

 

 

서버 단에서는, 

객체에 있는 값을 JSON 형태로 만들어주는 라이브러리들이 있으니

서버는 그 것을 사용해서 JSON으로 리턴 하면된다.

 

클라이언트에서도 JSON으로 받아야 하는데,

3번 예제처럼 dataType:"JSON" 부분을 써주면 JSON으로 받아진다.

 

 

 

success에서 받아온 객체인 data를 alert으로 띄워보면

[Object object] 라고 나올 것이다.

 

저것을 어떻게 보느냐???

 

// success나 complete 안에서 사용   alert(data.name); alert(data.age); alert(data.nickname);

 

 

 

* 참고로 jQuery를 사용하지 않은 순수 AJAX를 통해 데이터를 받아왔을 때는 eval 함수를 써야한다. 

jQuery의 AJAX에서는 자체적으로 JSON Object로 변환 시켜준 것이기 때문에 그냥 사용할 수 있지만

순수 AJAX에서는 JSON 객체로 변환되지 않았기 때문이다.

 

출처: http://marobiana.tistory.com/77 [Take Action]