[내가 만든 프로젝트 코드 분석 | JSP게시판에 Ajax추가하기] 4. Ajax를 이용해서 서블릿과 통신하기

<div class="container">
   <div class="form-group row pull-right">
      <div class="col-xs-8">
         <input class="form-control" id="userName" onkeyup="searchFunction()" type="text" size="20"> // 입력할 때마다 반응하도록 입력 값 관리
      </div>
      <div class="col-xs-2">
          <button class="btn btn-primary" onclick="searchFunction();" type="button">검색</button> // 버튼 클릭시 조회메서드 실행
      </div>
   </div>
   <table class="table" style="text-align: center; border: 1px solid #dddddd">
      <thead>
         <tr>
            <th style="background-color: #fafafa; text-align: center;">이름</th>
            <th style="background-color: #fafafa; text-align: center;">성별</th>
            <th style="background-color: #fafafa; text-align: center;">이메일</th>
         </tr>
       </thead>
	     <tbody id="ajaxTable"> // JS처리를 위한 id 지정
       </tbody>
    </table>
 </div>

<script type="text/javascript">
        var request = new XMLHttpRequest(); // 웹사이트에 요청
        function searchFunction() {
            request.open("POST", "./UserSearchServlet?userName=" + encodeURIComponent(document.getElementById("userName").value), true);//입력된 값 인코딩 후 파라미터 
            request.onreadystatechange = searchProcess;// JSON값 조회요청
            request.send(null);
        }
        function searchProcess() { // 조회기능 구현
            var table = document.getElementById("ajaxTable"); // tbody부분 구현
            table.innerHTML = ""; // 내용 삭제 초기화
            if (request.readyState == 4 && request.status == 200) { // 통신여부확인
                var object = eval('(' + request.responseText + ')');
                var result = object.result; 
                for (var i = 0; i < result.length; i++) { // 하나의 행 생성
                    var row = table.insertRow(0);
                    for (var j = 0; j < result[i].length; j++) { // 배열의 값 탐색
                        var cell = row.insertCell(j);
                        cell.innerHTML = result[i][j].value;
                    }
                }
            }
        }
       	window.onload = function() { // 미입력상태에서도 출력
       		searchFunction();
       	}
    </script>