var xhr = null;
// 브라우저를 구별하여 xhr 객체를 생성하는 함수
function getRequest(){
if(window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else
xhr = new XMLHttpRequest();
}
// 사용자가 서버를 호출할 때 사용하는 함수
function sendRequest(url, param, callback, method, async){
// ( 요청경로, 인자, 도착함수, 전송방식, 비동기식여부 )
getRequest();
// 전송방식 문자열을 받아서 소문자로 변경 후 "get"과 비교한다.
// 만약! "get"이면 "GET"으로 변경하고, 아니면 "POST"로 변경
method = (method.toLowerCase() == "get") ? "GET":"POST";
// 요청방식에 따라 파라미터의 URL이 달라진다.
// 예를 들면 get방식일 때는 URL이 "test.jsp?v1=java"
// post방식일 때는 "test.jsp"
param = (param == null || param == "") ? null : param;
if(method == "GET" && param != null){
url = url + "?" + param;
}
xhr.onreadystatechange = callback; // 서버의 응답이 도착하는 함수지정
xhr.open(method, url, async); // 요청정보 지정
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 서버 요청 보내기
xhr.send( (method == "POST") ? param : null);
}
<!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" src="js/httpRequest.js"></script>
<script type="text/javascript">
function exe(obj){ // obj는 select
var str = obj.value;
var param = "v1="+str;
sendRequest("test1.jsp", param, res, "post", true);
}
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>
<script type="text/javascript">
</script>
<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>
