script 위치의 따른 사용법, Ajax, JSON 및 jQuery + Ajax + JSON 사용 예제

------------------------------------script 스크립트 사용법-----------------------------------

$('선택자')
            - 선택자에 해당하는 엘리먼트가 포함된 jQuery집합객체를 제공한다.
               $('선택자').조작함수()

$(엘리먼트객체)
            - 엘리먼트객체가 포함된 jQuery집합객체를 제공한다.
              $(엘리먼트객체).조작함수()

$(도큐먼트객체)
            - 도큐먼트객체가 포함된 jQuery집합객체를 제공한다.
              $(도큐먼트객체).조작함수()

$('html컨텐츠')
            - 'html컨텐츠'로 표시된 엘리먼트(태그)가 포함된 jQuery집합객체를 제공한다.
               $('html컨텐츠').조작함수()

$(함수)
            - HTML문서를 해석해서 생성된 도큐면트객체가 준비다 괴면 함수가 자동으로 실행된다.
              $(function(){
                        // html문서를 전부 해석하고 나자마자 실행될 코드를 작성한다.
                        // html 페이지가 로딩되자마자 실행될 코드를 작성한다.
            })

            $(document).ready(function(){
                        // 위의 소스와 동일하다.
            })



예시) head에 스크립트 사용법

----------------------------------------------Ajax-----------------------------------------


예시) 자바스크립트와 jQuery로 Ajax 사용하기 차이점 비교

server1

자바 스크립트 사용하기
demo1

jQuery 사용하기
demo2

 

예시2) 랜덤 책제목 받아오기

server2 

 

demo3

-----------------------------------------JSON-----------------------------------
            
(gson 라이브러리 사용)

JSON
 - 서버와 클라이언트가 데이터 교환에 사용하는 표기법
 - 자바스크립트에서 객체/배열을 표현할 때 사용했던 방법과 유사한 형식으로
   데이터를 표현한다.


JSON의 표기법
            배열 표기법
                        [값, 값, 값, 값, 값, 값, ... ]
                        응답데이터가 배열표기법 ---> 자바스크립트의 배열로 변환가능
                        var array = JSON.parse('[값, 값, 값, 값, 값, 값, ...]')
                        array[0]  ---> 값 획득

            객체 표기법
                        {"이름":값, "이름":값, "이름":값, ... }           
                        응답데이터가 객체표기법 ----> 자바스크립트의 객체로 변환가능
                        var object = JSON.parse('{"이름":값, "이름":값, "이름":값, ...}');
                        object.이름 ---> 값 획득

JSON에서 사용가능한 값
            문자열 ---> "문자열"
                        예) ["홍길동", "김유신", "강감찬"]
                             {"name":"홍길동", "phone":"010-1111-1111", "email":"hong@gmail.com"}

            정수    ---> 10
                        예) [100, 60, 59, 60]
                             {"kor":100, "eng":90, "math":50}

            실수    ---> 3.14
                        예) [4.1, 5.2, 3.6, 7.4]
                             {"홍길동":4.1, "김유신":3.5, "강감찬":3.7}

            불린값 ---> true, false
                        예) {"name":"홍길동", "married":false, "hasCar":true}

            null값  ---> null
                        예) {"name":"홍길동", "company":null}

            배열    ---> [값, 값, 값, ... ]
                        예) [["홍길동", "김유신", "강감찬"], ["이승만", "박정희", "전두환"]]
                             {"name":"마마무", "members":["솔라", "화사", "휘인", "문별"]}

            객체    ---> {"이름":값, "이름":값, "이름":값, ... }
                        예) [{"name":"홍길동", "phone":"010-1111-1111"}, {"name":"김유신", "phone":"010-2222-2222"}]
                             {"name":"홍길동", "dept":{"name":"컴퓨터공학과", "grade":4, "professor":"김교수"}}

 

객체, List, Set, Map를 json 표기법의 텍스트로 변경하기

            Gson gson = new Gson();

            String text = gson.toJson(객체);            ---> {}
            String text = gson.toJson(리스트);         ---> []
            String text = gson.toJson(셋);               ---> []
            String text = gson.toJson(맵);                ---> {}

            예시)
            Gson gson = new Gson();
            String jsonText = gson.toJson(suggestBooks);



예시) Ajax, jQuery, JSON을 이용해서 랜덤책 리스트 가져오기

server3   -- JSON 표기법을 사용해서 보낸다.
 

demo4  -- Ajax와 jQuery($.get())를 이용해서 서버와 통신, JSON표기법 데이터를 받아옴

예시) 총괄 사용

Employee

EmployeeDao

server4

demo5