HTTP
클라이언트 & 서버
클라이언트 역할 : 서버에 자료를 요청하는 역할
서버 역할 : 클라이언트가 요청한 자료를 회신하는 역할
http 혹은 https : 프로토콜 => 통신규약
앞으로 웹 서버에서 클라이언트가 특정 데이터를 요청한다면, 서로 약속한 데이터 형식을 가지고 요청할 때만 값을 출력해주자!
HTML : 하이퍼 텍스트 마크업 랭귀지
HTTP : 하이퍼 텍스트 트랜스퍼 프로토콜
닷홈을 활용해서 무료 호스팅 서비스 :
도메인 주소!!!
요청헤더 & 응답헤더
GET & SET 방식
Get방식 : 서버에 자료를 요청할 때, 사이트 주소 뒤에 자료명을 붙여서 보내는 방식
요청하고자하는 자료가 공공데이터이거나 비보안문서 혹은 정보검색용 데이터
POST 방식 : 서버에 자료를 요청할 때, 요청 문자 혹은 내용이 도메인 주소에 나타나지 않도록 body 본문 안에 담아서 전송하는 방식
404 Page Not Found
2xx : 성공 메세지
4xx : 서버로부터 데이터를 받아오는데 실패
-404 : 문서를 찾을 수 없을 때 (*도메인 오타)
-401 : 문서에 접속할 권한이 없을 때
5xx : 서버 자체 오류가 났을 때
-500 : 서버다운 (접속량이 급작스럽게 늘었거나)
-503 : 서버 자체적으로 데이터 차단
자바스크립트를 이용해 외부사이트 데이터를 가지고 올 계획입니다.
XML 데이터 자료형식
JSON = Javascript Object Notation : 자바스크립트 객체 표기법
자바, C, 파이썬, C++
- 용량이 상대적으로 작다.
- 사용할 수 있는 범위가 넓다.
Json 형식
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
}
객체와 JSON 차이점
- key 값을 표현할 때, ""여부
- 프로퍼티 & 메서드(함수) VS JSON은 메서드 및 함수를 넣을 수 없습니다.
유의사항
-JSON에서 key값을 정의할 때, 무조건 ""
-key값을 정의할 때, 원칙적으로 띄어쓰기 가능하나, 실무에서는 아무도 띄어쓰기를 하지 않는다!!! 언더바 사용이 정설!
객체를 JSON으로 변환할 때
JSON을 객체로 변환할 때
1.클라이언트 / 서버
2.JSON / XML
3.JSON.stringify() : 객체 -> JSON
4.JSON.parse() : JSON -> 객체
AJAX : Asychronous Javascript And Xml
비동기 자바스크립트와 엑스엠엘
비동기 <-> 동기 : 서버에 자료를 요청하고, 요청한 자료가 정상적으로 수신이 되어야지만, 페이지 전환 및 이동!
: 웹페이지가 새롭게 로딩되지 않고도 필요한 웹문서를 가져와서 보여주는 것을 AJAX라고 합니다.
자바스크립트 비동기 데이터 처리 방식
웹클라이언트 & 웹브라우저 & 웹서버
XMLHttpRequest 객체 = XHR 객체
-프로퍼티
-메서드
open() : 어떤 방식으로 사용할 지, 어떤 자료가 필요한지, 비동기 처리 여부 정의하는 메서드
send() : 앞에서 설정한 open()를 서버로 보내는 메서드
xhr 객체 이용해서 데이터 가져오기
XMLHttpRequest 객체
1) 메서드
-open()
-send()
2) 프로퍼티
-readyState: 객체에서 서버로 자료 요청여부 및 자료도착 여부 알 수 있는 프로퍼티
0: 아직 서버한테 자료요청을 안한 상태
1: 서버한테 자료를 성공적으로 요청
2: 서버 요청에 대한 응답이 온 상태
3: 서버에서 자료가 로딩중인 상태
4: 자료 전송이 끝나고 클라이언트가 자료를 사용할 수 있는 상태
-status : 서버와의 통신 상태
2xx
4xx
5xx
-responseText : 서버에 요청한 응답이 문자열로 저장된 형태
[결과값]
[HTML]
[JSON 파일 생성]
