사실은 Ajax에서 PHP를 사용하는 방법이 맞지만 카테고리가 PHP이므로… 여하간 오늘 처음으로 Ajax를 사용했는데 정말 좋다. 이 방식을 이용하면 실시간 통신도 쉽게 구현할 수 있을 것 같다. 물론 성능은 고려하지 않고 하는 말이다.


필자가 Ajax를 사용하고자 한 이유는 NotePHPad를 업그레이드하기 위함이었다. 메모를 기록할때마다 새로고침이 되는 구조를 가지고 있어서 빠른 웹서버에선 느끼기 힘들지만 클라우드 플레어가 적용된 경우 심히 느리다. 그래서 다른 블로그의 글도 찾아보고 했지만 너무 어려워보여 포기할 생각이 컸다.

제타위키의 글을 찾아보니 정말 쉬운 소스코드를 사용하여 구조를 쉽게 파악할 수 있었고 정말 간단하게 적용하였다. 그래도 역시 클라우드 플레어 때문에 좀 느린감이 있다.


소스코드

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
    <meta charset="utf-8">
</head>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
	function add() {
		$.ajax({
			url: "go.php",
			type: "post",
			data: $("form").serialize(),
		}).done(function(data) {
			alert(data);
		});
	}
</script>
<form>
	<input type="text" name="number1"> 더하기 <input type="text" name="number2"><br>
	<input type="button" onclick="add()" value="결과">
</form>

go.php

1
2
3
4
5
6
7
8
<?php
$number1 = $_POST['number1'];
$number2 = $_POST['number2'];

$result = $number1 + $number2;

echo "더한값은 $result 입니다";
?>

새로고침하지 않아도 data에 php에서 연산된 값이 전달되는 것을 확인할 수 있다. Interval을 줘서 DB를 계속 긁어 온다면 간단한 채팅은 가능하지 않을까?


오늘의 배움

  • jQuery 버전을 맞춰야 ajax를 정상적으로 사용할 수 있다. 가능하면 제타위키 코드에있는 jQuery를 사용하자.

  • 필자의 input tag에서 엔터를 입력하면 자동으로 새로고침되는 문제가 있었다. input tag가 하나인 경우 자동으로 summit이 된다고 하여 다음과 같은 옵션을 추가해야 한다.

1
<form onsubmit="return false">
  • 엔터를 쳤을때 안에 있는 내용은 지우고 ajax 함수 실행하는 방법
1
<input id="default_focus" autocomplete="off" type="text" name="memo" onkeydown="JavaScript:Enter_Check();">
1
2
3
4
5
6
function Enter_Check(){
    if(event.keyCode == 13){
        runWrite();
        document.getElementById('default_focus').value = "";
    }
}
WRITTEN BY

배진오

소비적인 일보단 생산적인 일을 추구하며, 좋아하는 일을 잘하고 싶어합니다 :D
im@baejino.com