블로그 프로필 이미지

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