학원 day64. ajax

$.get은 ajax요청을 서버로 get방식의 요청을 보낼 때 사용하는 메소드다.

괄호 안에 요청url, 요청파라미터로 보낼 데이터, 응답왔을 때 실행할 함수를 적는다.

응답왔을 때 실행할 콜백함수는 매개변수를 가지는데 서버가 보낸 응답데이터가 전달된다.

응답하는 데이터가 무엇이냐에 따라서 화면을 갱신하는 코드를 작성한다.

데이터를 서버로 보낼 때는 {} 사이에 name:value 형식으로 보낸다.

---

HTTP 응답 데이터 
text/html
   HTML 컨텐츠
application/octet-stream
   바이너리 데이터(그림, 영상, 파일 데이터)
text/plain
   일반 텍스트
text/xml
   XML 데이터
application/json
   JSON 데이터

 

JSON

- JavaScript Object Notation (자바스크립트에서 객체와 배열을 표현하는 표기법을 빌려와서 데이터를 표기한다.)

- 경량의 데이터 교환 형식이다.  (xml에 비해서 데이터가 짧다. 분석하기도 쉽다.)

- 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다.

- JSON은 완벽하게 언어로부터 독립적이다.

- JSON을 이상적인 DATA-교환 언어로 만들고 있다.

 

JSON의 구조

- JSON Object 표기법 : name/value 쌍의 집합

              {"name":value, "name":value, "name":value, "name":value}

              * 자바스크립트의 객체와 대응

              * 자바의 VO, Map과 대응

- JSON Array 표기법 : 값들의 순서화된 리스트

             [ value, value, value, value ]

             * 자바스크립트의 배열과 대응

             * 자바의 배열, 콜렉션과 대응

 

* value : "문자열", 숫자, null, true, false, Object, Array

 

- JSON 형식의 데이터 예시

         JSON Object

                  {"no":100, "title":"이것이 자바다", "author":"신용권", "price":35000, "discountPrice":31500, "onSell":true, "stock":15 }

                 {'no':100} <- 오류! 문자열은 반드시 "" (쌍따옴표) 로 적어야 한다.

                 {"name":"국내도서", "categories":["생활", "인문", "문학", "기술서", "대학교재"]}

                 {"name":"홍길동", "car":{"name":"제네시스", "maker":"현대자동차"}}
                 {"name":"국내도서", "categories":[{"no":100, "name":"생활"}, {"no":110, "name":"인문"}]

      JSON Array
         ["김유신", "이순신", "강감찬", "류관순"]
         [{"no":100, "title":"이것이 자바다", "price":35000}, {"no":101, "title":"자바의 정석", "price":30000}]  // vo가 여러개 들어있는 Array

Gson gson = new Gson();

String json = gson.toJsonString(employeeList);   // List<Employee> 객체가 JSON Array 표기법의 텍스트로 변환된다.

 

주소창에 http://localhost/web-jquery/sample20-response.jsp?deptId=60 

          

chrome://apps/ 에서 웹스토어 검색에 jsonview를 추가한다.

자바스크립트에 내장된 객체 JSON이 있는데 그안에 parse라는 메소드를 사용하면

배열형식으로 적혀있는 건 자바스크립트의 배열로 바뀐다.

표기법이 자바스크립트 배열 적는 것과 똑같아서!

 

자바스크립트에서 배열을 생성하는 방법이 아래와 같음.

제이슨은 자바스크립트의 배열을 적는 것처럼 text를 적는다.

자바스크립트의 배열은 쌍따옴표, 홑따옴표 상관없이 적어도 되지만, 

json은 쌍따옴표만 적어야 한다.

위에는 자바스크립트 배열 리터럴이고, 아래는 json array 표기법으로 작성한 텍스트인데 

자바스크립트의 배열리터럴 처럼 생겨서 아래와 같이 JSON.parse()를 이용하면 배열을 만들어준다.

이거는 쌩 텍스트라서 114를 못가져온다. 그래서 아래와 같이 배열로 바꿔야 한다.

위의 코드는 자바스크립트의 객체로 바뀐다.

대괄호[] 형식은 배열로 바뀌고 중괄호{} 형식은 객체로 바뀐다.

맨 바깥이 대괄호인지 중괄호인지에 따라 배열인지 객체인지 구별할 수 있다.

 

응답데이터가 그냥 오는게 아니라 JSON.parse(응답데이터)가 실행되어 자바스크립트 형식으로 바꿔서 온다.

제이쿼리가 알아서 해준다.

자바스크립트 배열로 바뀌어진게 전달된다.

---