JSON(JavaScript Object Notation)을 활용하여 데이터를 출력해보자.
아래에 보이는 형태의 JSON 파일이 있다고 하면,
JSON.parse(해당파일) 또는 eval(해당파일)을 사용하면 된다.
그러나, key 값에 싱글쿼테이션이 없다면 JSON.parse() 형태로는 사용할 수 없다.
(보통의 JSON 파일은 다 싱글쿼테이션이 있음)
아래는 eval을 통해 JSON을 파싱하고, 반복문을 통해 데이터를 출력하는 예제다.
sample.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
[
{
id : 'hong',
name : '홍길동'
}, {
id : 'park',
name : '박길동'
}, {
id : 'kim',
name : '김기리보이'
}
]
jsonData.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', null, callback)
}
function callback(){
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
// console.log(httpRequest.responseText)
let data = httpRequest.responseText;
let memberList = eval(data);
let msg = '회원수: ' + memberList.length +'명\n';
for(let i = 0; i < memberList.length; i++){
let mem = memberList[i];
let id = mem.id;
let name = mem.name;
msg += id + '(' + name + ')\n';
}
debugTrace(msg);
}
}
}
function debugTrace(msg){
let debug = document.getElementById("debug");
debug.value += msg;
}
</script>
</head>
<body>
<h2>JSON DATA 예제 파일</h2>
<br>
<textarea rows="10" cols="80" id="debug"></textarea><br>
<input type ="button" value = "서버에 자료 요청" onclick ="sendOnClick()">
</body>
</html>
httpReqeust.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);
}
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 인용부호가 요구됩니다. (2) | 2020.09.23 |
|---|---|
| [JS] 태그 내에 value 값 넣기 VS 태그 사이에 TEXT, HTML 넣기 (0) | 2020.07.28 |
| [AJAX] XMLHttpRequest 모듈을 이용한 예제 (0) | 2020.07.27 |
| [JS] AJAX 예제(작동 순서) (0) | 2020.07.27 |
| [JS] 변수 = 함수명 VS 변수 = 함수명() (0) | 2020.07.24 |
