출처 : http://ggoreb.tistory.com/122
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>
[클릭 전]
[클릭 후]
'Stupid Computer > 4. JavaScript' 카테고리의 다른 글
| [자바스크립트] Cordova 란 ? (0) | 2014.03.20 |
|---|---|
| [자바스크립트] 화면, 페이지 전환! 페이지 돌아오기 ! (0) | 2014.03.20 |
| [자바스크립트]div태그와 span태그 비교/ innerHTML예제 (0) | 2014.03.20 |
| [자바스크립트] \n, <br>   줄바꾸기 정리 ! (0) | 2014.03.20 |
| [자바스크립트] 한글 깨짐현상 고치기~ js파일 내에서 한글 사용~ (0) | 2014.03.20 |
| [자바스크립트] Eclipse javascript 자동완성 플러그인 JSDT 설치 ~ (0) | 2014.03.18 |
| [자바스크립트] 함수의 정의 및 호출 ( 마우스 클릭, 오버 이벤트) (0) | 2014.03.18 |
| [자바스크립트] Eclipse Javascript Code Assist 가 되지 않을때~ (0) | 2014.03.18 |
| [자바스크립트] 객체와 반복문 for in 키워드 사용 (0) | 2014.03.18 |
| [자바스크립트] eval() 함수 사용법, 코드 실행 함수 (0) | 2014.03.18 |