주말에 쉬어서 글을 올리게 되었습니다 ㅎㅎ
보통 form태그에서 submit 처리 하면 화면이 깜박이면서 데이터 로딩후 화면에
표출된다.하지만, Ajax통신을 하게되면 화면에 깜박임을 찾아볼수가 없을 것이다!
말그대로 화면은 가만히 있는상태에서 뒷단에서 모든 데이터 처리를 하고 return값을 핸들링하면서 웹화면을 제어할 수 있다!
데이터 타입은 다양하다 html, json, jsonp, xml, javascript 등등..
이번장에서 다룰 내용은 html방식이다.
html페이지는 두개를 만들어서 ajax예제를 만들어보겠음!
첫번째 파일명은 index.html
두번째 파일명은 list.html
우선은 index페이지는 게시판 껍데기라고 해보자
언뜻보면 저번에 했던 변수에 html태그 만들어서 뿌리는 방식이 있는데 그거랑 비슷하다.
전에 했던거에 확장편이라고 생각하면 된다.
임의로 list객체에 데이터를 담아서 ajax통신을하여 url호출을 하여 데이터를 화면에 뿌려보도록 하자!!
index.html은 단순 리스트 출력을 할수 있는 출력버튼이 있고,
list.html페이지에는 임의로 테이블 태그로 리스트를 만들 태그들이 있다.
index.html페이지의 출력버튼 클릭시 특정 div레이아웃에 list.html페이지의 태그들을 넣어볼것이다.
우선스크립트 부분을 봅시다.
$(function(){
$("#listButton").click(function(){
$.ajax({
type: 'post'
, url: '/list.html'
, dataType : 'html'
, success: function(data) {
$("#listDiv").html(data);
}
});
})
})
html부분이다.
<input type="button" id="listButton" value="리스트출력" /> <br/> <div id="listDiv"></div>
버튼 클릭전 초기화면은 다음과 같다.
다음처름 버튼만 있는 페이지다.
list.html 페이지 코드를 보자
* 참고로 하단에 있는 소스가 풀소스다.
<html></html> / <title></title> / <body></body> 모든 태그들은 없다
<table> <tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr><tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr><tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr><tr> <td>abcsdkjfslkdfjsdf</td> </tr> <tr> <td>abcsdkjfslkdfjsdf</td> </tr> </table>
막 코딩한거지만 게시판 목록이라고 하자!! ㅎㅎ
자이제 버튼 클릭하여 list.html 페이지를 호출해보자!!
출력화면이다.
나왔다! ㅎ
일반 form태그는 어떤 이벤트가 발생하고 데이터를 뿌리려면 화면이 깜박이고
페이지 url 이 변경이 될텐데 위에 캡처화면은 url 변경도 없이 데이터가 특정
클릭이벤트로 인하여 출력된다.
그리고 주의할점
흔히, ajax통신하는 list.html와 같은 페이지를 <html></html>등 모든 페이지를
작업을하고 ajax 호출을 하시는 분들이 계신다.
ajax html을 하면 index.html와 같이 호출 하는 부모페이지에 태그를 맞추자
index.html도 html/body태그가 있고, list.html에도 html/body태그가 있으면
좀 거시기 하지 않은가....
물론, 어찌하다보면 페이지는 나오지만 충분히 필요 없는 태그들은 빼도 되지 않을까... 가를 개인적인 생각이다...
샘플 코드를 한번 로컬에서 동작시켜서 이해를 하도록 하자!! ㅋ
list.html에 대한 결과를 받아오려면 $.ajax의 success 에 함수를 이용하여 파싱을 하도록 하자
success : function(data){} 에서의 data가 html태그가 나온다.
의심이 되면 alert(data)로 확인을 할수 있을 것이다.
다음에는 json객체를 파싱하여 ajax로 뽑아오자~
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 16장] 다른 도메인간 비동기 Ajax 통신을 해보자!! - JSONP방식 (2) | 2014.06.30 |
|---|---|
| [jQuery 15장] 비동기 Ajax 통신을 해보자!! - JSON방식 (8) | 2014.06.17 |
| [jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |