ajax는 웹브라우져의 내용이 변경됐을 때
모든 페이지를 로드하는 것이 아닌
변경된 부분만 로드하여 출력해주는 기술이다.
그럼 이 ajax를 어떻게 사용하는지 확인해보자.
1. 먼저 javaScript로 값이 변경 됐을 때 서버와 통신하여 데이터를 가져오는 함수를 만든다.
2. 그 함수에서 XMLHttpRequest 객체를 만든다.
3. 그 객체에서 서버에 데이터를 요청하기 위한 멤버 함수를 실행한다.
4. 요청에 의한 응답이 왔을 때 실행되는 콜백함수를 정의해두며, 그 콜백함수에서 데이터가 잘 도착했는지 확인한다.
5. 도착한 데이터를 내가 원하는 html 요소를 통해 화면에 출력한다.
이 과정을 거쳐 서버에서 데이터를 가져오는데 면밀히 살펴보면 디테일한 과정이 숨어 있지만 일단 이 틀을 잡고 이해해보고자 한다.
1번은 건너뛰고 바로 2번의 XMLHttpRequest 객체를 만들어본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest 객체 만들기</title>
<script>
var xmlHttpRequest = new XMLHttpRequest();
</script>
</head>
<body>
</body>
</html>이렇게 객체를 만들고 이제 서버에 요청하기 위한 멤버함수를 사용한다.
아래코드를 참고하면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest 객체만들기 </title>
<script>
//데이터 요청을 실핼하기 위한 함수 선언
function sendRequest(){
//객체 생성
var xmlHttpRequest = new XMLHttpRequest();
//데이터 요청을 위한 함수
xmlHttpRequest.open("데이터 요청 방식", "웹서버.php", true);
xmlHttpRequest.xmlHttpRequest("속성", "값");
xmlHttpRequest.send();
//응답을 받는 코드
xmlHttpRequest.onreadystatechange = function() {
if (xmlHttpRequest.readyState == XMLHttpRequest.DONE && xmlHttpRequest.status == 200 ) {
//서버에서 받아온 데이터를 가지고 있는 멤버 함수
xmlHttpRequest.responseText;
}
};
}
</script>
</head>
<body>
</body>
</html>객체를 생성하고 open함수를 사용하여
데이터 요청방식을 GET, POST 중 하나를 선택한 후에,
요청할 서버 주소를 적고,
동기식 및 비동기식을 결정하여 비동기식이면 true, 아니면 false를 적는다.
xmlHttpRequest.onreadystatechange = function() {}
이 문장은 xmlHttpRequest 객체의 상태가 5가지가 있는데
그 상태가 변화될 때마다 불러줄 콜백함수를 설정하는 문장이다. 함수의 실행문에
기재된 내용이 실행된다.
그중 데이터 요청의 응답이 도착했을 때의 상태이면서,
데이터의 값이 있을 때의 상태번호인 200이면
실행하고자 하는 구문을 실행시키면 된다.
일단, 서버에서 받아온 데이터는
xmlHttpRequest.responseText; 이 멤버변수 안에 담겨 있다.
그래서 이 멤버 변수를 잘 활용하면 된다.
그리고
xmlHttpRequest.xmlHttpRequest("속성", "값");
이 함수는 서버와 웹사이에서 값을 주고 받을 때 http 헤더에 데이터를 담아 주고 받는데
서버에 값을 요청할 때 필요할 수 있는 정보는 위 함수를 사용하여 헤더에 담는다.
이렇게 ajax의 요청 및 전송방식을 알아보았다.