< JSON >
- 서로 다른 프로그래밍 언어간의 데이터 통신을 위한 표기법
(읽고 쓰기 쉬운 표현법)
- 경량의 데이터를 교환하는 방식으로 인터넷에서 데이터를 주고받을때 표현하는 방법
- name/value 형태의 한쌍으로 표현된다.
예제1>
1) 호출 HTML
2) 데이터 JSP
[[ test01.html ]]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="../js/ajaxutil.js"></script>
<script type="text/javascript">
var xhr=null;
function getData(){
xhr=getXHR();
xhr.onreadystatechange=callback;
xhr.open("get","server1.jsp",true);
xhr.send(null);
}
function callback(){
if(xhr.readyState==4 && xhr.status==200){
//json으로 응답이 오면 responseText로 얻어온다.
var txt = xhr.responseText;//xml형태가 아니므로
//txt={"id":"song","pwd":"1234"}
//전송받은 txt를 json타입으로 변환하기.
var json=eval("(" + txt + ")");
//결과를 출력할 div참조값 얻어오기.
var result=document.getElementById("result");
result.innerHTML = json.id + "," + json.pwd;
}
}
</script>
</head>
<body>
<input type="button" value="서버에서 값받아오기" onclick="getData()"/>
<div id="result">
</div>
</body>
</html>
[[ server1.jsp ]]
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
{"id":"song","pwd":"1234"}
실행하면 server1.jsp에 있는 id,pwd값을 가져와 보여준다.
예제2>
- JSON 배열 예제
[[ server2.jsp ]]
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
{"list":[{"id":"song","pwd":"1234"},
{"id":"park","pwd":"5678"},
{"id":"lee","pwd":"1111"}
]}
--> 배열 형식 {"":[{...}] }
[[ test02.html ]]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="../js/ajaxutil.js"></script>
<script type="text/javascript">
var xhr=null;
function getData(){
xhr=getXHR();
xhr.onreadystatechange=getList;
xhr.open("get","server2.jsp",true);
xhr.send(null);
}
function getList(){
if(xhr.readyState==4 && xhr.status==200){
var str=xhr.responseText;
var data=eval('('+str+')');
//alert(data);
/-
var data = {"list":[{"id":"song","pwd":"1234"},
{"id":"park","pwd":"5678"},
{"id":"lee","pwd":"1111"}]};
data.list[0].id
*-
var str="";
for(var i=0;i<data.list.length;i++){
str = str + data.list[i].id + "," + data.list[i].pwd + "<br/>";
}
//전송받은 데이터를 div에 넣기
document.getElementById("result").innerHTML=str;
}
}
</script>
</head>
<body>
<input type="button" value="서버로 부터 데이터 받기" onclick="getData()">
<div id="result">
</div>
</body>
</html>
'WEB > Ajax Json' 카테고리의 다른 글
| AJAX #07 JSON (0) | 2013.05.04 |
|---|---|
| AJAX #06 JSON 관련 jar, javascript파일 (0) | 2013.05.04 |
| AJAX #04 댓글 달기 예제 (1) | 2013.05.04 |
| AJAX #03 XML 태그를 만들어 호출한 곳으로 전송하는 예제 (0) | 2013.05.04 |
| AJAX #02 xml파일을 읽어서 화면에 표시하는 예제 (0) | 2013.05.04 |