티스토리 뷰

프로그래밍/Front (HTML, CSS, JS)

[Ajax] XMLHttpRequest 객체 사용(responseText)

꼬렙 2011. 9. 23. 15:13
728x90
Ajax를 사용하려면 가장 먼저 기본적으로 XHR(XMLHttpRequest) 객체를 구현해주어야 한다

익스플로러에서 ActiveX Component 형식으로 구현되었고 이 밖에 다른 브라우저들은 native javascript 객체로 구현되었다

따라서 초기화(?) 코드는 아래와 같다 

[XHR 객체 생성]
var xmlHttp;

function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}


[실제 동작 함수]
function test() {
createXMLHttpRequest();
var url = "불러올 파일 또는 URL";
xmlHttp.onreadystatechange = "CallBack함수";
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}


[CallBack 함수]

function loader() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
temp = xmlHttp.responseText;
alert(temp);
}
}
}


1. 버튼 등을 이용해서 test() 함수 실행
2. XHR 객체 생성
3. GET / 비동기 방식으로 서버 요청
4. 서버가 해당 내용을 찾아서 String 형식으로 반환
5. CallBack 함수를 이용해서 결과 출력
    - readState == 4 이고 status == 200 일때만..



위 내용으로 아주 간단한 예제를 만들면 대충 이렇다

1. test.jsp 에서 버튼 클릭
2. loader.jsp 내용 읽음
3. test.jsp의 content 라는 <div> 영역에만 읽은 내용 출력

[test.jsp]
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Test</title>
<script language="JavaScript">
var xmlHttp;
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function test() {
createXMLHttpRequest();
var url = "loader.jsp";
xmlHttp.onreadystatechange = loader;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function loader() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
temp = xmlHttp.responseText;
document.getElementById("content").innerHTML = temp;
}
}
}
</script>
</head>

<body>
요 밑으로 글자 바뀜<br />
<div id="content">
요기?
</div>
<input type="button" value="바꾸기" onClick="test()" />
</body>

</html>


[loader.jsp]
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Insert title here</title>
</head>

<body>
<%
out.println("꺼져");
%>
</body>

</html> 


[클릭 전]



[클릭 후]





'프로그래밍 > Front (HTML, CSS, JS)' 카테고리의 다른 글

[JQuery] JQuery Selector  (0) 2011.09.26
[Ajax] XMLHttpRequest 객체 사용(responseXML)  (3) 2011.09.23
[HTML] 접속시 임의로 지정한 페이지로 바로 보내고 싶을때  (0) 2011.09.12
[JavaScript] 공백 제거  (0) 2011.09.07
[JavaScript] 자료형  (0) 2011.09.03