Database/Elastic Search

ajax로 elastic search DB에서 데이터 받아오기 예제

📝 작성 : 2021.05.15  ⏱ 수정 : 
반응형

학원 최종 프로젝트에 검색 기능을 넣으려다가 선생님께 추천 받아 elastic search를 사용해 보고 있습니다.

기왕 DB를 구축해 사용하는거, 채팅 메시지에 대해서는 RDBMS 말고 Elastic Search를 활용하려 생각하고 있습니다.

그것을 위해 여러가지 실험을 해보다가 한번 ajax로 비동기 데이터를 전달 받아 화면에 렌더링 하는 테스트를 시행해 보았습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type=text/javascript src="/lunchOrder/js/jquery-3.6.0.min.js"></script>
<title>Insert title here</title>
</head>
<body>

</body>
<script type="text/javascript">
	$.ajax({
		url: 'http://xxx.xxx.xxx.xxx:xxxx/gaia/message/_search',
		type: 'get',
		dataType: 'json',
		success : function(data){
			let messages = data.hits.hits;
			console.log(messages)
			let result = ''
			$.each(messages, function(i, data){
				let sender = data['_source'].sender;
				let message = data['_source'].message;
				result += sender + " : " + message + '<br>';
			})
			$('body').html(result);
		},
		error: function(xhr){
			alert(xhr.status);
		}
	})
</script>
</html>

간단하게 위의 코드만 작성했고, 해당 index/type/  (gaia/message/) 에는 몇가지의 더미 데이터를 미리 넣어두었습니다.

 

테스트를 해봤는데..

CORS policy로 인해 꽤나 고생했습니다. 위의 에러 해결이 필요하신 분은 아래 링크를 참고해주세요.

https://shanepark.tistory.com/113

 

No 'Access-Control-Allow-Origin' header is present on the requested resource. 해결하기

Access to XMLHttpRequest at '' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ajax를 이용해 elastic se..

shanepark.tistory.com

 

해결 후에 다시 테스트를 해보면..

데이터를 잘 읽어와서 렌더링 하는 것을 확인 할 수 있습니다!

ajax 만으로도 충분히 CRUD를 해서 비동기로 재밌는 화면을 구현 할 수 있을 것 같습니다.

반응형