[Javascript] AJAX 이용한 API 통신 (바닐라 JS)

window.onload = function () {
	var httpRequest;
	/* button이 클릭되었을때 이벤트 */
	document.getElementById("ajaxCall").addEventListener("click", () => {
		/* textBox에 작성된 name 데이터를 가져옴 */
		var inputName = document.getElementById("inputName").value;
		/* 통신에 사용 될 XMLHttpRequest 객체 정의 */
		httpRequest = new XMLHttpRequest();
		/* Get 방식으로 name 파라미터와 함께 요청 */
		let url = "http://127.0.0.1:9000/data/" + inputName;
		console.log(url);
		httpRequest.open("GET", url);
		/* Response Type을 Json으로 사전 정의 */
		httpRequest.responseType = "json";
		/* 정의된 서버에 요청을 전송 */
		httpRequest.send();

		/* httpRequest의 readyState가 변화했을때 함수 실행 */
		httpRequest.onreadystatechange = () => {
		/* readyState가 Done이고 응답 값이 200일 때, 받아온 response를 출력 */
		if (httpRequest.readyState === XMLHttpRequest.DONE) {
			if (httpRequest.status === 200) {
			var result = httpRequest.response;
			console.log(result);
			document.getElementById("test_data").innerText = result;

			const get_data = document.createElement("p");
			get_data.append(result.name);
			document.getElementById("test_add").appendChild(get_data);
			} else {
			alert("Request Error!");
			}
		}
		};
	});
};

 

url 설정시 localhost 이용하면 접속 안됨

127.0.0.1 이용할 것

 

if문 사용시 readState DONE -> status 200 2개 거쳐야함

안하면 결과 3번씩 반복 호출됨

이유는 모르겠음..

 

 

https://kim-oriental.tistory.com/12