ajax란?
Asynchronous JavaScript And XML의 약자로
직역하면 비동기 자바스크립트 그리고 XML이다
ajax의 특징은?
서버와 통신하기위해 XMLHttpRequest 객체를 사용하며
JSON,XML,HTML, 텍스트등 여러 포맷을 전달할수 있다.
또한 비동기 라는 표현답게
ajax를 통해 페이지전체를 로드하는 일없이
페이지의 일부만 로드할수 있게된다.
예를 들어
위의 사진의 메뉴얼중 자동차를 클릭하게 되면
자동차에 관련된 소식으로 화면이 일부변경 하게되는데
이러한점은 사용자 입장에서 굉장히 편리하다.
비동기가 동시에 일어나지 않는다는 뜻이지만
개인적으로 ajax의 비동기란
여러 기능들이 서로에게 영향을 주지않고
독립적으로 변화할수 있다는 의미처럼 느껴진다
ajax의 사용법
먼저 javascrpit에서 제공하는 object중 하나인
XMLHttpRequest 를 생성해야한다
1. 브라우저 호환성에 맞는 httpRequest 생성
2. reqeust 생성 확인
if(window.XMLHttpRequest)
{
httpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject)
{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!httpRequest)
{
alert('XMLHTTP 인스턴스 생성 실패');
return false;
}
생성한 객체는 요청을 보낸후
돌아오는 응답을 받는데
이 응답에 따라 대응할 방법을 설정해주기위해
객체의 onreadystatechange 라는 속성에 함수를 할당해줘야한다.
httpRequest.onreadystatechange = function()
{
}
3. httpRequest 전송
그리고 안에 httpRequest객체를 전달하기 위한 설정을 하고
값을담아 보낼수 있다
httpRequest.onreadystatechange = function()
{
httpReqeust.open('GET','http://ip:포트번호/요청경로, 비동기면 true 아니면 false입력);
httpRequest.send(null); //보낼값
};여기서 open의 3번째 boolean타입을 flase로주게 된다면
이 요청은 동기식으로 보낼것이라는 것이며
httpRequest.send() 요청후 서버로부터
응답을 받을때까지 다음 함수가 실행되지 않는다.
또한 send()를 통해서 ajax의 데이터를 실어보낼수 있다.
4. 서버 응답에 대한 처리
생성한 객체의 readyState 와 XMLHttpRequest.DONE의 상태값을 통해
응답이 됐는지 안됐는지 확인할수 있으며
이에따라 응답이 가능하다
( 단 여기서 XMLHttpRuquest가 새롭게 생성된것인지
응답한 Response가 XMLHttpRequest로 오는것인지는
아직 잘정리가 되지 않았다 아마 서버쪽의 Response를 나타내는 것 같다)
if(httpRequest.readyState === XMLHttpReqeust.DONE)
{
// XMLHttpRequest.DONE은 5가지의 상태를 갖는다
// 0 일경우 request의 초기화가 진행되지 않은 상태
// 1 일경우 서버와의 연결까지 성사된 상태
// 2 일경우 request 전달만 된상태
// 3 일경우 reqeust 의 요청을 처리하고 있는 상태
// 4 일경우 reqeust 의 대한 처리가 모두끝났으며 응답 가능한 상태
// if문은 4일경우 true로 작동하는 것 같다.
}else
{
// 0~3 까지 모두 해당되는 것 같다
//궁금한점이 4가 되기전까지 0~3의 과정이필요한데
//4로 변환되기 전까지 기다려주는 것인지 궁금하다.
}
이렇게 서버에 대한 요청준비상태를 확인했다면
응답 코드에대한 것을 확인해야한다
if(httpRequest.status === 200)
{
// 이상무
}else
{
// request의 처리과정중 문제발생
// error코드는 여러개가 될수있다
// 큰틀로 400번대는 요청측 에러
// 500번대는 서버쪽 에러이다
}본인같은 경우는
sts에 API를 작성하고
vscode에서 request요청을 보냈는데
403에러가 발생 하였다.
에러의 뜻은 서버 제대로 찾아갔는데
연결 거부를 당했다는 뜻이였다.
아래와 같이 vscode의 ip와 port번호를 허용해줌으로써 403에러를 해결했다
여담으로 같은 경우 404에러를 엄청나게 많이 볼수있었다
예시로 내가 만든 코드이다
클라이언트쪽
document.addEventListener("DOMContentLoaded",function()
{
if(window.XMLHttpRequest)
{
httpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject)
{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!httpRequest)
{
alert('XMLHTTP 인스턴스 생성 실패');
return false;
}
httpRequest.open("GET","http://localhost:8080/getText",true);
httpRequest.send();
httpRequest.onload = function()
{
if(httpRequest.readyState === XMLHttpRequest.DONE)
{
if(httpRequest.status = 200)
{
console.log("반환값 : " +httpRequest.response);
}else
{
console.log("실패");
}
}else
{
alert("request쪽 문제 있음");
}
}
});
API측
반환화면
사진으로는 안녕 이 제대로 돌아오지만..
사실 ?? 로 반환이 되어 굉장히 애를 먹었다.
인코딩의 문제를 바로떠올렸었는데
vscode 셋팅과
STS 의 셋팅 모두 UTF-8 로 설정하였기에
인코딩문제는 절대 아니라고 확신해버린 것이 화근이였다..
영어를 반환시켰는데 제대로 반환되는 것을 보고
뒤늦게 수정할수 있었다.
하지만 환경설정의 인코딩들하고
response에 직접 utf-8인코딩 하는것의 차이는
아직도 잘 이해하지 못하였다.
문제 해결시 사용한 코드다
