1. Json에 대하여 설명하시오.
- JSON은 JavaScript Object Notation의 약자로,
사람이 읽고 쓸 수 있는 텍스트 형식의 데이터 교환 표준
2. Json 과 xml 차이는?
| 특징 | JSON | XML |
|---|---|---|
| 데이터 표현 | 키-값 쌍 | 태그 |
| 데이터 형식 | 텍스트 | XML 문서 |
| 사용 언어 | JavaScript, Python, Java 등 | C++, C#, Java 등 |
| 용도 | 데이터 교환, 웹 서비스, 웹 애플리케이션 | 데이터 교환, 웹 서비스, 웹 애플리케이션, 전자상거래 |
| 장점 | 가볍고 빠르다, 사람이 읽고 쓰기 쉽다 | 구조가 명확하다, 확장성이 좋다 |
| 단점 | 표현력이 부족하다, 데이터 크기가 크면 느리다 | 표현력이 뛰어나다, 데이터 크기가 크면 빠르다 |
3. 비동기 통신이란?
- ajax: 비동기 통신 (동기를 기다리지 않는다 = 쓰레드)
4. ajax 에 대하여 설명하시오.
- AJAX는 Asynchronous JavaScript and XML의 약자로,
웹 페이지를 새로고침하지 않고도 웹 서버에서 데이터를 가져와
웹 페이지를 동적으로 업데이트하는 기술
5. 아래의 주소로 ajax 통신하여, 동적으로 table을 생성하시오.
http://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=10
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> $(document).ready(function(){ $.ajax({ type : "GET", //방식 설정 url : "https://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=30", success : function(result){ console.log("통신 성공"); console.log(result); $("#list-table").append( $("<tr></tr>") .append($("<td></td>").text("번호")) .append($("<td></td>").text("이름")) .append($("<td></td>").text("전화번호")) .append($("<td></td>").text("주소")) .append($("<td></td>").text("사진")) .append($("<td></td>").text("삭제")) ); $(result.contacts).each(function(){ $("#list-table").append( $("<tr></tr>") .append($("<td></td>").text(this.no)) .append($("<td></td>").text(this.name)) .append($("<td></td>").text(this.tel)) .append($("<td></td>").text(this.address)) .append($("<td></td>").append($("<img></img>").attr("src",this.photo))) .append($("<td></td>").append($("<input></input>").attr("id",this.no).attr("type","button").attr("class","del-button").attr("value","삭제") )) ); }); }, error : function(error){ console.log(error); } }); console.log("비동기 체크 문구") }); </script> </script> <script> $(document).on("click",".del-button",function(){ console.log(this); $(this).parent().parent().remove(); }); </script> </head> <body> <table id="list-table" width = "500" border = "1"></table> </body> </html>
Point
- 데이터: json vs xml
- xml: 데이터를 설명하는 태그, HTML의 한 종류 (각종 <>)
- 인터넷 상에서는 아스키코드만 주고 받는다
- 어디에 종속된것이 아니라 세계 표준화 된것
- json: <> 대신 {" "}
- ajax
- "jquery가 제공하는 비동기 통신 함수"
- json 원본을 ajax가 자바스크립트 객체로 변환하여 넘겨줌
- result가 전체 객체 넘버, 원하는 값은 . 으로 접근
- ajx 밖에 것부터 실행(통신을 기다리면 손해)
s