통신 XMLHttpRequest 제대로 활용하기

1. <form name="nameFrame" accept-charset="utf-8">
       <input type="text" name="name">
       <input type="button" value="이름 입력(GET 방식)" onclick="requestMessage( 'GET', 'get_name_process.jsp')">
       <input type="button" value="이름 입력(POST 방식)" onclick="requestMessage( 'POST', 'get_name_process.jsp')">
   </form>
   <div id="message1"></div>

2. <form name="fileFrame" accept-charset="utf-8">
       <input type="text" name="name">
       <input type="button" value="파일명 입력" onclick="requestFile()">
   </form>
   <div id="message2"></div>

3. <script>
       var httpRequest = (function(){
           var xmlhttp = null;

4. function createRequest() {
       var http = null;
   
       if( window.XMLHttpRequest ){
           http = new XMLHttpRequest();
       } else if( window.ActiveXObject ){
           http = new ActiveXObject("Microsoft.XMLHTTP");      // IE를 위한 코드
       }
       return http;
   }

5. function receiveEvent( propertyFunction, method, callback ) {
       if (xmlhttp.readyState != 4 ){
           if( propertyFunction == "onload") {
               alert("Error!! readyState Code : " + xmlhttp.readyState);
           } else {
               console.log("readyState Code : " + xmlhttp.readyState);
           }
           return;
       }
   
       if( xmlhttp.status == 200) {
           if (method == "HEAD") {
               alert(xmlhttp.getAllResponseHeaders());
               callback( xmlhttp );
           } else {
               callback( xmlhttp );
           }
       }
       else{
           alert( "Error!! status code : " + xmlhttp.status );
       }
   }

6. function requestData( method, url, callback ){
       if( xmlhttp == null ){
           xmlhttp = createRequest();
       }
   
       var urlArray = null;
   
       if( method == "POST") {
           urlArray = url.split("?");
           xmlhttp.open(method, urlArray[0], true);
       } else {
           xmlhttp.open(method, url, true);
       }
   
       if( typeof( xmlhttp.onload ) != "undefined"){
           xmlhttp.onload = function() {
               receiveEvent( "onload", method, callback );
           }
       } else {
           xmlhttp.onreadystatechange = function () {
               receiveEvent( "onreadystatechange", method, callback );
           }
       }
   
       if( method == "POST") {
           xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           xmlhttp.send( urlArray[1] );
       }else{
           xmlhttp.send(null)
       }
   }

7. return function( method, url, callback ){
   requestData( "HEAD", url, function (http) {
   http.responseAttachText = "Flie Len : " + parseInt( http.getResponseHeader("Content-Length"), 10)
   + ", Last Updated Date : " + http.getResponseHeader("Last-Modified")
   + ", Content type : " + http.getResponseHeader("Content-Type");
   requestData( method, url, callback );
   });
   }
   }());

8. function showRequestResult( http ){
       document.getElementById("message1").innerHTML = http.responseText;
   }
   

9. function showFileContents( http ){
       document.getElementById("message2").innerHTML = http.responseAttachText + "</br>" + http.responseText;
   }

10. function requestMessage( method, url ){
        document.getElementById("message1").innerHTML = "";
        param = nameFrame.name.value;
        url = url + "?name=" + encodeURIComponent(param);   // 어떤 시스템에서나 읽을 수 있는 ascii 문자로 변환한
        httpRequest( method, url, showRequestResult );
    }

11. function requestFile(){
        document.getElementById("message2").innerHTML = "";
        fileName = fileFrame.name.value;
        httpRequest( "GET", fileName, showFileContents );
    }

<%@ page contentType="text/plain; charset=utf-8" %>
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
if( request.getMethod().equals("GET"))
    name = new String( name.getBytes("8859_1"), "UTF-8");
%>
Hi!! I like <%=name%>, Thanks for your kindness.