AJax는 Asynchronous Javascript And eXtensible MarkUp Language
비동기 자바스크립트 앤드 엑스엠엘!
비동기 와 동기에 대해서 알아봐야 하는데
동기적이란건
웹페이지에서 버튼을 눌렀을때 그 버튼이 입력 및 출력 받는 동안 멈춘다는 것을 의미합니다.
즉 한개가 실행하고 있을때에는 다른 어느 버튼도 실행할수가 없습니다.
비동기란
웹페이지에서 버튼이 여러개 있을때 한개 버튼이 실행하는동안 다른 버튼도 실행이 가능할수 있다는 것을 의미
Ajax의 장점과 단점
장점 :
비동기로 하기 때문에 웹페이지에서 여러개의 버튼중 한개의 기능만 수행하고 나머지는 다시 데이터를 가지고
올 필요가 없는 장점이 있다. 그것은 일부분만 바꿀때 가장 많이 쓰인다고 할수있다.
사용 예 ex) 구글 map, 네이버 검색, 게시판 댓글
단점 : 보안에 취약, 여러번 요청시 서버 과부하
AJax의 핵심은 XMLHttpRequest이다.
request가 왔을때 xmlHttpRequest가 요청을 server에 보내고
server에서는 응답을 xmlHttpRequest로 보내고 그 응답을
response로 보낸다.
아래는 객체를 구하는 방식이다.
//IE에서 객체를 구하기
function getXMLHttpRequest(){
if(window.ActiveXObject){
try{
return new ActiveXObject("Msxml2.XMLHTTP"):
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e1){
return null;
}
}
}
//IE 이외의 파이어폭스 오페라와 같은 브라우저에서 XMLHttpRequest 객체 구하는방법
else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else {
return null;
}
}
웹서버에 요청 전송하기
httpRequest = getXMLHttpRequest();
httpRequest.onreadystatechange = callbackFunction;
httpRequest.open("GET","/test.txt",true);
httpRequest.send(null);
open에 첫번째 인자.
첫번째 인자는 Http메소드를 지정한다.( "GET" , "POST" )으로 사용가능하다.
두번째 인자는 접속할 URL 입력한다.(같은 도메인에 있어야한다.)
세번째 인자는 동기/비동기 방식을 의미한다. (false, true)
send = get방식인 post방식인지 확인해서
post방식으로 데이터 전달하고 싶을때
ex)
httpRequest.send(id = madvirus&pw1234);
onreadystatechange 프로퍼터 =
웹서버로부터 응답이 도착할때 호출될 함수를 지정할때
open()이나 send()함수가 호출될때 실행된다.
콜백함수
httpRequest.readystate == 4
readystate가 4인 경우에만 원하는 기능을 수행한다.
readystate가 1,2,3인 경우엔 아직 서버에서 응답이 도착하기 전이기 때문에
로딩을 표시해주는것이 좋다.
서버로부터 응답상태
httpRequest.status == 200 요청성공 (OK)
httpRequest.status == 403 접근거부 (Forbidden)
httpRequest.status == 404 페이지 없음 (Not Found)
httpRequest.status == 500 서버오류발생( Internal Server Error)
서버로부터 응답이 도착하고 올바르게 도착했다면 사용할 것
httpRequest.responseText;
파라미터의 한글처리방법
encodeURIComponent("한글처리");
innerHTML = 화면 동적 변환
