자바스크립트에서 JSON 생성 후 JSP에서 파싱

서버에서 많은 자료를 받을때는 xml을 사용하거나 JSON을 사용한다.

그러나!! 클라이언트에서 서버로 여러 데이터를 넘길때는 어떻게 할까??

name : 조   price : 5000   etc :  aa

           김             7000           bb

           박             4000           cc

 대충 이런 자료를 보낸다고 할때

 

1. 쿼리로 GET 메소드로 넘겨준다..

2. POST 메소드로 넘겨준다.

3. JSON 객체를 넘겨준다.

 

당근 3번이겠지 ㅋㅋ

1,2 번은 안되는 방법은 아니다 하지만.

저걸 쿼리로 넘긴다는 여간짜증나는 일이 아니다 ..쿼리도 길어지고.

그래서 JSON으로 넘긴다.

 

JSON도 문자셋을 되어있기 때문에 형식에 맞게 문자형태로 써야한다.

하지만 그걸 쉽게 하기위해서 JSON홈페이지에서 자바스크립트 라이브러리를 제공한다.

자바스크립트 뿐만이아니고 자바나 씨, PHP, 여러가지가 있다.

http://www.json.org/

여기서 json2.js를 다운받고 페이지에 링크걸어주고 사용만 하면된다.

 

 ==================  javascript ================

 

function getRegObject(name, price, etc) {
    return new reg(name, price, etc);
}   // 객체로 리턴한다.

 

function reg(name, price, etc) {
    this.name = name;
    this.price = price;
    this.etc = etc;  
}

 

function dataProc(){
 var len = 0;
 xmlHttp = getRequest();
 
 var info = new Array();
 for(var i=1; i<7; i++){
  var nameEl = document.getElementById("name"+i);
  var priceEl = document.getElementById("price"+i);
  var etcEl = document.getElementById("etc"+i);
  if((nameEl.value != "") && (priceEl.value != "")){   
      info[len] = getRegObject(nameEl.value, priceEl.value, etcEl.value);
      len++;
      nameEl.value = "";
      priceEl.value = "";
      etcEl.Value = "";
  }  
 }
    //Use the JSON JavaScript library to stringify the Car object
    var infoJSON = JSON.stringify(info);
  
 xmlHttp.open("POST", "dataProc.jsp", true);
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
    xmlHttp.send(infoJSON);   
}

 

빨간색 코드가 중요한 부분이다~

이벤트를 주면 dataProc()함수가 최초로 호출되고 요청객체를 만들고

빈곳이 아닌 텍스트필드에있는 문자를 읽어서 JSON에 넣구있다.

자료가 한줄이 아니고 여러줄이기 때문에 배열로 선언하고

info[len] = getRegObject(nameEl.value, priceEl.value, etcEl.value);

여기에서 getRegObject함수에서 객체를 만들어 리턴하고 있다.

꼭 객체를 만들어 리턴을 해야한다. JSON스펙에서 그렇게 하라고 명시하고있다.

var infoJSON = JSON.stringify(info);
저건 JSON라이브러리에 있는 메서드이다 즉 실질적으로 JSON으로 만들어준다.

xmlHttp.send(infoJSON);  

마지막은 이렇게 객체를 넘겨준다~

 

 

 

JSP에서는 넘어온 JSON객체를 파싱을 해야한다.

문자로 넘어온것과 같은 형태이지만 그걸 파싱할려면

String클래스에있는 메서드를 이용할수도 있지만. 복잡하고 어렵다..ㅠㅠ

역시 JSON홈페이지에 있는 자바패키지를 이용한다.

java 파일이 7개를 다 다운받고 패키지 컴파일을 해야 사용할수 있다.

 

 

 ================================= JSP ==================================

 

<%@ page language="java" contentType="text/plain; charset=UTF-8" %>
<%@ page import="java.io.*" %>
<%@ page import="org.json.*" %>
<%@ page import="java.text.ParseException" %>
<%
request.setCharacterEncoding("UTF-8");
StringBuffer jsonBuffer = new StringBuffer();
JSONObject jsonObject = null;
String json = null;
String line = null;
try {
    BufferedReader reader = request.getReader();
   
    while((line = reader.readLine()) != null) {
        jsonBuffer.append(line);
    }
    json = " { \"data\" : "  +jsonBuffer.toString() + " } ";
    //json = jsonBuffer.toString();
    System.out.println(json);

    jsonObject = new JSONObject(json);
    JSONArray array = new JSONArray();
    array = jsonObject.getJSONArray("data");
   
    for(int i=0; i<array.length(); i++){
        JSONObject data = (JSONObject)array.get(i);
        out.println(data.getString("name") + ",");
        out.println(data.getString("price")+ ",");
        out.println(data.getString("etc") + "\n");
    }
   
}catch(Exception e) {
    System.out.println("Error reading JSON string: " + e.toString());
}

%>

만일 자료가 단일.즉 한줄이라면 배열로 안받아도 된다.. 이거때문에...엄청 힘들었음 ㅋㅋ

JSON홈페이지에 있는 API를 살펴보면 쉽게 구현 가능하다~~

출처 : http://blog.naver.com/PostView.nhn?blogId=kst7132&logNo=140067249680