dynamicTest.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Dynamic Javascript Test </TITLE>
</HEAD>
<script type="text/javascript">
function myfunc(msg) {
alert(msg);
}
</script>
<BODY>
<script type="text/javascript" src="http://localhost/DS.jsp?callback=myfunc"></script>
</BODY>
</HTML>
자바스크립트 소스를 요청하는 URL을 보면 JSP를 실행하도록 되어 있으며 서버측에서는 전달된 파라미터를 통해 클라이언트에 위치한 자바스크립트 함수의 이름을 알 수 있으므로 서버측에서는 해당 함수를 호출하는 자바스크립트 코드를 동적으로 생성하여 응답할 수 있는 것이다. script 태그의 src 속성에 지정한 URL을 이용해서도 정상적인 요청이 전달된다는 것을 인식할 필요가 있다.
DS.jsp (클라이언트 측 함수 이름을 받아서 해당 함수를 호출하는 자바스크립트를 전송해준다)
<%
String callbackName = request.getParameter("callback");
%>
<%=callbackName%>("This message is sent from server");
위와같이 하면 서버측에서 클라이언트 측의 자바스크립트 함수를 호출한 것과 같은 효과를 낼 수 있다.
여기에서 한가지 확인되는 것은
[ script 태그의 src 속성을 이용하여 요청을 하면 웹브라우저에서 응답을 수신해도 브라우저 화면이 변경되지 않는다는 것이다]
당연한 일이겠지만 수신된 것은 자바스크립트 코드이지 화면에 출력할 HTML이 아니므로 클라이언트 측에 수신된 스크립트는 호출될 경우에만 실행될 뿐이다.
이 원리를 확인해 볼 목적으로 링크를 클릭해서 요청할 때도 script 태그에서 src 속성에 요청 URL을 적용해본다.
client.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>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Dynamic Script Test</title>
<script>
function clientFunc(response){
alert(response);
}
/* 이용자가 링크를 클릭하여 요청하면 이 함수가 실행되고 script 태그를 동적으로 생성하고 src속성에 URL을 지정하면 정상적인 요청을 서버로 전달할 수 있다. 서버의 응답내용은 자바스크립트이기 때문에 화면의 변경은 없고 응답으로 수신된 자바스크립트가 호출될 때만 실행된다*/
function myRequest(){
alert("Request start");
scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", "DS.jsp?callback=clientFunc");
document.getElementsByTagName("body")[0].appendChild(scriptTag);
}
</script>
</head>
<body>
<center>
<a href="javascript:myRequest()">Request</a>
</center>
</body>
</html>
DS.jsp
pageEncoding="EUC-KR"%>
<%
String callbackName = request.getParameter("callback");
%>
<%=callbackName%>("This is a server response");
<script>태그 전체를 동적으로 생성하지 않고 기존 script태그의 src속성 값만 동적으로 변경해도 전혀 문제없이 실행되는 것을 확인할 수 있다. 아래를 참고하세요.
<%@ 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>Dynamic Script Test</title>
<script id="s1" type="text/javascript"></script>
<script>
function clientFunc(response){
alert(response);
}
/* 이용자가 링크를 클릭하여 요청하면 이 함수가 실행되고 기존 script 태그의 src속성에 URL을 지정하면 위와 동일한 효과를 확인할 수 있다. */
function myRequest(){
document.getElementById("s1").setAttribute("src","http://localhost/TestWeb/dsServer.jsp?callback=clientFunc")
}
</script>
</head>
<body>
<center>
<a href="javascript:myRequest()">Request</a>
</center>
</body>
</html>