Ajax, 웹브라우저 링크 클릭하여 서버 텍스트 파일 가져와 출력

2022. 5. 31. 16:43

Ajax, 웹브라우저 링크 클릭하여 서버 텍스트 파일 가져와 출력

글. 수알치 오상문

[참고] 서버에서 실행해야 정상 동작한다. (예제는 이클립스 톰캣 서버 사용)

[주의] 예제 index.html 파일을 웹브라우저로 직접 열어서 실행한 경우,

링크를 클릭하면 CORS 에러가 발생할 수 있다.

실행 화면에서 보고 싶은 애국가 절을 클릭하면 다음처럼 아래쪽에 나타납니다.

애국가 1~4절은 각각 verse1, verse2, verse3, verse4 파일에 있으며 index.html과 같은 경로이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div><h1>애국가</h1></div>
<ol>
	<li><a href="#verse1" onclick="fetchPage('verse1')">애국가 1절</a></li>
	<li><a href="#verse2" onclick="fetchPage('verse2')">애국가 2절</a></li>
	<li><a href="#verse3" onclick="fetchPage('verse3')">애국가 3절</a></li>
	<li><a href="#verse4" onclick="fetchPage('verse4')">애국가 4절</a></li>
</ol>
<article>
</article>
<script>
function fetchPage(name) {
	fetch(name).then(function(response) {
	   	response.text().then(function(text) {
			document.querySelector('article').innerHTML = text;
	   	})
	})
}
if(location.hash) {
	fetchPage(location.hash.substr(1));
} 
</script>
</body>
</html>

아래 코드는 #verse4처럼 주소에 입력한 상태에서 재로딩 아이콘을 클릭하면(F5 키)

해당 해시 태그를 인식하여 가사를 출력해준다.

if(location.hash) {
fetchPage(location.hash.substr(1));
}

verse1 파일의 경우 아래처럼 등록되어 있다.

동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세<br>
무궁화 삼천리 화려 강산<br>
대한 사람 대한으로 길이 보전하세<br>

[참고] 텍스트 파일에서 <br> 태그 없이 사용하는 경우

fetchPage()에서 아래 부분처럼 pre 태그를 추가해주자. pre 태그를 이용하면 텍스트 파일 구조대로 출력해준다.

document.querySelector(`article`).innerHTML = '<pre>' + text + '</pre>';

저작자표시 비영리 변경금지

'AJAX, JSON' 카테고리의 다른 글

PJAX 레퍼런스와 예제 링크 (0)	2022.05.31
PJAX를 이용한 극적인 웹페이지 속도 향상 (0)	2022.05.31
Ajax, 단추 클릭 시 내용 업데이트 예제 (0)	2022.05.29
JSON 공식 사이트 (0)	2022.05.28
JSP에서 Ajax와 JSON 활용하기 강좌 (0)	2022.05.21

수알치 블로그