Sending Data to the Server using JSON
객체 표현
{ String: value}
예를 들면 다음과 같이 기록 된다.
백문이 불여일견이고, 백견이 불여일타인지라..직접 해보자.
우선 JSON의 json.js라이브러리를 얻어서 포함하자.
---------------------------------------------------------
jsonExample.html
---------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSON Example</title>
JSON을 이용해서 Car라는 Object를 JSON으로 변환했다.
이것을 서버 측에서 이용하려면 우선 Servlet코드가 필요하고, Java로 구현된 JSON 라이브러리가 필요하다.
뭐..JSON사이트에 있으니..어렵지 않다.
---------------------------------------------------------
JSONExample.java
---------------------------------------------------------
import java.io.*;
import java.net.*;
import java.text.ParseException;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONObject;
문자열을 결합해서 XML을 만드는 것은 그다지 유연한 방법이 아니다.
이러한 방식의 대안중 하나가 JSON이다. www.json.org
이러한 방식의 대안중 하나가 JSON이다. www.json.org
C,C#,Java Script, Java등의 거의 모든 언어로 구현되어 있는 라이브러리이다.
name/value로 구성되어 있는 Collection 처리 기능
array와 같은 Ordered list의 기능
array와 같은 Ordered list의 기능
JSON은 name/value쌍의 순서없는 집합객체이다.
(A JSON object is an unordered set of name/value pairs)
(A JSON object is an unordered set of name/value pairs)
{로 시작해서 }로 끝난다. colon은 name/value쌍을 분리하기 위해서 사용
객체 표현
{ String: value}
배열 표현
[ value ]
[ value ]
Value
예를 들면 다음과 같이 기록 된다.
var employee = {
"firstName" : John
, "lastName" : Doe
, "employeeNumber" : 123
, "title" : "Accountant"
}var employee = {
"firstName" : John
, "lastName" : Doe
, "employeeNumber" : 123
, "title" : "Accountant"
}
"firstName" : John
, "lastName" : Doe
, "employeeNumber" : 123
, "title" : "Accountant"
}var employee = {
"firstName" : John
, "lastName" : Doe
, "employeeNumber" : 123
, "title" : "Accountant"
}
값을 추출하려면 다음과 같이 사용한다.
var lastName = employee.lastName;
<employee>
<firstName>John</firstName>
<lastName>Doe</lastName>
<employeeNumber>123</employeeNumber>
<title>Accountant</title>
</employee>
<firstName>John</firstName>
<lastName>Doe</lastName>
<employeeNumber>123</employeeNumber>
<title>Accountant</title>
</employee>
백문이 불여일견이고, 백견이 불여일타인지라..직접 해보자.
우선 JSON의 json.js라이브러리를 얻어서 포함하자.
---------------------------------------------------------
jsonExample.html
---------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSON Example</title>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doJSON() {
var car = getCarObject();
//Use the JSON JavaScript library to stringify the Car object
var carAsJSON = JSON.stringify(car);
alert("Car object as JSON:\n " + carAsJSON);
var url = "JSONExample?timeStamp=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(carAsJSON);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
parseResults();
}
}
}
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doJSON() {
var car = getCarObject();
//Use the JSON JavaScript library to stringify the Car object
var carAsJSON = JSON.stringify(car);
alert("Car object as JSON:\n " + carAsJSON);
var url = "JSONExample?timeStamp=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(carAsJSON);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
parseResults();
}
}
}
function parseResults() {
var responseDiv = document.getElementById("serverResponse");
if(responseDiv.hasChildNodes()) {
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
var responseDiv = document.getElementById("serverResponse");
if(responseDiv.hasChildNodes()) {
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
function getCarObject() {
return new Car("Dodge", "Coronet R/T", 1968, "yellow");
}
return new Car("Dodge", "Coronet R/T", 1968, "yellow");
}
function Car(make, model, year, color) {
this.make = make;
this.model = model;
this.year = year;
this.color = color;
}
this.make = make;
this.model = model;
this.year = year;
this.color = color;
}
</script>
</head>
</head>
<body>
<br/><br/>
<form action="#">
<input type="button" value="Click here to send JSON data to the server"
omclick="doJSON();"/>
</form>
<h2>Server Response:</h2>
<form action="#">
<input type="button" value="Click here to send JSON data to the server"
omclick="doJSON();"/>
</form>
<h2>Server Response:</h2>
<div id="serverResponse"></div>
</body>
</html>
</html>
JSON을 이용해서 Car라는 Object를 JSON으로 변환했다.
이것을 서버 측에서 이용하려면 우선 Servlet코드가 필요하고, Java로 구현된 JSON 라이브러리가 필요하다.
뭐..JSON사이트에 있으니..어렵지 않다.
---------------------------------------------------------
JSONExample.java
---------------------------------------------------------
import java.io.*;
import java.net.*;
import java.text.ParseException;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONObject;
public class JSONExample extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String json = readJSONStringFromRequestBody(request);
//Use the JSON-Java binding library to create a JSON object in Java
JSONObject jsonObject = null;
try {
jsonObject = new JSONObject(json);
}
catch(ParseException pe) {
System.out.println("ParseException: " + pe.toString());
}
String responseText = "You have a " + jsonObject.getInt("year") + " "
+ jsonObject.getString("make") + " " + jsonObject.getString("model")
+ " " + " that is " + jsonObject.getString("color") + " in color.";
response.setContentType("text/xml");
response.getWriter().print(responseText);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String json = readJSONStringFromRequestBody(request);
//Use the JSON-Java binding library to create a JSON object in Java
JSONObject jsonObject = null;
try {
jsonObject = new JSONObject(json);
}
catch(ParseException pe) {
System.out.println("ParseException: " + pe.toString());
}
String responseText = "You have a " + jsonObject.getInt("year") + " "
+ jsonObject.getString("make") + " " + jsonObject.getString("model")
+ " " + " that is " + jsonObject.getString("color") + " in color.";
response.setContentType("text/xml");
response.getWriter().print(responseText);
}
private String readJSONStringFromRequestBody(HttpServletRequest request){
StringBuffer json = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while((line = reader.readLine()) != null) {
json.append(line);
}
}
catch(Exception e) {
System.out.println("Error reading JSON string: " + e.toString());
}
return json.toString();
}
}
StringBuffer json = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while((line = reader.readLine()) != null) {
json.append(line);
}
}
catch(Exception e) {
System.out.println("Error reading JSON string: " + e.toString());
}
return json.toString();
}
}
음..현재까지 JSON의 소스를 보고 판단되는 건 일종의 데이터 파서이고, 이걸 범용적으로
만들어 둔 것일 뿐 굳이 사용할 필요에 대해서는 의문이다. 필요한 경우에는 자신이 직접 만드는게
나을 지도...뭐..있으니 편하기는 하지만 서두..
만들어 둔 것일 뿐 굳이 사용할 필요에 대해서는 의문이다. 필요한 경우에는 자신이 직접 만드는게
나을 지도...뭐..있으니 편하기는 하지만 서두..
JSON으로 위의 예제의 Car객체를 파싱하면 다음과 같은 결과가 나온다.
{"make":"Dodge","model":"Coronet R/T","year":1968,"color":"yellow"}
덧글
동이 2008/08/20 17:34 # 삭제 답글
좋은글 감사합니다...많이 도움이 되었습니다 ㅎㅎ