Learn & Record
JavaScript (Ajax, JSON, JSON.parse(), Ajax 이용 데이터 임포트, url 인코딩 키 사용) 본문
JavaScript (Ajax, JSON, JSON.parse(), Ajax 이용 데이터 임포트, url 인코딩 키 사용)
Walker_ 2024. 4. 11. 14:091. Ajax
- Asynchronus JavaScript And XML
- 자바스크립트를 사용하여 브랑줘가 비동기 방식으로 데이터를 요청하고,
- 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
- Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반을 동작
- XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공
- 1999년 마이크로소프트가 개발한 XMLHttpRequest는 그다지 큰 주목을 받지 못하다가
- 2005년 구글이 발표한 구글 맵스를 통해 웹 애플리케이션 개발 프로그래밍 언어로서
- 자바스크립트의 가능성을 확인하는 계기를 마련했다.
- 이전의 웹페이지는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작
- 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링
- 전통적인 방식의 단점
- 1) 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로 부터
- 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다.
- 2) 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 한다. 이로 인해 화면 전환이 일어나면 화면이 순간적으로
- 깜빡이는 현상이 발생한다.
- 3) 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때 까지 다음 처리는
- 블로킹된다.
- Ajax의 장점
- 1) 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않는다.
- 2) 변경할 필요가 없는 부분은 다시 렌더링하지 않는다. 따라서 화면이 순간적으로 깜빡이는 현상이 발생하지 않는다.
- 3) 클라이언트와 서버와의 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생 안한다.
- Ajax의 단점
- 1) 즐겨찾기나 검색엔진에 불리
- 2) 개발이 상대적으로 어려움
2. JSON
- JSON : JavaScript Object Notation
- 클라이언트와 서버간의 HTTP 통신을 위한 텍스트 데이터 포맷
- 자바스크립트에 종속되지 않은 언어 독립형 데이터 포맷으로, 대부분의 프로그래밍 언어에서 사용할 수 있음
- JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트
- JSON의 키는 반드시 큰 따옴표(작은 따옴표 사용 불가)로 묶여야 함
- 값은 객체 리터널과 같은 표기법을 그대로 사용할 수 있으나 문자열은 큰 따옴표(작은 따옴표 사용 불가)로 묶여야 함
- JSON.stringfy()
- 객체를 JSON 포맷의 문자열로 변환
- 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는 데 이를 직렬화 serializing 라고 함
<script>
document.addEventListener('DOMContentLoaded', function () {
const obj = {
name: "Lee",
age: 20,
alive : true,
hobby: ['traveling', 'tennis']
}
console.log(typeof obj) // object
// 객체를 JSON 포맷의 문자열로 변환
const prettyJson = JSON.stringify(obj, null, 2);
console.log(typeof prettyJson, prettyJson);
// replacer : 함수. 값의 타입이 Number이면 필터링이 되어 반환되지 않는다.
function filter(key, value) {
// undefined : 반환되지 않음
return typeof value === 'number' ? undefined : value;
}
const strFilterObject = JSON.stringify(obj, filter, 2);
console.log(typeof strFilterObject, strFilterObject);
// JSON.stringfy() 메서드는 객체뿐만 아니라 배열도 JSON 포맷의 문자열로 반환한다
const todos = [
{ id : 1, content: 'HTML', completed: false},
{ id : 2, content: 'CSS', completed: true},
{ id : 3, content: 'JavaScript', completed: false}
];
// 배열을 JSON 포맷의 문자열로 반환
const jsonArray = JSON.stringify(todos, null, 2)
console.log(typeof jsonArray, jsonArray)
})
</script>
3. JSON.parse()
- JSON 포맷의 문자열을 객체로 변환
- 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이고, 이 문자열을 객체로 변환
- JSON 포맷의 문자열을 객체화하는 것을 역직렬화 deserializing
<script>
document.addEventListener('DOMContentLoaded', function () {
const obj = {
name: "Lee",
age: 20,
alive: true,
hobby: ['traveling', 'tennis']
}
// 객체를 JSON 포맷의 문자열로 변환
console.log(typeof obj)
const json = JSON.stringify(obj)
console.log(typeof json, json) // string
// JSON 포맷의 문자열을 객체로 변환
const parsed = JSON.parse(json)
console.log(typeof parsed, parsed) // object
const todos = [
{ id : 1, content: 'HTML', completed: false},
{ id : 2, content: 'CSS', completed: true},
{ id : 3, content: 'JavaScript', completed: false}
];
console.log(typeof todos)
const jsonTodos = JSON.stringify(todos)
console.log(typeof jsonTodoso, jsonTodos)
const stringTodos = JSON.parse(jsonTodos)
console.log(typeof stringTodos, stringTodos)
})
</script>
4. Ajax 이용 데이터 가져오기
<script>
document.addEventListener('DOMContentLoaded',function () {
// ajax를 이용해 데이터 가져오기
// XMLHttpRequest 객체 생성
const xhr =new XMLHttpRequest();
// HTTP 요청 초기화
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1')
console.log(xhr)
// 이벤트 등록. XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때 마다 자동으로 호출
xhr.onreadystatechange = () => {
// readyState 프로퍼티의 값이 DONE : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
if(xhr.readyState != XMLHttpRequest.DONE) return;
if(xhr.status === 200) { // 서버(url)에 문서가 존재함
console.log(JSON.parse(xhr.response))
const obj = JSON.parse(xhr.response);
console.log(obj.title)
}else {
console.error('Error', xhr.status, xhr.statusText)
}
}
xhr.send(); // url에 요청을 보냄
})
</script>
5. 인코딩 된 키 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
// url 인코딩된 키 사용
const serviceKey = '1wMGYoH1onj8LIYDjyTfyuVPZLQc6F31PLdZjBj6jxjEi5P5suF4F9tGV2d38RvWOUj0tpiv6/OmN0NsBd93gg==';
// 위치 값
// 대구광역시 중구 삼덕동 89 90
const nx = 89
const ny = 90
// 현재 시간 구함
const today = new Date();
const baseDate = `${today.getFullYear()}${(`0` + (today.getMonth()+1)).slice(-2)}${(`0` + today.getDate()).slice(-2)}`;
// 현재 분이 30분 이전이면 이전 시간(정시)을 설정
let baseTime = today.getMinutes() <= 30 ? `${today.getHours() - 1}00` : `${today.getHours()}00`;
baseTime = (baseTime.length === 3) ? `0${baseTime}` : baseTime; // 10시 전이면 0을 하나 붙임
const parameter = `?serviceKey=${serviceKey}&base_date=${baseDate}&base_time=${baseTime}&nx=${nx}&ny=${ny}&dataType=JSON`
const url = 'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst' + parameter;
console.log(url)
// ajax를 이용해 데이터 가져오기
// XMLHttpRequest 객체 생성
const xhr =new XMLHttpRequest();
// HTTP 요청 초기화
xhr.open('GET', url)
console.log(xhr.response)
// console.log(xhr)
// const jsonData = JSON.parse(xhr.response)
// 이벤트 등록. XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때 마다 자동으로 호출
xhr.onreadystatechange = () => {
// readyState 프로퍼티의 값이 DONE : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
if(xhr.readyState != XMLHttpRequest.DONE) return;
if(xhr.status === 200) { // 서버(url)에 문서가 존재함
console.log(xhr.response)
jsonData = JSON.parse(xhr.response)
console.log(jsonData)
}else {
console.error('Error', xhr.status, xhr.statusText)
}
}
xhr.send(); // url에 요청을 보냄
// weatherItems = jsonData['response']['body']['items']['item']
// console.log(weatherItems)
// HTML에 JSON 데이터 출력
const btn = document.querySelector(".on")
btn.addEventListener('click', function() {
// 문서 객체 생성
const json = document.createElement('div');
// 생성한 태그 조작하기
json.innerHTML = `<p>[발표 날짜: ${weather_items[0]["baseDate"]}]</p>`
document.body.appendChild(json)
})
});
</script>
</head>
<body>
<button type="button" class="on">확인</button>
</body>
</html>
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)
'Dev > HTML CSS JS' 카테고리의 다른 글
JavaScript (인천국제공항_버스정보_ 공공데이터 활용, 여객편 주간 운항 공공데이터) (0) | 2024.04.12 |
---|---|
Html Css JavaScript (Todo List, html, css, java script) (0) | 2024.04.09 |
Html Css JavaScript (수강신청 프로그램, html, css, 체크리스트 중간, html, css) (0) | 2024.04.08 |
JavaScript (참가신청 최종, 주문 프로그램, 회원가입) (2) | 2024.04.05 |
HTML CSS JS (연습문제, select, multiple, checkbox, radio, prevent, 참가신청) (0) | 2024.04.04 |