module.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="httpRequest.js"></script>
<script>
function sendOnClick() {
/* sendProcess('GET', 'sample.jsp', 'name=hong&age=20', callback); */
// 파라미터를 JSON 형태로 넘길 수 있다. 그러나 httpRequest.js에 별도 로직을 추가해야 함.
/* let params = {name : 'hong', age : 22};
sendProcess('POST', 'sample.jsp', params, callback); */
let f = document.inputForm;
let n = f.name.value;
let a = f.age.value;
let ad = f.addr.value;
// JSON : JavaScript Object Notation
let params = {name : n, age : a, addr : ad};
sendProcess('POST', 'sample.jsp', params, callback);
}
function callback() {
let msg = '';
switch(httpRequest.readyState) {
case 1 :
msg += 'Loading...\n';
break;
case 2 :
msg += 'Loaded...\n';
break;
case 3 :
msg += 'Interactive...\n';
break;
case 4 :
msg += 'Complete...\n';
// 서버 응답 후 상태코드 확인
if(httpRequest.status == 200) {
msg += '웹서버에서 정상적으로 수행완료...\n';
msg += '실행결과 : ' + httpRequest.responseText + '\n';
} else {
msg += '웹서버에서 오류 발생...\n';
msg += '오류코드 : ' + httpRequest.status + '\n';
msg += '오류내용 : ' + httpRequest.statusText + '\n';
}
break;
}
debugTrace(msg);
}
function debugTrace(msg) {
let debug = document.getElementById("debug");
debug.value += msg;
}
</script>
</head>
<body>
<h2>XMLHttpRequest 모듈을 이용한 예제</h2>
<br>
<form name="inputForm">
<textarea rows="10" cols="80" id="debug"></textarea><br>
이름 : <input type="text" name="name"><br>
나이 : <input type="text" name="age"><br>
주소 : <input type="text" name="addr"><br>
<input type="button" value="서버에 자료전송" onclick="sendOnClick()" >
</form>
</body>
</html>httpRequest.js
/**
* Ajax와 관련된 함수 집합
*/
let httpRequest = null;
function getXMLHttpRequest() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function sendProcess(method, url, params, callback) {
// 1. request 객체 생성
httpRequest = getXMLHttpRequest();
// 2. callback 함수 정의
httpRequest.onreadystatechange = callback;
// method 초기값 설정
let httpMethod = method.toUpperCase();
if(httpMethod != 'GET' && httpMethod != 'POST')
httpMethod = 'GET';
// parameter 설정 : json 형태로 넘어 올 수 있으니, httpParams 라는 변수를 별도로 만든다.
httpParams = params;
if(params == null || params == '')
httpParams = '';
if(typeof(httpParams) == 'object'){
// json 형태로 들어올 경우, 파라미터를 초기화하고, name=value 형태로 변환한다.
// json to 'name=value&name=value'
httpParams = '';
for(let key in params){
if(httpParams != '')
httpParams += '&'
httpParams += key + "=" + encodeURIComponent(params[key]);
console.log(httpParams);
}
}
// 3. 메소드에 맞게 초기화하여 전송
httpUrl = url;
if(httpMethod == 'GET' && httpParams != ''){
httpUrl = url + '?' + httpParams;
}
httpRequest.open(httpMethod, httpUrl, true);
if(httpMethod == 'POST'){
httpRequest.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
}
// 3항 연산자 활용하여 전송
httpRequest.send(httpMethod == 'GET' ? null : httpParams);
}
sample.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
if(request.getMethod().equals("POST"))
request.setCharacterEncoding("utf-8");
%>
안녕하세요 ${ param.name } 회원님
회원님이 입력하신 내용은
이름 : ${ param.name }
나이 : ${ param.age }
주소 : ${ param.addr }
입니다.'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 태그 내에 value 값 넣기 VS 태그 사이에 TEXT, HTML 넣기 (0) | 2020.07.28 |
|---|---|
| [JS] JSON 파싱 예제 (0) | 2020.07.27 |
| [JS] AJAX 예제(작동 순서) (0) | 2020.07.27 |
| [JS] 변수 = 함수명 VS 변수 = 함수명() (0) | 2020.07.24 |
| [JS] AJAX란? (0) | 2020.07.24 |
