JavaScript_Ajax, JSON

Ajax(Asynchronous  JavaScript and XML)

 

• 자바스크립트와 XML(JSON)을 활용한 서버와의 비동기 데이터 통신
• XMLHttpRequest 객체를 활용해서 서버와 데이터 통신을 한다

Ajax의 실행흐름 예

 

 

Ajax의 특징

• 자바스크립트로 서버와 데이터 통신이 가능
• 페이지의 리로딩없이 화면을 일부분을 갱신하는게 가능해졌다 (서버로부터 데이터를 가져와서)

 

Ajax의 대표적인 기능

• 구글 맵
• 포털사이트 검색기능
• 대부분의 하위분류를 조회하는 기능

 

 

XMLHttpRequest

• 웹 브라우저의 화면 뒤에서 웹서버와 HTTP통신으로 데이터 교환이 가능한 객체 - 전체 페이지의 리로딩없이 웹 페이지의 일부분을 서버로 받아온 데이터로 갱신하는 것이 가능
• 모든 브라우저에 내장되어 있다(Chrome, Safari, FireFox, IE, Opera 등 )

 

 

주요 API

 

Property

프로퍼티명	설명
onreadystatechange	XMLHttpRequest의 readyStat 상태가 변경될 때 마다 실행될 콜백함수를 정의
readyState	XMLHttpRequest 객체의 현재 상태를 반환 0 : 요청이 초기화되지 않음 1 : 서버와 연결 2 : 서버가 요청을 받음 3 : 서버가 요청을 처리하는 중 4 : 서버가 요청처리를 끝내고 응답데이터를 보낼 준비가 되었다
status	요청에 대한 HTTP 응답코드를 반환 200 : OK 404 : Not Found 500 : Server Error
responseText	서버로부터 받은 데이터를 문자열로 반환
responseXML	서버로부터 받은 데이터를 XML Document 객체로 반환

 

 

onreadystatechange 사용 예시

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 서버가 보낸 데이터 조회
      // 데이터를 사용해서 HTML 컨텐츠 제작
      // HTML 컨텐츠를 화면의 특정위치에 반영
    }
  }

 

 

Method

메소드명	설명
let xhr = new XMLHttpRequest( )	XMLHttpRequest 객체 생성
xhr.open(method, url, async, user, password)	XMLHttpRequest 객체를 초기화 method : GET, POST url : 요청 URL async : true(비동기 동작), false(동기식 동작) user/password : 사용자 인증정보
xhr.send( )	서버로 요청을 보낸다 (GET방식의 요청일 때 사용)
xhr.setRequestHeader( )	POST 방식일 때 HTTP 요청메세지의 헤더정보를 설정 xhr.open("POST", "test.jsp") xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(String)	서버로 요청을 보낸다 (POST방식의 요청일 때 사용) xhr.send("title=안녕&content=안녕하세요");

 

 

 

서버의 응답컨텐츠 유형

 

text/html

• HTML 컨텐츠를 응답컨텐츠로 제공함
• 웹페이지 바로 반영할 수 있는 컨텐츠를 제공하는 것이다
• AJAX 요청을 보낸 클라이언트측에서는 별도의 작업없이 응답으로 받은 HTML 컨텐츠를 웹 페이지의 특정 영역에 반영시키기만 하면 된다

 

text/plain

• 일반 텍스트 컨텐츠를 응답컨텐츠로 제공함
• 응답데이터가 매우 단순한 값일 때 사용한다

 

text/xml

• XML 형식의 컨텐츠를 응답컨텐츠로 제공함
• 응답데이터가 다양한 값이 아닐 때 사용된다
• XML은 데이터를 저장하거나 전달할 목적으로 만들어졌으며, 데이터의 구조를 기술할 수 있다
• XML은 서로 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있게 한다

 

application/json

• JSON 형식의 컨텐츠를 응답컨텐츠로 제공함
• 응답데이터가 단순한 값이 아닐 때 사용된다
•  JSON은 XML과 비교해서 더 쉽고 데이터를 저장하고 교환하기 위해 설계된 텍스트 기반의 데이터 교환 표준이다
• JSON은 자바스크립트를 기반으로 설계되었으며, XML의 대안으로서 고안되었다
• JSON은 XML과 비교해서 경량의 데이터 교환 표준이다

 

 

JSON(JavaScript Object Notation)

 

• 경량의 데이터 - 교환 형식
• 사람이 읽고 쓰기 쉽고, 기계가 분석하고 생성하기 쉽다
• 프로그램 언어로부터 완전히 독립적

 

 

JSON의 구조

 

JSON Object 구조

• name/value 형태의 쌍으로 데이터를 표현한다 ( Java의 Map과 유사 ) 
• name/value 쌍들의 비순서화된 집합
• { name : value, name : value, name : value }
• name은 String 타입
• value는 String, number, Object, Array, true/false, null이 가능

 

JSON Object 예시

 

- 도서정보 

{ "no" : 1234, "title" : "자바의정석", "author" :"남궁성", "price" : 35000, "soldOut" : false }

- 고객정보
{ "no" : 1000, "name" : "고길동", "car" : {"name" : "제네시스", "maker" : "현대자동차", "year" : 2023 }

- 부서정보
{ "id" : 1000, "name" : "기술팀", "members" : ["홍길동", "김유신", "강감찬", "이순신"] }

 

 

JSON Array 구조

• value의 순서화된 리스트로 데이터를 표현한다 ( Array, Vector, List와 유사 )
• [ value, value, value, value]
• value는 String, number, Object, Array, true/false, null이 가능

 

JSON Array 예시

 

- 부서목록
["영업부", "기술부", "관리부", "총무부"]

- 부서목록
[{"id" : 1000, "name" : "기술부"}, {"id" : 2000, "name" : "영업부"}, {"id" : 3000, "name" : "관리부"}]

 

 

 

JSON 데이터 타입

 

데이터 타입	설명	예시
String	쌍따옴표안에 둘러싸인 유니코드 문자들의 조합이다(홑따옴표는 허용하지 않는다)	"" "a" "가" "\b", "\\", "\f", "\r", "\t", "\n" "\uAC00"
number	8진수, 16진수를 사용하지 않으며, C와 Java의 숫자와 비슷	0 123 3.14 -100 1.234E2

 

 

자바스크립트의 JSON 지원 API

• 자바스크립트 JSON 내장객체를 제공

 

주요API

JSON.parse	json 형식의 텍스트를 자바스크립트 객체 혹은 자바스크립트 배열로 변환해서 반환 json 형식의 텍스트가 json object 구조라면 자바스크립트 객체로 변환 json 형식의 텍스트가 json array 구조라면 자바스크립트 배열로 변환
JSON.stringify(자바스크립트객체)	자바스크립트 객체를 json.object 형식의 텍스트로 변환
JSON.stringify(자바스크립트배열)	자바스크립트 배열을 json.array형식의 텍스트로 변환

 

---

JSON 표현방식은 자바스크립트의 객체 리터럴과 구분할 필요가 있다

 

예시
let obj = {no:100, name:"홍길동"};

let obj = {'no':100, 'name':"홍길동"};

let obj = {"no":100, "name":"홍길동"};

 

JSON Object 데이터 - 텍스트다

let text = '{ "no":100, "name":"홍길동" }'

let text = '{ no:100, name:"홍길동" }' <---- 올바른 JSON 표현식이 아니다 

let text = '{ 'no':100, 'name':"홍길동" }' <---- 올바른 JSON 표현식이 아니다

let text = '{ "no":100, "name":'홍길동' }' <---- 올바른 JSON 표현식이 아니다