이번 포스팅에는 페이지를 일일이 서버로부터 다운로드 받지 않고도 동적으로 페이지를 조절할 수 있는 기술인 AJAX에 대해서 알아보겠습니다.
AJAX는 옛날에는 엄청 길고 까다로운 코드를 통해 구현해야 했는데, 시간이 지나면서
jQuery 방식을 지나 현재는 fetch라는 API가 등장해서 전부 fetch API를 이용해 AJAX를 이용한다고 합니다.
fetch API는 javascript의 기본 기능이라서 jQuery의 CDN과 같은 추가 작업을 해주지 않고도 바로 사용할 수 있는 장점이 있습니다.
웹에서 AJAX 이용해보기
html과 javascript를 주로 쓸 예정이니 visual studio code 를 켜서 index.html을 만들어줍니다.
! + TAB으로 기본 골격을 잡아줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
요로케요
리스트 태그 세 개를 연달아 적어서 리스트를 만들어 줍니다.
물론 현 상태에선 1.html ~ 3.html 이 없으니 만들어줘야 합니다.
요로케요
1.html에는 html 어쩌고 2.html에는 css 어쩌고 3.html에는 javascript 어쩌고 하는 대강의 표시를 남겨줍니다.
이 페이지는 1.html이라 article 태그 안에 html 어쩌고 글귀를 남겼습니다.
웹으로 1.html을 누르면 대강 이런 느낌입니다.
a 태그를 걸었으니 css 링크를 누르면 css 표시가 뜹니다.
하지만 URL로 보다시피 2.html로 새로 페이지를 다운받은 것을 알 수 있습니다.
사실 리스트는 전부 같고 내용만 표시해주면 되는데 낭비인 것 같습니다.
이럴 때 적용할 수 있는 기술이 바로 AJAX 입니다. Asynchronous javascript and xml 의 줄임말입니다.
AJAX 기술을 적용하기 위해선 제가 만든 간단한 웹 사이트가 웹 서버로 동작해야 합니다.
호스트 PC에 셋팅한 html 파일이 가상 머신에 바로 복붙이 안되서
github에서 ajax 웹 파일을 다운받아 사용해보겠습니다.
AJAX 기본 웹 깃허브 주소 : https://github.com/web-n/web3-ajax
GitHub - web-n/web3-ajax: web3 - ajax 수업에 대한 예제 저장소입니다. https://opentutorials.org/module/3447
web3 - ajax 수업에 대한 예제 저장소입니다. https://opentutorials.org/module/3447 - GitHub - web-n/web3-ajax: web3 - ajax 수업에 대한 예제 저장소입니다. https://opentutorials.org/module/3447
github.com
생활코딩님의 github에서 파일을 다운받아줍니다.
웹 서버 셋팅을 하고 준비한 파일을 /var/www/html 폴더에 넣을 것입니다.
칼리 리눅스를 오픈해줍니다.
apache2를 실행시켜줍니다.
호스트 pc에서 해당 ip를 호출하니 apache2 웹 서버 기본 페이지가 잘 출력됩니다.
준비한 웹 파일을 web3-ajax-master라는 폴더에 담아 /var/www/html/내부에 붙여넣기 했습니다.
그런데 권한이 막혀있는지 해당 페이지가 Forbidden 에러를 출력합니다.
chmod 777 /var/www/html/web3-ajax-master 로 권한을 열어주겠습니다.
네 이제 잘 열리네요
해당 웹은 해시를 이용해서 index.html 안에서 동적으로 페이지가 변화하는 것을 확인할 수 있습니다.
아까 호스트 pc에서 사용한 웹과 달리 이 웹은 ajax 기술을 이용해서 좀 더 빠르고
다른 페이지를 다운로드 받지 않고 동작합니다.
ajax 글자를 누르니 다른 페이지가 다운되지 않고 Ajax에 관한 내용을 출력해줍니다.
개발자 도구 (F12)를 켜서 network 탭을 눌러서 관찰해보니
각각 글자를 누를 때마다 다른 페이지를 로드하진 않지만 서버와 통신하는 기록이 찍혀있습니다.
AJAX 기본 골격
우선 fetch라는 ajax 라이브러리를 사용하기 위해서는 head부분에 아래 코드를 넣어줘야 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>이러면 fetch 함수를 사용할 수 있습니다.
기본적인 AJAX의 골격은 이렇습니다.
fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
이 뜻은 html 파일에서 응답을 받고 그 응답값의 text 객체를 받아 우리 페이지의 article 태그에
받아온 text 값을 뿌려줍니다.
예를 들어 fetch('html') 라는 명령어가 있으면 html이라는 파일을 ajax로 불러와줘!
라는 요청의 의미입니다.
그런데 요청에는 시간이 걸릴 수 있습니다. 이 시간 동안 컴퓨터가 다음 행동을 준비시키는 것이
then이라는 함수입니다.
fetch API가 요청을 받아오면 그제서야 then 안의 함수를 실행시켜줍니다.
아까 다운로드 받은 ajax 예시는 기초적인 ajax 골격에 해시도 들어가있고 심화도 섞여있는 것 같으니
차근차근 정복해나가보겠습니다.
<input type="button" value="fetch" onclick="
//Asynchronous
callbackme = function(){
console.log('response end');
}
fetch('html').then(callbackme);
">
이런식으로 코드를 짠다면 callbackme라는 함수는 response end라는 글자 콘솔을 찍어주는 함수입니다.
이 함수를 ajax fetch 함수 다음에 넣어서 요청을 받는 데 성공하면 callbackme 함수를 실행시켜줍니다.
또는 함수를 따로 정의하지 않고 익명함수로 냅다 fetch~ then 함수 다음에 넣어서 코딩할 수도 있습니다.
작성 스타일의 차이입니다.
fetch('html').then(function(){
console.log('response end');
});
fetch 커스텀 함수 만들기
이렇게 함수를 제작하면 name이라는 파라미터를 함수 별로 받을 수 있기 때문에
일일히 하드코딩하지 않아도 된다.
function fetchPage (name){
fetch(name).then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
});
}참조 사이트
생활코딩 AJAX 기초 수업 : https://www.youtube.com/watch?v=w077w7FN-pg&list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q
AJAX의 fetch API 사용법 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-AJAX-%EC%84%9C%EB%B2%84-%EC%9A%94%EC%B2%AD-%EB%B0%8F-%EC%9D%91%EB%8B%B5-fetch-api-%EB%B0%A9%EC%8B%9D
'HTML\CSS\Javascript' 카테고리의 다른 글
| [ AJAX ] AJAX #2 - 해시의 기능 (0) | 2023.08.07 |
|---|---|
| [javascript] 배열 내장 함수 - push, splice, slice, pop, shift, unshift (0) | 2023.05.31 |
| [html] label 태그, article 태그 (0) | 2023.05.06 |
| 환경변수, 컴파일러, 인터프리터 (0) | 2023.04.18 |
