AJAX

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

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


Example Source

아래 코드는 포스트 방식으로 두개의 값을 전달하여 php에서 값을 계산하여 현재 페이지에서 계산된 값을 출력하는 코드이다.

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 입니다";
?>

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

+ 2020-02-03 : 실시간 통신을 구현하고 싶다면 WebSocket에 대해서 알아보세요.


새로운 배움

  • 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 = "";
    }
}




내용 보충!

이 글로 방문해 주시는 분들이 많은 것 같아서 내용을 보충하고자 한다. 우선 AJAX란 무엇인가? 필자가 현재 이해하고 있는 AJAX는 서버에 비동기로 통신하는 하나의 방법이다. 자유자재로 사용하고 싶다면 JavaScript에 대한 이해가 필요하다. 아래 그림을 통해서 이해해 보도록 하자.

AJAX는 자바스크립트를 활용해서 서버에 요청을 보낸다. 요청은 GET, POST, PUT, DELETE가 존재하지만, 잘 모르겠다면 건너뛰어도 된다. 여하지간 자바스크립트로 서버에 요청을 보내고 서버에서 보내주는 결과를 다시 자바스크립트로 받는다. 그 값을 통해서 동적인 효과를 부여할 수 있다. AJAX를 통해서 전달받을 수 있는 값은 String, HTML, JSON, XML등 다양하게 존재한다.

필자의 서버에 myname.php라는 파일이 존재한다고 생각해보자. 여기에 요청을 보내면 무조건 Bae Jino라는 값이 나온다. index.html에서 필자의 이름을 가져오려면 이 AJAX를 활용하면 된다. 아래 코드는 예시이다.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <meta charset="utf-8">
</head>
<body>
	<p>저의 이름은 <span id="myName"></span>입니다!<p>
	<script src="//code.jquery.com/jquery.min.js"></script>
	<script>
		$.ajax({
			url: "myname.php",
			type: "get",
		}).done(function(data) {
			$('#myName').text(data);
		});
	</script>
</body>

위와같이 코드를 작성하면 myname.php로 요청을 보내고 요청이 완료되면 서버에서 전달해주는 Bae Jino라는 값이 span태그에 삽입된다.

WRITTEN BY

배진오

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