블로그 프로필 이미지




 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;
?>


 실행화면


 로그인전 화면



 로그인 후 화면



댓글
사랑은 2018.08.03 10:11  Edit  Rep

테스트 페이지 하나 만들고 있었는데 도움 많이 되었습니다..
거의 복붙이었지만..;;ㅎㅎㅎ

Favicon of http://just73.com 저스트 2019.05.13 17:27  Edit  Rep

꽁머니 안전 놀이터 just73.com 코드7979 안전공원 지금 이곳에서 만나보세요.
어설픈 곳에서 피해입지 마시고 자금력 있는 곳에서 안전하게 스포츠게임과 바카라게임을 한곳에서 즐겨보세요.

88 2019.10.09 19:18  Edit

000

북한 2019.07.07 20:23  Edit  Rep


최근 북한에 억류됐다 풀려난 호주인 유학생 알렉 시글리(29)씨 관련 사태에 대해 북한이 처음으로 입장을 밝혔다. 북한은 그가 '간첩행위'를 했으며 '반공화국모략선전행위'를 했다고 주장했다.

6일 북한 관영매체 조선중앙통신은 "오스트레일리아 유학생 알렉크 씨글리(알렉 시글리)가 인터넷을 통해 반공화국 모략선전행위를 하다가 지난 6월 25일 우리 해당 기관에 현행으로 단속됐다"며 "조선민주주의인민공화국 정부는 인도주의적인 관용을 베풀어 7월 4일 그를 우리 경내에서 추방했다"고 밝혔다.

Favicon of https://mjmj3.com 먹중소 2019.07.10 14:12  Edit  Rep

자체 미디어 서버를 관리하여 짤리는 영상이 없습니다.

구글에 먹중소 검색하시면 바로 확인 가능 하십니다.

https://mjmj3.com

Favicon of https://mjmj3.com 먹중소 2019.07.11 13:34  Edit  Rep

자체 미디어 서버를 관리하여 짤리는 영상이 없습니다.

구글에 먹중소 검색하시면 바로 확인 가능 하십니다.

https://www.mjskorea01.com/list?p=a

Favicon of http://band.us/n/a5ab1d44V6L53 YOY투어 박실장 2019.08.06 01:14  Edit  Rep

호치민투어의 모든것 무엇이든 물어보세요 http://band.us/n/a5ab1d44V6L53호치민투어의 모든것 무엇이든 물어보세요 http://band.us/n/a5ab1d44V6L53
카톡문의 vvipmanok

ss 2019.10.09 19:18  Edit

siis

(비회원은 자신의 글을 볼 수 없습니다.)