Ajax 란...

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  = 화면 동적 변환