Ajax 데이터로드하기 서버로 데이터 전달 php
앞서본 포스팅한것들을 정적인 파일들이였다. html,스크립트 파일 단순한 텍스트(text)등으로 이정도는 ajax방법이 아니고도 가능하다.이번엔 동적인 데이타 전송을 살펴보자
동적 데이타파일
ajax를 이용한것은 동적데이타의 경우 브라우저에서 받은 입력값에따라 비동기적으로 되돌려주게 되어있다. 이런 동적파일은 php,java,asp가 있다.여기서 가장 편히 쓰이고 쉽게 할수있는 php로 예를들어보겠다.
php 데이타요청
먼저데이타 파일을 보자 내용은 하나가아닌 여러가지로 분류되어 있다
$entries = array( 'HTML'=> array( 'definition' => 'HyperText Markup Language', 'explantion' => '어쩌고 저쩌고', ), 'XML'=> array( 'definition' => 'extensible markup language', 'explantion' => '어쩌고 저쩌고', ), );
위에서 세가지를 설명해주고 있다.여기서 php의 문법에 대해선 자세히 알아보지 않겠지만 위의 정도이면 대충 알아봇것이라본다. $는 변수지정 그리고 array는 C언어에서 흔히 배운 행렬에대한 정의방식이다
이번엔 메인페이지에 html을 만들어보자.백과사전 처럼 리스트에서 하나를 클릭할경우 위의 데이타중 소속된것을 불러오도록 할 것이다.
로드된 데이터가 들어올자리
앞선데이타 파일과 그리고 메인페이지는 만들어졌다. 그럼 데이타 파일을 html형식으로 만들어줄 스크립트와 불러줄 스크립트 소스가있으면 되겠다.
클릭시 다음과 같이 나오도록 생각해보자
HTML
HyperText Markup Language
어쩌고 저쩌고
그럼 이걸 소스로 짜준다면은
if (isset($entries[$_REQUEST['words']])) {
//변수 entries가 있는지 확인한다
$entry = $entries[$_REQUEST['words']];
//entry란 변수로 entries에 나열된것들을 요청
//인자로 words를 사용했다.
$html .= '';
$html .= $_REQUEST['words'];
$html .= '
';
$html .= '';
$html .= $entry['definition'];
$html .= '
';
$html .= '';
$html .= $entry['explantion'];
$html .= '
';
print($html);//출력
}
메인페이지에 가서 요청할 하이퍼링크를 다시보자
li엘리먼트의 각주소는 php파일의 데이타의 일부를 호출하고있다. 첫번쨰는 html,두번째는 json..
마지막으로 볼것을 이들을 작동시킬 스크립트이다.
$(document).ready(function() {
$('a').click(function() {
$.get('./ajax_part/server.php',
{'words': $(this).text()}, function(data) {
//get함수로 php파일을 부른다, 인자는words
$('#content').html(data);
//콘텐트에 첨가
});
return false; });});
위의 방법은 get함수를 이용한것이다 post방식 역시 별반다를반 없다.
$.post('./ajax_part/server.php',
{'words': $(this).text()}, function(data) {
마지막으로 볼것은 더간단한 .load사용하는방법이다
$('#content').load('e.php', {'term': $(this).text()});
요약
php에 익숙하지않은 사람은 소스가 이해가지않은수있다. 하지만 정적파일을 로드했을때와 모습은 별차이없었다.이제까지 알아본걸 되돌아보면
- 메인페이지작성
- 메인페이지에 데이타가 들어올 자리 구성
- 데이터 마련(html,JSON, php...등
- 데이타를 html형식으로 바꿔줄 스크립트작성
- 작동시킬 스크립트작성
마지막으로 덧붙임, 이예제는 php형식의 예제이다. 동적이란것은 서버가 있을때 주고 받음으로서 작동되는 것이다. 따라서 APM으로 로컬로 개인 pc에 서버가 구축되어있지않거나, 별도 마련된 서버에 업로드시켜 확인하지않고 그냥 브라우저로는 당연히 작동되지않는다.맣은사람들이 왜안되냐고 묻곤하는데 동적파일 php임을 생각하자
마지막을 완성된 예제를 직접보자면 아래를 클릭
http://sianasiatiger.cafe24.com/study/A_ajax_server.html
댓글