자바스크립트에서 빼 놓을 수 없는 또 하나의 중요한 기능이 바로 AJAX 라고 부르는 놈이야.
Asynchronous Javascript And XML 의 약자로 보통
'에이잭스' 또는
'아작스'로 불러.
번역하자면 '비동기 자바스크립과 XML 통신?'.. 뭐 그런데 해석해도 이해하기 힘들고, 직접 눈으로 봐야 해.
현재 보고 있는 웹페이지의 새로고침해서 전체를 다시 보여 주는 것이 아니고, 화면의 일부분만 갱신하는 용도로 가장 많이 사용돼.
대표적인 예제가 최신글 보기인데 네이버나 다음 같은 포털 메인화면을 보면 5~10초 마다 최신뉴스 속보가 바뀌거나 실시간 검색어가 변하거나 종합주가지수가 변하는 것을 볼 수 있어.
처음 포털화면에 접속했을 때 최신뉴스, 검색어, 종합주가등이 보이는 것은 당연한데, 그 뒤로는 새로고침을 하지도 않았는데 특정 부분만 최신정보로 바뀌는데 이러한 것들이 대부분 자바스크립트의 AJAX 기술을 사용해서 구현해.
AJAX 의 또 다른 기능은 백그라운드로 서버로 데이터를 보내는 기능이야.
AJAX 의 기능을 정리하면..
- 웹페이지가 다 로딩된 후에 백그라운드로 서버에서 데이터를 가져 온다.
- 웹페이지의 특정 부분만 새로고침 할 수 있다.
- 백그라운드로 서버에 데이터를 보낸다.
이번 학습 또한 화면을 눈으로 확인해 보고 소스를 이해해 볼거야.
그런데 이번 예제는 여러분의 PC 에서는 제대로 작동을 안해..ㅠ
자바스크립트의 몇몇 명령들은 불러 올 파일이 PC나 다른 URL주소에 있는 경우 부르지 못하게 막았기 때문이야.
해커가 자바스크립트를 조작해서 다른 웹주소에 있는 악성코드를 불러 오는 것을 방지하자는 의도야.
그래서 이번 장을 따라하면서 공부하려면 이미 Cafe24 같은 웹호스팅의 계정을 가지고 있거나, 또는 여러분 PC에 웹서버를 설치한 경우에만 작동할거야.
1. 아래 내용을 복사해서 js.html 을 바꿔치고 저장해서, 서버의 폴더에 업로드 해.
<!DOCTYPE html>
<html>
<body>
<h2>AJAX 공부하기</h2>
<div id="demo">
<p>아버지는 나귀타고 장에 가시고..</p>
<button type="button" onclick="loadDoc()">불러오기</button>
</div>
<script>
function loadDoc() {
let xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "js.txt");
xhttp.send();
}
</script>
</body>
</html>
이번 테스트를 위해서는 파일이 1개 더 있어야 돼. 불러올 파일이지.
2. 아래 내용을 복사해서 js.txt 라는 텍스트 파일을 만들어 위 js.html 파일과 동일한 서버 폴더에 업로드해.
(내용은 Html 태그를 포함해 어떤 것이어도 괜찮아)
나리나리 개나리 <br>
입에따다 물고요 <br>
병아리떼 뽕뽕뽕 <br>
봄나들이 갑니다. <br>
브라우저에서 js.html 을 실행하고 [불러오기] 버튼을 누르면 <div id="demo">~</div>의 내용이 js.txt 의 내용으로 바뀌는 것을 볼수 있을거야.
버튼도 이 div 안에 있기 때문에 없어져 버려. (다시 새로고침을 하면 다시 나타날거야)
여기서 중요한 점은 현재 보고 있는 파일은 js.html 그대로 라는 거야.
처음 접속했던 js.html 에 그대로 있으면서 버튼을 클릭하면 함수를 실행하면서 백그라운드로 js.txt 를 가져와 보여 주었어.
코드를 한 줄씩 이해해 볼까?
- 우선 [불러오기] 버튼에 onclick 이벤트로 클릭을 하면 loadDoc() 함수가 실행 되도록 했어.
- let xhttp = new XMLHttpRequest();
가장 핵심이 되는 명령이 바로 XMLHttpRequest() 라는 객체를 호출해서 xhttp 라는 변수에 할당했어.
getElementById() 가 Html 파일에서 특정 id 이름을 가진 요소를 가져오는 것 처럼 XMLHttpRequest 는 다른 파일의 내용을 가져오는 기능을 모두 갖춘 객체를 준비를 한다고 생각하면 될거야.
그런데 이 명령을 부를 때 앞에 new 라는 단어를 사용했네?
이 new 는 '생성자' 라고 부르는데 new 라는 이름처럼 XMLHttpRequest 의 기능을 똑같이 복사한 새로운(new)객체로 만들라는 뜻이야.
이 생성자는 지금 단계에서는 이해 시키기가 좀 어려우니 일단 넘어 갈거야.
생성자(new)에 대해 자세히 알고 싶으면 :
https://blog.naver.com/ssi02014/222575614856
우선 이 XMLHttpRequest 를 사용하기 위해서는 꼭 앞에 new 를 붙인다고 생각하면 편해.
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
위 명령은
"서버에서 가져온 내용이 모두 들어오면 function() {...} 부분을 실행해라." 는 뜻이야.
onload 는 데이터가 모두 들어 왔을 때 발생하는 이벤트야.
즉, 윗 줄의 new XMLHttpRequest() 로 만든 xhttp 라는 변수(객체)에 데이터를 다 불러왔을 때 발생해.
document.getElementById("demo").innerHTML 는 아는 코드지?
문서의 id 가 demo 인 요소(div)의 내용을 this.responseText 로 바꿔치라는 명령이야.
서버에서 가져 온 데이터들은 responseText 라는 XMLHttpRequest 라는 객체의 내부변수(속성)에 저장돼.
즉 responseText 안에 가져온 파일의 내용이 들어가 있는거야.
앞의
this 는 말 그대로 이것, 즉 이번에 생성한 xhttp 객체를 뜻해.
개념을 설명하기는 힘든데, 해석하기는 아주 쉬워..
'지금 이거' 야..ㅎ
그러므로 지금 코드에서는 this.responseText 대신 xhttp.responseText 로 해도 똑같이 작동해.
그런데 왜 this 를 사용했을까?
웹페이지에 이 XMLHttpRequest 를 사용하는 코드들이 많다고 생각해 봐.
지금은 xhttp 라는 객체를 만들어 사용했지만, 복잡한 웹페이지여서 다른 용도로 다른 이름의 객체를 많이 사용하게 되면(예: xhttp2, xhttp3...) 위 코드를 복사해 사용할 때 이 코드 역시 xhttp2.responseText, xhttp3.responseText 등으로 바꿔 주어야 하잖아.
그런데 this 를 사용하면 사용중인 자기 객체의 responseText 이라는 것을 표현할 수 있어.
이 this 라는 예약어는 자바스크립트 여기저기서 아주 중요하게 많이 쓰여.
xhttp.open("GET", "js.txt");
xhttp.send();
open("전송방식", "파일명") 은 서버의 어떤 파일을 사용할 것인지와 접속방식을 뜻해.
Html을 공부할 때 서버에 데이터를 보낼 때 GET 방식과 POST 방식이 있다는 것은 알지?
(이것은 Html 이나 PHP 에서 학습할 내용이기 때문에 여기서는 생략할께..)
open()은 지정한 파일(여기서는 js.txt)이 있는지 확인하고 준비하는 것이고, 아직 명령을 보낸 것은 아니야.
"가져와라~" 로 요청을 하는 것은 다음 줄 send() 야.
데이터를 보낼 때 POST 방식으로 보내려면 아래와 같이 사용해.
xhttp.open("POST", "js.txt");
xhttp.send("전송 데이터");
POST 로 보내는 것은 앞으로 여러분이 프로그램을 만들다 보면 필요해질 때가 올거야.
기본이 생겼으니 그때 잠깐 검색해 보면 금방 알 수 있을거야.
지금의 예제에서는 서버로 데이터를 보내는 것이 아니고, 미리 준비된 파일(js.txt) 내용만 가져 오는 것이기 때문에 GET 을 쓰든 POST 를 쓰든 똑같을 거야.
GET 을 사용하는 경우가 대부분이야.
그런데 조금 이상한 부분이 있지 않아?
코드의 순서가 xhttp.onload , xhttp.open , xhttp.send 순서야.
상식적으로는 xhttp.open , xhttp.send 를 먼저 보내고 뒤에 xhttp.onload 가 와야 하지 않을까?
서버에 가져 오라고 명령을 내려야 (open, send) onload도 의미가 있잖아.
난 이걸로 정말 함참 검색을 해 보았어.
대부분의 예제들은 onload 가 앞에 있는데, 왜 onload 가 앞에 있는지 제대로 된 답변을 찾지 못했어.
결국 혼자 추리한 내용은 다음과 같아.
onload 는 서버에서 데이터가 다 들어 온 뒤에 발생하는 이벤트야.
그런데 open, send 뒤에 onload 를 쓰면 데이터가 정말 빨리 오면 onload 를 준비하기도 전에 들어 올 수도 있어.
그래서 onload 를 미리 준비해 두고 open,send 를 쓴다... 이게 내 추리야.
맞는지, 틀리는지는 모르지만 open, send 명령을 onload 앞에 사용해도 별 문제는 없어.
나처럼 궁금한 사람이 있으면, 혹시 진짜 이유를 알게 되면 나에게도 좀 알려줘..ㅎ
AJAX 라는 이름은 거창한데 기본은 생각 보다 간단하지?
지금은 단순하게 미리 저장된 파일 내용을 AJAX 기술을 이용해 불러왔어.
그렇다면 네이버나 다음의 실시간 정보(최신글, 인기검색어, 주가..)는 어떻게 가져 오는 것일까?
바로 open( )의 파일명을 서버 스크립트를 호출하는 거야.
서버의 실행파일을 호출하면 서버에서 해당 파일이 실행되고 결과가 echo 등의 문자로 출력되겠지?
그 결과가 responseText 에 들어 와.
예를들어 [불러오기]를 클릭했을 때, 요기보드의 '자유게시판' 에 올라온 최신글 5개의 제목만 <li>태그로 보여주고 싶다면...
아래와 같이 open() 명령(메소드)에 최신글을 출력하는 latest.php 파일을 지정하면 이 파일에서 출력된 내용을 가져와 demo 자리에 보여주겠지?
function loadDoc() {
let xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "latest.php");
xhttp.send();
}
아래는 최신글에서 최근 5개만 출력해 주는 latest.php 의 소스야.
(요기보드에서 '자유게시판'의 catno 가 11 이라는 가정으로 간단히 작성한 코드야)
<?php
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$query = "SELECT `subject` FROM yg_bbs WHERE catno=11 ORDER BY `datetime` DESC LIMIT 5" ;
$result = mysqli_query($dbc, $query);
echo '<ul>';
while ($row = mysqli_fetch_array($result)) {
echo '<li>' . $row['subject']. '</li>';
}
echo '</ul>';
mysqli_close($dbc);
?>
PHP 가 아닌 어떤 서버 언어를 사용해도 다 마찬가지야.
호스팅 서버에 최신글을 출력해 주는 파일을 작성하고 그 파일을 호출해 주면 결과가 들어 올거야.
이번 장은 조금 어려웠는데 이해가 잘 되었는지 모르겠네...ㅎ