ajax 레퍼런스

이 글은 한빛미디어 Ajax입문 책의 내용을 제가 나름대로 정리 한 겁니다.

HTTP 요청

초기화 : open()
open()메소드는 요처을 초기화하고 HTTP메소드 및 URL등을 설정합니다.

request = 오브젝트 생성함수();
request.open("GET", "test.xml");

위 코드는 test.xml을 읽어 들입니다.
open() 메소드의 첫번째 인수는 GET이나 POST를 지정하고 두번째 인수는 요청할 URL입니다.

송신 : send()
open()에 의해 접속을 초기화한 후 send()메소드로 요청을 송신합니다.

request.send(null);
request.send("");

일반적으로 "null"을 사용하지만 크로스 브라우저를 위해 send("")사용을 권장합니다.

GET

request.open("GET", "test.aspx?name=test&data=123");
request.send("null");

POST

reqeust.open("POST", "test.aspx");
reqeust.send("name=test&data=123");

착신과 데이터 처리

onreadystatechange
요청이 송신되면 서버로부터 응답이 도착합니다.
onreadystatechange는 요청의 처리 상태를 나타내는 readyState프로퍼티의 값이 바뀔때 발생합니다.("4"가 모든 데이터를 받았다는 상태를 나타냄)

request.onreadystatechange = callbackFunction;
function callbackFunction(){
 if(request.readyState == 4){
  //착신시의 처리
 }
}

request.onreadystatechange = function(){
 if(request.readyState == 4 && request.status == 200){
  //착신시의 처리
 }
}

onload
윈도우판 IE이외의 ajax대응 브라우저에 구현되어 있습니다.
onreadystatechange, readyState상태를 파악할 필요가 없습니다.

request.onload = function(){
  //착신시의 처리
}

데이터(TEXT) : responseText와 responseXML
서버로부터 데이터의 내용을 받아내는 역활을 수행합니다.

"읽어드릴 텍스트"

var msg = request.responseText;

msg 출력 - 읽어드릴 텍스트

<?xml version="1.0" ?>
<lists>
  <msg>hello</msg>
</lists>

var res= request.responseXML;
var msg = res.getElementByTagName("msg");
msg[0].firstChild.nodeValue;

msg 출력 - hello