[Javascript] AJAX

■ 동기화 (Synchronous) 방식
  request - response 관계 

■ AJAX
1. Asynchronous JavaScript And XML.
: 자바스크립트를 활용한 비동기 프로그래밍
: 꼭 XML만 다루지는 않음.. 텍스트, JSON 등 다룰수 있음

2. AJAX는  프로그래밍 언어가 아니다!

3. XMLHttpRequest object 를 사용하여 서버에 request를 보내고
  DOM 을 사용하여 화면에 업데이트 한다.

 
■ AJAX 장점
1. 페이지 로딩 후에도, 서버로부터 데이터 끌고 올 수 있다. 
2. 페이지 리로딩 없이, 서버로부터 데이터 끌고 와서 페이지 업데이트 가능
        → 페이지 변경시 필요한 네트웍 트래픽(시간, 대역폭) 절약
3. 서버에 데이터 전송이 서버 조작이 가능하다 (백그라운드로!)

■ AJAX 사용 예
1. 아이디 중복 체크
2. 포탈 검색어 입력시 suggestion.
3. 실시간 정보 업데이트 : 실검, 날씨, 뉴스, 주식 정보 등..
4. 스크롤 페이징
5. 각종 API
6. SPA (Single Page Web : 단일페이지 웹) 구현

■ AJAX 작동절차
1. 웹페이지 이벤트 발생 (클릭, 입력, 등...)
2. XMLHttpRequest object 생성
3. XMLHttpRequest object가 서버에 request 한다.
4. 서버가 request 처리
5. 서버가 response를 웹페이지에 보낸다.
6. 웹페이지에서 response를 읽는다.
7. 읽은 내용으로 화면을 업데이트 한다.


 * Same Origin Policy (동일 출처 정책)
  어떤 출처에서 불러온 문서나 스크립트가 
  다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식
  참조 : https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

  Chrome 은 위 Same Origin Policy 정책을 지키므로
  예제를 실행할 경우 동작 안 함. -> CORS 에러 (console 창에서 확인 가능)
  교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)
  AJAX request 와 같이 추가적인 HTTP request 발생시
  실행중인 웹이 다른 출처의 자원에 접근할수 있도록 브라우저에 알려줌.
  response 하는 서버에서 response 헤더에  Access-Control-Allow-Origin 헤더가 있으면 가능.

  참조 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
  
  ※ IE 및 이클립스 내장 브라우저에서는 동일출처정책을 까다롭게 적용안하므로 문제 없이 예제 동작함.

 

 

 

* XMLHttpRequest object 의 메소드들

open(method, url, async, user, psw) : request 에 대해 명시

- method: GET or POST
- url
- async: true (asynchronous) or false (synchronous)
- user: optional user name
- psw: optional password


- send() : GET 방식으로 서버에 request 보냄
- send(string) : POST 방식으로 서버에 request 보냄
- setRequestHeader() : 

 

* XMLHttpRequest object 의 property 들.

1. onreadystatechange : 함수 설정.  readyState 값이 바뀔때마다 호출됨.
2. readyState : XMLHttpRequest 상태(state) 값 저장

[값] : [의미]
0 : request 준비 안됨 (초기화 안됨)
1 : 서버 연결됨
2 : request 수신됨.
3 : request 처리 중
4 : request 끝나고, response 준비됨.

3. responseText : response 데이터를 문자열로.
3. responseXML : response 데이터를 XML로.
4. status : request 상태값

[값] : [의미]
200 : OK
403 : Forbidden
404 : Not Found
500 : Internal Server Error

 

-> this.readyState == 4 && this.status == 200

: XMLHttpRequest 상태값 request가 끝나고 response 준비됨 & request 상태 값이 OK

참조 : https://www.w3schools.com/tags/ref_httpmessages.asp
https://developer.mozilla.org/ko/docs/Web/HTTP/Status

5. statusText : 상태정보 텍스트 : (ex: 'OK' , 'Not Found');

---

 

* AJAX - XML

---

 

* AJAX - JASON

 

JSON 문자열은
JSON.parse() 를 사용하면 JavaScript object 로 손쉽게 변환된다.

 

---

■서울시 지하철호선별 역별 승하차 인원 정보 
http://data.seoul.go.kr/dataList/datasetView.do?infId=OA-12914&srvType=A&serviceKind=1&currentPageNo=1

샘플url

XML 버전
http://openapi.seoul.go.kr:8088/키값을넣으세요/xml/CardSubwayStatsNew/1/5/20181001
예) http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/xml/CardSubwayStatsNew/1/5/20181001

JSON 버전
http://openapi.seoul.go.kr:8088/키값을넣으세요/json/CardSubwayStatsNew/1/5/20181001
예) http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/json/CardSubwayStatsNew/1/5/20181001

 

---

■서울시 지하철 역사마스터 정보
http://data.seoul.go.kr/dataList/OA-21232/S/1/datasetView.do

샘플url

XML 버전
http://openapi.seoul.go.kr:8088/(인증키)/xml/subwayStationMaster/1/5/
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/xml/subwayStationMaster/1/5/


JSON 버전
http://openapi.seoul.go.kr:8088/(인증키)/json/subwayStationMaster/1/5/
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/json/subwayStationMaster/1/5/