-
XMLHttpRequest 객체를 이용한 통신을 하기위해 따로 모듈화하여 코드의 중복을 줄였습니다.
-
xhr객체를 생성하고 요청을 처리하는 모듈화 된 xhr.js 파일
var xhr=null; // XMLHttpRequest 객체 생성. function createXHR(){ if(window.XMLHttpRequest){ return new XMLHttpRequest; }else{ return new ActiveXObject("Microsoft.XMLHTTP"); } } // 요청할 메서드와, URL, 요청파라미터와 결과를 화면에 뿌려줄 callback함수를 // 파라미터로 받는 함수를 작성해줬습니다. function sendRequest(method, url, params, callback){ var httpMethod = method.toUpperCase(); var httpUrl = url; var httpParams = (params==null || params=="") ? null:params; if (httpMethod == "GET" && httpParams != null){ //GET 방식일때 url += "?" + httpParams; } xhr = createXHR(); //XMLHttpRequest 객체 생성. xhr.open(httpMethod, httpUrl, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // GET일때는 실행 안됨, POST만 실행 xhr.send(httpMethod=="POST" ? httpParams : null); //GET이면 null, POST면 파라미터 갖음 xhr.onreadystatechange = callback(); }원하는 요청을 받아 처리해주고 콜백함수를 호출하는 함수를 구현하였습니다.
이 sendRequest() 메서드로 다양한 요청에 응답할 수 있습니다.
-
모듈화 된 xhr.js를 이용하기
-
부서명에 따라서 사원의 테이블을 화면에 출력해 주는 AJAX를 구현해봅니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <c:set var="root" value="${pageContext.request.contextPath}"/> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="${root}/xhr/xhr.js"></script> <script type="text/javascript" src="${root}/javascript/sawon/sawon.js"></script> </head> <body> <form id="sawonForm"> <select name="departmentName" onchange="toServer('${root}')"> <option>부서 선택하세요.</option> <option value="Marketing">Marketing</option> <option value="IT">IT</option> <option value="Sales">Sales</option> </select> </form> <div id="resultDisp"></div> </body> </html>부서명을 선택하여 요청할 데이터를 보낼 페이지입니다. 여기서 xhr.js 과 sawon.js를 명시합니다.
-
받아온 데이터를 처리해 줄 자바스크립트 sawon.js
function toServer(root){ var departmentName = document.getElementById("sawonForm").departmentName.value; if(departmentName != "부서 선택하세요."){ url = root + "/sawon/listOk.do"; params = "departmentName=" + departmentName; sendRequest("POST", url, params, resultProcess) } } function resultProcess(){ if (xhr.readyState==4 && xhr.status==200){ arr.push(xhr.responseText); var resultDisp = document.getElementById("resultDisp"); resultDisp.innerHTML = xhr.responseText; } }요청할 URL과 파라미터를 가지고 sendRequest() 메서드에게 전달해줍니다. 그러면 xhr.js에 있는 sendRequest() 메서드가 XMLHttpRequest 객체를 이용하여 비동기식으로 통신할겁니다. 서버에서 받아온 데이터는 resultProcess() 메서드에 의해 처리 됩니다.
-
서버에서 응답된 데이터
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <table board="1"> <tr> <td align="center" bgcolor="#DEDEDE" width="100">사번</td> <td align="center" bgcolor="#DEDEDE" width="100">이름</td> <td align="center" bgcolor="#DEDEDE" width="100">입사년도</td> <td align="center" bgcolor="#DEDEDE" width="100">직군</td> <td align="center" bgcolor="#DEDEDE" width="100">부서번호</td> <td align="center" bgcolor="#DEDEDE" width="100">부서명</td> </tr> <tr> <td width="100" align="center">201</td> <td width="100" align="center">Michael</td> <td width="100" align="center"> 2004-02-17 </td> <td width="100" align="center">MK_MAN</td> <td width="100" align="center">20</td> <td width="100" align="center">Marketing</td> </tr> <tr> <td width="100" align="center">202</td> <td width="100" align="center">Pat</td> <td width="100" align="center"> 2005-08-17 </td> <td width="100" align="center">MK_REP</td> <td width="100" align="center">20</td> <td width="100" align="center">Marketing</td> </tr> </table> </body> </html>서버에서 응답된 데이터입니다. 이번 예제에선 JSP 파일이 응답됬지만 AJAX의 응답데이터는 거의 JSON이거나 XML 형태로 응답되는게 대부분입니다.
-
결과 화면
'WEB > JavaScript' 카테고리의 다른 글
| XMLHttpRequest 객체를 이용한 AJAX 통신 (0) | 2020.07.15 |
|---|
