[jQuery] 간단한 예제로 ajax 사용해보기

 

 

ajax란 무엇일까?

 

ajax는 비동기 자바스크립트 xml이라고 합니다.

비동기로 서버와 통신하고 json, xml, html, text 등의 값을 주고받을 수 있습니다.

쉽게 말해서 페이지를 새로고침하지 않고도 서버와의 통신을 통해 값을 받아 올 수 있는 것입니다.

 

기존에 입력된 값들은 새로고침을 하게 되면 다 날아가게 되어 이런 비동기 방식을 활용하여,

입력돼 있던 값들도 살리고 서버에서 필요한 데이터도 가져올 수 있게 하는 것입니다.

 

 

반응형

 

 

예제를 통해 알아보기

 

test_page.php

<script type="text/javascript">
    function ajax_text() {
        var test_text = "go";

        $.ajax({ 
            type:"POST", 
            url:"test_page2.php",
            data: {
                text: test_text,
            },
            dataType:"text",
            success:function(result){ 
                console.log(result);
            }
        });
    }
</script>

<div id="button" class="box" onclick="ajax_text()">
    ajax 통신하기!
</div>

 

 

ajax 통신이 잘되는지 확인하기 위해 간단하게 text값을 넘겨보겠습니다.

 

url에 ajax를 통해 값을 넘겨주고 싶은 페이지의 경로를 적습니다.

위의 예제는 같은 폴더에 있는 test_page2.php에 값을 넘겨주겠습니다.

 

data에 넘길 데이터 이름과 데이터 값을 적어줍니다.

데이터타입은 텍스트로 넘겨줄 것이기 때문에 text로 적어줬습니다.

이후 통신이 성공하면 콘솔을 통해서 result값을 확인해 보겠습니다.

 

 

ajax 통신하기 버튼

 

 

위의 이미지처럼 간단하게 버튼하나 만들어주고 누르면 ajax_text 함수가 실행되게 해 보겠습니다.

 

 

text_page2.php

<?
	header('Content-Type: text/html; charset=euc-kr');

	$text = $_POST["text"];

	if($text == "go") {
		echo "통신완료";
	} else {
		echo $text;
	}
?>

 

 

ajax를 통해 값을 받아주는 text_page2.php의 코드입니다.

 

post로 보내주었기에 post로 값을 받아주고,

이전페이지에서 값을 go로 넘겨주었으니 제대로 받아왔는지 체크 후 제대로 받아왔다면,

"통신완료"를 text_page.php로 보내주도록 하겠습니다.

 

결과

ajax 통신이 완료된 결과

 

 

 

콘솔로 통신완료라고 찍힌 것을 보니 값이 잘 전달되었다는 것을 알 수 있습니다.

 

 

심화예제

 

 

이제 ajax로 통신이 잘된다는 것을 확인했으니 db와 연결하여 비동기 방식으로 db의 데이터를 가져와보도록 하겠습니다.

예제는 DB에 지하철 역을 저장해 두고 지역을 입력 시 그지역의 지하철역의 리스트를 한 번에 보여주는 예제를 만들어 보겠습니다.

 

 

test_page.php

<script type="text/javascript">
	//ajax
    function ajax_text() {
        var area = $("#area").val();
        $("#subway").html("");

        $.ajax({ 
            type:"POST", 
            url:"test_page2.php",
            data: {
                area: area,
            },
            dataType:"json",
            success:function(result){
                $.each(result, function(key,val) {
                    var source = "";

                    source = "<div class='sub_btn'>"+val+"</div>";
                    $("#subway").append(source)
                });
            }, 
            error:function(result) {
                alert(result);
            }
        });
    }
    
    //버튼클릭시 동작하는 이벤트
    $(document).ready(function() {
        $("#subway").on("click", ".sub_btn", function() {
            $(this).toggleClass("on");
        });
    });
</script>

 

 

<div class="box">
    <input type="text" placeholder="이름을 입력해주세요." class="text_box">
    <input type="text" placeholder="전화번호를 입력해주세요." class="text_box">

    <input type="text" placeholder="지역을 입력해주세요." id="area" class="text_box">
    <div id="button"onclick="ajax_text()"> 지하철 검색 </div>
    <div id="subway"></div>
</div>

 

 

test_page.php의 전체적인 코드는 위와같이 작성하였습니다.

 

비동기 방식인 것을 보여드리기 위해 input text를 넣어서,

ajax통신을 하여도 미리 입력한 값들은 변화되지 않는다는 것을 보여드리기 위함입니다.

 

지하철 검색 버튼을 누르면 id = "area"에 입력된 값을 ajax로 보내게 될 것입니다.

값을 받아오는 데 성공하게 되면 반복문과 append를 사용하여 아래 id = "subway"안에 가져온 값들을 넣어 보겠습니다.

 

지하철 검색 페이지

 

 

테스트 페이지는 위의 이미지와 같이 보입니다.

 

public function query($sql, $dbconn="") {
   //db연결 코드 작성할곳 //
    $res = mysql_query($sql, $dbconn) or $res = "Error";
    return $res;
}

public function fetch($res) {
    $data = mysql_fetch_array($res);
    $data = array_map('stripslashes', $data);
    return $data;
}

 

 

위의 코드는 미리 작성된 클래스입니다.

이 클래스를 활용하여 db에서 불러온 값들을 쓰기 좋게 배열형식으로 저장하게 됩니다.

 

 

test_page2.php

<?
$area = $_POST["area"];
	
if($area) {
    $sql = $db->query("select * from wr_subway where search like '%$area%'");
    $subway_arry = array();
    while ($data = $db->fetch($sql)) {
        array_push($subway_arry, $data["subway"]);
    }
    echo json_encode($subway_arry);
} else {
    echo "실패";
}
?>

 

 

DB에서 값을 가져와줄 페이지입니다.

이전페이지에서 post방식으로 지역이름을 보내주었으니 post방식으로 값을 받아줍니다.

 

보내준 데이터가 있는지 if문을 통해서 체크 후 값이 있다면, DB연결을 통해 DB에 저장된 값을 불러옵니다.

반복문을 통해 저장하고 싶은 값 (지하철역 이름)만 배열에 push를 통해 넣어줍니다.

 

ajax의 데이터타입은 json으로 설정해 주었기 때문에 json_encode를 통해 json값으로 변경하여 보내줍니다. 

 

지하철역 검색 결과 페이지

 

 

이렇게 검색 버튼을 눌러도 아래에 지하철역 이름 부분만 바뀌고 위쪽에 미리 입력해 둔 이름과 전화번호 값들은 바뀌지 않고,

비동기식으로 처리가 가능합니다.

 

DB에서 호선 별로 정리하여 1호선만 보이게 하는 등등의 처리도 가능합니다.

 

---

 

결론

 

이렇게 ajax를 활용하면 페이지가 새로고침 되지 않는 큰 장점이 있기 때문에 여러 곳에서 무궁무진하게 활용이 가능합니다.

ajax는 개발자에게 필수적으로 요구되는 코드사용방법 중 하나입니다.

ajax에 대한 예제를 직접 코딩해 보고 활용해 보면서 ajax의 사용방법에 익숙해지면 좋겠습니다.