AJAX 를 이용한 JSON 통신2015. 11. 15. 15:26
SMALL
AJAX 통신은 없어서는 안될 웹기술 중 하나로 페이지의 이동이없이 서버로부터 데이터를 읽어 들어와 해당되는 레이아웃이 출력하여, 데이터를 실시간으로 주고 받을 수 있다.
간단한 예를 몇가지 든다면, 첫번째로 대표적인 페이스북을 들 수 있는데 페이스북은 스크롤을 내릴 때마다 스크롤이 끝에 도달 하기전 페이스북의 글들이 계속 해서 추가되는걸 볼 수 있다. 요즘은 이런 형태의 웹들이 많이 늘어나고 있다. 불필요하게 전체적인 데이터들을 계속해서 가져오는것보단, 갱신된 부분만 가져오는 이 기술은 정말 유용하다. 또다른 예를 하나더 든다면 회원가입을 들 수 있다. 사용자가 회원가입 을 할때 아이디, 닉네임 을 입력하면, 중복 검사를 하게 되는데 과거에는 팝업창을 이용하여 많이 사용하였지만, 지금은 AJAX 통신을 사용하여 팝업없이 결과를 바로 출력할 수 있게되었다.
☞ AJAX 간단한 예제
개인적으로 javascript 는 잘 못다루는 관계로 여기서는 jquery 를 사용한 방법을 설명 할 도록 하겠다. 아래는 예제소소로 구성되었기때문에, 테스트를 할 시 URL 의 경로같은경우 자신의 경로와 맞게 설정해야한다.
index.php
<!DOCTYPE html> <html> <head> <title>AJAX</title> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> function ajax_send(sel){ $.ajax({ url:$(sel).attr('action'), // ajax url dataType:"json", // ajax 통신의 데이터 형식 async:false, // 동기(false):비동기(true) type:$(sel).attr('method'), data:$(sel).serialize(), success: function(data){ if(data['result']=='f'){ /* 로그인 실패시 */ alert(data['msg']); }else if(data['result']=='success'){ /* 로그인 성공시*/ alert(data['msg']); $('#login').html(data['id']+'님 환영합니다.'); } },error: function(xhr, status, error){ var error_confirm=confirm('데이터 전송 오류입니다. 확인을 누르시면 페이지가 새로고침됩니다.'); if(error_confirm==true){ document.location.reload(); } } }); return false; } </script> </head> <body> <h1>로그인</h1> <div id="login"> <form action="ajax.php" name="form_ajax" method="post" onSubmit="return ajax_send(this)"> <input type="hidden" name="ACCESS" value="true"> <input type="text" name="id" value="" placeholder="아이디를 입력해 주세요"> <input type="password" name="pw" value="" placeholder="비밀번호를 입력해 주세요"> <input type="submit" value="로그인"> </form> </div> </body> </html>
ajax.php
<?php
// 일반 페이지에서 넘어왔을 시 차단
if(!isset($_POST['ACCESS'])){
echo json_encode(array('ACCESS'=>'denied'));
exit;
}
// 아이디 또는 비밀번호를 입력하지 않았을 시
if(empty($_POST['id'])||empty($_POST['pw'])){
echo json_encode(array('result'=>'f','msg'=>'아이디 또는 비밀번호를 입력해주세요'));
exit;
}
// 데이터베이스값을 대체하는 변수
$get_id = 'user'; // 임의로 정의된 아이디
$get_pw = sha1('1234'); // 임의로 정의된 비밀번호
// 아이디 불일 치시
if($get_id!=$_POST['id']){
echo json_encode(array('result'=>'f','msg'=>'아이디가 일치하지 않습니다.'));
exit;
}
// 비밀번호 불일치 시
if($get_pw!=sha1($_POST['pw'])){
echo json_encode(array('result'=>'f','msg'=>'비밀번호 일치하지 않습니다.'));
exit;
}
// 로그인이 성공했을 시
echo json_encode(array('result'=>'success','msg'=>'로그인에 성공하였습니다.','id'=>$_POST['id']));
exit;
?> 실행화면
로그인전 화면
로그인 후 화면
LIST
'웹프로그래밍 > PHP 일반' 카테고리의 다른 글
| PHP 의 smtp 전송을 이용한 메일 보내기 소스파일 (255) | 2015.06.23 |
|---|---|
| PHP 조건문 switch case (292) | 2015.06.02 |
| PHP 조건문 if 과 삼항 연산자 (292) | 2015.06.02 |
| PHP에서 한글 검사 99.9% 완벽한 알고리즘 (235) | 2015.04.28 |
| PHP 정규 표현식의 규칙 모음 (235) | 2015.03.23 |
PREV
