<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div#view{
width: 500px;
height: 100px;
border-radius: 10px;
border: 1px solid black;
}
.java{
width: 100%;
height: 100%;
background-color: lightsteelblue;
color: white;
font-size: 3em;
}
.ms{
width: 100%;
height: 100%;
background-color: red;
color: yellow;
font-size: 3em;
}
</style>
<script type="text/javascript">
var xhr; // XMLHttpRequest 객체의 변수
// XMLHttpRequest 객체는 브라우저가 가지고 있다.
function exe(obj){ // obj는 select
var str = obj.value;
// 1) 브라우저를 구별하여 xhr 객체를 구한다.
if(window.ActiveXObject){ // IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr = new XMLHttpRequest();
}
// 2) 도착함수 지정
xhr.onreadystatechange = res;
// 3) 파라미터 값 설정
var param = "v1="+str;
// 4) 요청정보 지정
xhr.open("get", "test1.jsp?"+param, true);
// 요청방식, 누구랑통신?, 비동기 ? true : false
// 5) 헤더값 설정
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 6) 서버 요청
xhr.send(null); // get방식은 이곳에 null을 넣어야 한다.
}
function res(){
// readyStatus - XMLHTTPRequest 객체의 상태가 변할 때 각 상태값을 반환한다.
// 0 = uninitialized
// 1 = loading
// 2 = loaded
// 3 = interactive
// 4 = complete
// status - HTTP 응답코드를 반환한다. 성공일 경우 200
if(xhr.readyState == 4 && xhr.status == 200){
// 현재 문서에서 id가 view인 객체를 검색한다.
var v = document.getElementById("view");
v.innerHTML = xhr.responseText; // 응답된 문자 받기
}
}
</script>
</head>
<body>
<select onchange="exe(this)"> <!-- 여기서 this는 select -->
<option value="java">자바</option>
<option value="ms">마이크로소프트</option>
</select>
<div id="view">
<!-- 서버로부터 전달된 응답 내용이 표현될 곳! -->
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String str = request.getParameter("v1");
// str의 값이 java이면 "OCJP, OCJD, OCWCD"
// str의 값이 ms이면 "MCSE, MCSD, MCAD"
String cls = "java";
if(str.equalsIgnoreCase("ms"))
cls = "ms";
%>
<div class="<%= cls %>">
<%
if(cls.equals("java"))
out.println("OCJP, OCJD, OCWCD");
else
out.println("MCSE, MCSD, MCAD");
%>
</div>
- ajax_ex2.html 이라고 되어 있지만 결과는 같다.
