[javascript] XMLHttpRequest() 객체

httpRequest = getXMLHttpRequest();
httpRequest.open("get"."/master.txt",true);
httpRequest.send(null);

open() 함수

1. 첫번째 인자

Http 메서드를 지정한다

2. 두번째 인자

접속할 URL을 입력한다. 웹브라우저의 보안상 이유로 접속할 URL은
현재페이지와 같은 도메인에 있어야 한다

3. 세번째 인자

true= 비동기방식 false=동기방식



GET 방식 전달

httpRequest = getXMLHttpRequest();
httpRequest.open("get"."/master.jsp?id=woo&pw=1234",true);
httpRequest.send(null);

POST 방식 전달

httpRequest = getXMLHttpRequest();
httpRequest.open("post"."/master.txt",true);
httpRequest.send("id=woo&pw=1234");


서버 응답 처리하기 : onreadystatechange 프로퍼티와 콜백 함수

httpRequest = getXMLHttpRequest();

httpRequest.onreadystatechange = callbackFunction;

httpRequest.open("get"."/master.txt",true);
httpRequest.send(null);


function callbackFunction(){

//서버에서 응답이 왔을때 알맞은 처리

}


XMLHttpRequest 객체의 상태 : readyState

onreadystatechange 에서 명시한 콜백 함수는 readyState 라는 프로퍼티의 값이 변경될때마다 호출된다

값	의미	설명
0	UNINITIALIZED	객체만 생성되고 아직 초기화 되지 않은 상태(open() 메서드가 호출되지 않음)
1	LOADING	open메서드가 호출되고 아직 send 메서드가 호출 되지 않은 상태
2	LOADED	send 는 호출 states와 header는 도착하지 않은상태
3	INTERACTIVE	데이터의 일부만 받은 상태
4	COMPLETED	데이터를 전부 받은 상태

서버로부터의 응답 상태 : status/statusText

값	텍스트	요청
200	ok	요청 성공
403	Forbidden	접근 거부
404	Not Found	페이지 없음
500	Internal Server Error	서버 오류 발생

응답 데이터 사용하기 : responseText

서버로부터 응답이 도착한 것을 확인하고 (readyState 프로퍼티 값이 4 이고)
서버가 요청을  올바르게 수행했다면(status 프로퍼티 값이 200이면)
이제 남은 작업은 서버가 전송한 데이터를 사용하는 것이다

웹서버는 단순 텍스트 또는 XML 로 데이터를 전송 시킨다.

function callbackFunction(){

if(httpRequest.readyState==4){

if(httpRequest.status==200){

var txt=httpRequest.responseText;
//txt를 사용해서 알맞은 작업 수행

}

}

}



euc-kr로 구현된 코드의 실행 결과를 utf-8 로 출력해야 될 경우

<%@ page contextType="text/html; charset="utf-8" %>
<%@ page pageEncoding="euc-kr" %>
//내용은 euc-kr 캐릭터셋으로 작성

파라미터의 한글 처리 방법

XMLHttpRequest 객체가 웹서버에 전송하는 요청파라미터의 경우에는 반드시
UTF-8 로 인코딩해서 전송

자바스크립트는 문자열을 UTF-8 로 인코딩해주는 encodeURIComponent() 함수를 제공

var params="name="+encodeURIComponent("한글");
httpRequest.open("GET","welcome.jsp?"+params,true);

jsp 같은 웹서버프로그램은 UTF-8 로 디코딩하여 파라미터 값을 읽어 와야한다

<%

request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");

%>