0418/AJAX, JSONObject

쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/sangyoungjsp에 올려두었습니다.

 

비동기 방식의 기술

  - AJAX, Flex

  - 외부 library 사용( JSONSimple.jar )
     Map을 사용하여 구현된  JSONObject  생성 라이브러리
     code.google.com에서 다운

 

* AJAX
  - Asynchronous JavaScript & XML
  - JavaScript으로 처리하는 비동기 방식
  - 모든 브라우저에 JavaScript를 실행하기 위한 Engine 이 들어있다.

    (사용자가 실행하기 위해 별도의 프로그램을 설치할 필요가 없다.)

* Flex
  - Flash의 개발자버전 : Flash Player가 설치된 브라우저에서만 동작
  - 유지보수가 힘들다.

// JSONObject - Map기반
// 1.객체 생성 - Generic은 지원하지 않는다.
JSONObject json=new JSONObject();
// 2. 값 할당(이름 : 값;) – 입력 값은 순서대로 들어가지 않는다. 같은 이름이 존재하면 덮어 쓴다.
json.put( "이름", 값 );
// 3. 값을 가진 JSONObject을 문자열로 얻기
String jsonStr = json.toJSONString();
out.println( jsonStr );

 

 

* JSONArray( java.util.List )

// 1.JSONArray 생성
JSONArray ja=new JSONArray(); //JSONObject을 가진다.

// 2.JSONObject 생성
JSONObject json=new JSONObject();
// 값 할당
json.put("name","테스트");

// 3. 생성된 JSONObject을 JSONArray 추가
ja.add( json );
 
// 4. 출력 - JSONArray가 가진 모든 JSONObject이 출력된다.
ja.toJSONString();

  
* JSONObject와 JSONArray 혼합 사용

// 1.JSONObject 생성 - 생산 정보와 데이터를 가지는 객체
JSONObject jsonObj=new JSONObject();

// 2.값 할당 - 정보를 생산한 주체의 정보 할당
jsonObj.put( "이름" ,값 );

//2. 값 할당 - 데이터를 저장 값 ( JSONArray )
JSONArray jsonArr=new JSONArray();
  
JSONObject jsonData=new JSONObject();
 jsonData.put("이름",값);

// JSONArray 값 할당 
jsonArr.add( jsonData );

// 값을 JSONObject 할당
jsonObj.put("이름", jsonArr );

// 아래 사진과 같이 출력
jsonObj.toJSONString();

AJAX 요청

  - jQuery로 AJAX 사용
  - ajax는 jQueryObject( $ )에서 바로 기능을 제공

/*
async 에서 
true : 비동기식으로 동작
       요청한 서버에서 응답이 완료되기 전
       callback function인 success가 호출
      (데이터의 양이 많다면 처리되기 전 호출 – 모든 데이터를 보여 줄 수 없는 상황)
false : 동기식으로 동작
        요청한 서버에서 응답이 완료된 후
        callback function인 success가 호출
       (데이터의 양이 많아도 완전히 처리된 후 호출 – 모든 데이터를 보여 줄 수 있는 상황)
 */
$.ajax({
// 요청
     url : "데이터를 요청할 JSP의 URL",
     type:"요청 방식 GET | POST",
     data : queryString,
     async : "동작방식 true | false",

//응답
	 dataType:"서버에서 응답되는 데이터형식 HTML, TEXT, XML, JSON",
     error :function( xhr ){
		에러가 발생했을 때 실행될 코드
     },
    success : function( data ){       
		dataType에 설정된 대상으로 객체가 생성되어 매개변수에 할당된다.
		성공했을 때 실행될 코드 
    }
   });

 

 

* AJAX에서 JSP로 QueryString 전달