1. AJAX
📌 Ajax 소개
✔️ Ajax는 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법을 의미.
✔️ JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회.
✔️ 화면 갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡.
📌 일반 요청에 대한 응답 vs Ajax 요청에 대한 응답
✔️ 일반 요청에 대한 응답
- data를 입력 후 event 발생
- Ajax를 적용하지 않은 요청은 서버에서 data를 이용하여 logic 처리
- logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송(화면 전환이 일어남)
✔️ Ajax 요청에 대한 응답
- data를 입력 후 event 발생
- Ajax를 적용하면 event 발생시 서버에서 요청을 처리한 후 Text, XML 또는JSON으로 응답.
- client 에서는 이 응답 data를 이용하여 화면 전환 없이 현재 페이지에서 동적으로 화면을 재구성.
📌 서버와 클라이언트의 상호작용
✔️ 웹 화면을 구성하는 방식은 SSR과 CSR로 구분
✔️ Ajax는 CSR 중심의 개발 방식이며 비동기 요청보다는 동적 화면 구성이 관건이다.
📌 AJAX 사용방식
✔️ XMLHttpRequest 이용 방식(Browser)
<script>
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
if(this.readyState == 4 && this.statue == 200){
console.log(ajax.responseText);
console.log(ajax.responseXML);
}
}
};
ajax.open("GET/POST","URL호출",true);
ajax.send();
</script>✔️ fetch() 이용 방식(Browser)
<script>
fetch("URL 링크")
.then((response)=>{
if(!response.ok){
throw new Error("400 또는 500에러 발생");
}
return response.json();
})
.then((result)=>{
console.log(result);
})
.catch(()=>{
console.log("에러 발생!");
});
</script>📌 GET 방식과 POST방식
✔️ GET 방식의 특징
- URL에 변수(데이터)를 포함시켜 요청한다.
- 데이터를 Header(헤더)에 포함하여 전송한다.
- URL에 데이터가 노출되어 보안에 취약하다.
- 전송하는 길이에 제한이 있다.
- 캐싱 할 수 있다.
✔️ POST 방식의 특징
- URL에 변수(데이터)를 노출하지 않고 요청한다.
- 데이터를 Body(바디)에 포함시킨다.
- URL에 데이터가 노출되지 않아서 기본 보안은 되어있다.
- 전송하는 길이에 제한이 없다.
- 캐싱 할 수 없다.
📌 JavaScript AJAX
✔️ XMLHttpRequest는 자바스크립트가 Ajax 방식으로 통신할 때 사용하는 객체
✔️ XMLHttpRequest 객체는 Ajax 통신 시 전송방식, 경로, 서버로 전송할 data등 전송정보를 담는 역할
✔️ 실제 서버와의 통신은 브라우저의 Ajax 엔진에서 수행
- JavaScript AJAX 적용 예 : httpRequest의 속성 값 ✔️ readyState
✔️ status
2. fetch
📌 fetch()
✔️ fetch()
- 브라우저에서 fetch() 함수를 지원하기 이전에는 XMLHttpRequest를 이용하여 직접 HTTP 요청하고 응답을 직접 구현.
✔️ 사용법
- fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 options 객체를 받음
- options에 아무것도 넘기지 않으면 GET 방식으로 진행되며 URL로부터 contents가 다운로드 됨
- 실행 결과 Promise 타입의 객체를 반환
let promise = fetch(url, [options]); - 반환된 Promise 객체는 API 호출이 성공했을 경우 응답객체(response)를 resolve하고, 실패했을 경우 예외(error) 객체를 reject함
<script> let response = await fetch(url); if(response.ok){ let json = await response.json(); }else{ alert("에러 발생 : "+response.status); } </script>
✔️ 응답 본문(data)를 받는 방법
- response.text() : 응답을 읽고 text를 반환.
- response.json() : 응답을 JSON 형식으로 파싱 함.
- response.formData() : 응답을 FormData 객체 형태로 반환.
- response.blob() : 응답을 Blob 형태로 반환.
✔️ fetch() 사용 예.
<script>
window.onload = async function(){
let url = "https://jsonplaceholder.typicode.com/posts/1";
let response = await fetch(url);
console.log(response);
// ● async : function 앞에 asynce 를 붙이면 해당 함수는 항상 프라미스를 반환한다.
// 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스로 값을 감싸 이행된 프라미스가 반환되도록 한다.
// ● await : 자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다린다.
// 결과는 그 이후 반환된다.
let data = await response.json();
console.log(data.userId);
};
</script>❌ async와 await를 사용하지 않은 경우
⭕ async와 await를 사용한 경우
⇒ 데이터를 promise 타입으로 바꿔서 반환한다.
📌 fetch 사용 예 - GET
<script>
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response)=>response.json())
.then((data)=>console.log(data.userId));
</script>
(결과)
📌 fetch 사용 예 - POST
<script>
let config = {
method : "POST",
headers : {
"Content-Type":"application/json"
},
body : JSON.stringify({
title : "안녕하세요",
body: "제 이름은 정예진이죵",
userId : 1
}),
};
fetch("https://jsonplaceholder.typicode.com/posts", config)
.then((response)=>response.json())
.then((data)=>console.log(data.userId));
</script>3. data 전송 형식(CSV, XML, JSON)
✔️ Server와 Client는 주고 받을 data의 형식을 맞춰야 함
✔️ 대표적인 data의 형식은 CSV, XML, JSON등이 있다.
1. CSV
- 각 항목을 쉼표(,)로 구분해 데이터를 표현하는 방법
- 다른 두 형식에 비해 굉장히 짧다. 많은 양의 데이터 전송 시 유리.
- 단, 각각의 데이터가 어떤 내용인지 파악하기 어렵다.
Ex) 20201111,김싸피,A,90
2. XML
- xml은 tag로 data를 표현함
- tag를 보면 각 data가 무엇을 의미하는지 파악 가능
- tag에 사용자 정의 속성을 넣을 수 있으므로 복잡한 data 전달 가능
3. JSON
- CSV와 XML의 단점을 극복한 형식
- JavaScript에서 사용하는 객체의 형식으로 data를 표현.
- Ajax 사용시 거의 표준으로 사용되는 data 표현 방식
❓ JSON 특징
- 데이터를 주고 받을 때 쓸 수 있는 가장 간단한 파일 포맷
- 텍스트 기반으로 상당히 가볍다.
- 읽기 편함
- Key와 Value쌍으로 되어 있다.
- 서버와 데이터를 주고 받을 때 직렬화(serialize), 역직렬과(deserialize)를 사용함.
- 프로그램 언어나 플랫폼에 상관없이 사용 가능
❓ JSON의 직렬화와 역직렬화
- 직렬화
- 객체를 문자열로 변환하는 작업.
- 통신을 할 때는 문자열로 직렬화 하여 주고 받는 것이 안전함.
- 사용법 : JSON.stringify(JSON객체)
- 역직렬화
- 문자열을 객체로 변환하는 작업
- 서버로부터 받은 문자열은 객체로 역직렬화 하여 사용
- 사용법 : JSON.parse(JSON형식의 문자열)
BE Developer