본 수업은 폐지 예정입니다. 자바스크립트 언어 수업과 웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.
서버란?
- 개인용 PC와 똑같음 -단지 웹서비스가 돌아가는 컴퓨터일 뿐임
- 개인용 PC도 서버가 될 수 있음.
- 서버들이 모여있는 곳을 IDC라고 함.
- 보통 이렇게 생겼음 - 그러나 거의 똑같은 컴퓨터임
클라이언트란?
- 서비스를 받는 컴퓨터, 브라우져등을 의미함
- 보통 이렇게 생겼음.
서버 - 클라이언트 모델이란?
- 클라이언트가 요청하면 서버가 응답하는 것을 통해서 웹서비스가 운영됨
- 이 모델이 극대화된 것이 클라우드 컴퓨팅.
- 모든 에플리케이션을 웹서버에서 제공하고 컴퓨터는 브라우져를 통해서 시스템을 이용 - 구글의 웹에플리케이션들과 크롬 OS
HTML과 서버
- 웹페이지에서 서버로 데이터를 전달하기 위해서는 Form을 사용
- form을 이용하면 페이지가 리로드 되면서 서버로 데이터를 전달
- HTML 수업 참조
receiver.php - example1.html, example2.html이 전송한 데이터를 받아서 출력해주는 php 프로그램 (github)
<?php echo $_GET['nickname'].'님 안녕하세요'; ?>
example1.html - (github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <form action="./receiver.php" method="GET"> <label for="nickname">이름</label> <input id="nickname" type="text" name="nickname" value="" /> <input type="submit" /> </body> </html>
Ajax (Asynchronous JavaScript and XML)
- 페이지 리로드 없이 데이터 통신을 할 수 있다.
- 어떻게 발음하는지는 의견이 분분하다 -> http://deving.net/143
- jQuery와 같은 라이브러리를 이용해서 쉽게 사용할 수 있다.
example2.html - (github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript">
function load(e) {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("output").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "./receiver.php?nickname=" + document.getElementById('nickname').value, true);
xmlhttp.send();
return false;
}
</script>
</head>
<body>
<form action="http://lab.opentutorials.org/receiver.php" method="GET">
<label for="nickname">이름</label>
<input id="nickname" type="text" name="nickname" value="" />
<input type="submit" onclick="return load()" />
</form>
<textarea id="output"></textarea>
</body>
</html>
