[JSP] 웹 동작방식 동기식, 비동기식, JSONObject

*웹 동작방식

 - 동기식, 비동기식

 

*동기식

 - 서버로 요청을 보내면 웹 브라우저는 응답받은 HTML을 그리기위해서 웹 브라우저안의

모든 내용을 삭제한 후, 서버에서 응답이 올 때까지 기다린 다음, 응답이 오면 응답받은 내용을

그리는 방식.

 =>  화면의 일부분이 변경되더라도, 모든 데이터를 다시 받아와서 다시 그린다.

 => 화면깜빡임이 발생한다.

-<a>, <form>로 요청을 보낼 때 동기식으로 동작.

-전체화면을 다시 그려야 할 때 사용.

-단점 : 화면의 일부분이 변경되더라도 변경되지 않은 모든 데이터를

       다시 받아와서 다시 그린다.( network cost 증가 )

---

 

*비 동기방식( Async )

 - 데이터만 보내고, 데이터만 받는 방식

 - RIA( Rich Internet Application )

    => 접속자의 웹 브라우저 자원을 더 많이 사용하는 Web Application

 - AJAX( Asynchronous JavaScript & XML)를  주로 ㅅ ㅏ용.

 - XMLHttpRequest 자바스크립트 객체가 핵심 객체.

 - 서버의 응답은 HTML, TEXT, XML, JSON이 사용된다.

 - 화면 깜빡임이 발생하지 않는다. ( 화면의 일부분만 변경 )

 - JavaSCript에서 DOM을 사용하여 변경할 디자인이 있는 곳을 찾아, 응답받은 데이터를 사용

  하여 디자인을 만들고 보여준다.

*데이터 생성 ( HTML, TEXT, XML, JSON )

 - JSP에서 JSONObject나 JSONArray를 만들어서 응답.

-외부 library를 사용하여 생성

  : google에서 배포하는 json-simple library를 사용.

  -java.util.Map과 java.util.List를 기반으로 제작된 library

 

*사용법)

 1. 객체 생성) – Generic을 지원하지 않는다.

  JSONObject jsonObj=new JSONObjec(); - Map을 사용하여 만들어진 클래스

                                                          -Generic을 지원하지 않는다.

2. 값 할당 ) – 입력한 값은 순서대로 들어가지 않는다. ( 같은 이름이 존재하면 덮어 쓴다. )

   jsonObj.put(“이름”, 값 );

3. JSONObject이 가진 값을 문자열로 얻기

  String str=jsonObj.toJSONString();

 1.생성

  JSONObject jsonObj=new JSONObject();

 2. 값 할당)

  jsonObj.put(“name”, “이일삼”);

  jsonObj.put(“age”, 25);

 3. 3. JSONObject이 가진 값을 문자열로 얻기

  String str=jsonObj.toJSONString();

 

---

 

*JSONObject

 -java.util.List기반

사용법)

1.JSONArray생성

  JSONArray jsonArr=new JSONArray();

 2.JSONArray에 할당될 JSONObject 생성

  JSONObject jsonObj=new JSONObject();

   jsonObj.put(“이름” , 값 );

                .

                .

 3.JSONArray에  JSONObject을 할당

   jsonArr.add(  jsonObj );

4. 문자열로 반환

  String str=jsonArr.toJSONString();

           

*복합형태

 -JSONObject안에 JSONArray가 있는 형태

1.JSONObject 생성 > 데이터와 부가적인정보

2. 부가적인 정보 추가

3.JSONArray 생성 > 데이터를 가지는 객체

4. JSONArray에 JSONObject 추가

5. 문자열로 받기

 

*jQuery AJAX함수

 -jQuery에서 AJAX는 jQueryObject( $ )에서 함수를 직접 제공.

  => $.ajax({ });

사용법)

 $.ajax({

   url : “요청을 받는 JSP URL”,

   type:”요청방식 GET| POST”,

   data : queryString,

   async : “동작방식 true | false”,

  dataType : “서버에서 응답되는 데이터의 형식 지정 HTML, TEXT, XML, JSON”,

  error: function( xhr ){

  에러가 발생했을 때 실행될 코드정의

    },

  success : function( data ){

        응답이 성공했을 때 실행될 코드 정의

  }

});

 

true : 비 동기식으로 동작

 -서버에서 데이터가 응답되기 전 callback function이 호출되는 방식

   응답되는 데이터의 양이 많거나 처리속도가 지연되면

   처리완료전 callback function이 호출 될 수 있다.

false : 동기식으로 동작

 - 서버에서 데이터가 모두 응답 된 후 callback function이 호출되는

   방식

 -응답되는 데이터의 양이 많더라도 처리가 완료 된 후 함수가

  호출된다.