Ajax 통신을 호출하는 새로운 함수(이름을 callRequest())를 만들어
이 새로 만든 함수 내부에서 아래와 같은 open , send 2개의 함수를 실행합니다.
요청은 XMLHttpRequest 객체의 인스턴스의 open , send 이 두 함수를 실행하면서 이루어집니다.
우선 먼저 open 함수 부터 알아보죠.
open 함수는 XMLHttpRequest 객체가 서버와 통신을 할 준비를 하게 됩니다.
그리고 3개의 인자값을 요구하게 되는데요.
첫번째 인자값은 HTTP 메소드를 사용할 방식, GET 또는 POST 방식중 선택을 하게 됩니다.
두번째 인자값은 요청을 하게 될 서버의 웹 서버의 주소, 즉 URL을 기입하게 됩니다.
세번째 인자값은 불리언(Boolean) 타입으로 True일 경우 비동기적 통신,
False 일경우 동기적 통신을 지정하게 됩니다.
send() 함수에 대해서 알아보도록 하죠.
send() 함수는 1개의 인자값을 받습니다.
만약, GET 방식의 요청을 하게 되면, null 값을 넣어주면 됩니다.
xmlHttp.send(null);
하지만, Post 방식의 요청을 하게 되면 여기에 인자값들을 맵핑할 수 있죠.
xmlHttp.send(var1=a&var2=b);
이런 식으로 말입니다.
그럼 callRequest() 함수를 구현해 보도록 하죠.
function callRequest() {
var type = "GET";
var url = "http://happykus.tistory.com";
//Ajax 호출 흐름과 기본적인 준비 운동 1/2 에 있는 XMLHttpRequest 셋팅해주는 함수
getXmlHttpRequestObject();
xmlHttp.onreadystatechange = readyStateChanged();
xmlHttp.open(type, url, true);
xmlHttp.send(null);
}
입니다. GET방식으로 호출하는 것이기 때문에 xmlHttp.send로 null을 넣은 것이고요.
POST 방식으로 호출하시더라도 인자값이 없으면, null을 넣어 주시면 됩니다.
이제 AJAX 호출을 위한 기본적인 사항들은 다 만들어 졌습니다.
얼마나 응용하는가... 얼마나 아이디어를 쏟아 붓는가에 따라서 결과가 매우 달라질 것입니다.
