비동기 HTTP 통신
- 동기 방식
• 한 번에 하나만 처리 -> 페이지를 아예 이동해 서버가 데이터 처리
<button type="submit"></button>- 비동기 방식
• 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리 가능!
• dynamic : 웹 문서의 일부 내용이 실시간으로 변경되는 것
<button type="button"></button>비동기 HTTP 통신 : 폼의 데이터를 서버와 dynamic하게 송수신 하는 것
- Ajax
- Axios
- Fetch
Ajax
Ajax
- 장점
• JQuery를 통해 쉽게 구현 가능
• Error, Success, Complete의 상태를 통해 실행 흐름을 조절할 수 있음
- 단점
• Jquery를 사용해야만 간편하고 호환성이 보장됨 ( xml 사용은 복잡 )
• Promise 기반이 아님
1. 유효성 검사를 통과한 데이터를 data 객체에 저장
function getData(){
const form = document.forms["register"];
if(!form.checkValidity()){ // checkValidity : form의 유효성 검사를 해서 boolean 값 반환
form.reportValidity(); // reportValidity : 유효성 검사를 통과하지 못한 input에 대해 report
return false; // return을 만나면 다음 코드를 읽지 않음
}
// getData라는 함수의 반환값은 총 2가지 형태
// 1. false
// 2. object(객체)
const data = {
id: form.id.value,
pw: form.pw.value,
name: form.name.value,
}
return data;
}2-1. ajax로 get 요청
function ajaxGet(){
const data = getData();
$.ajax({
type: "GET", // 폼 속성 중 method
url: `/ajax?id=${data.id}&pw=${data.pw}&name=${data.name}`, // 폼 속성 중 action
// data: data, // id, pw, name 넘겨줌 url에 쿼리 직접 작성해서 주석 처리함
success: function(result){ // 응답(result)을 성공적으로 받았을 경우에 대한 이벤트 핸들러
console.log(result);
$("#result").html(`ajax get 요청 성공 ${result.name}님 환영합니다.`);
}
})
}2-2. ajax로 post 요청
function ajaxPost(){
const data = getData();
$.ajax({
type: "POST",
url: "/ajax",
data: data,
success: function(result){
console.log(result);
// const {
// name
// } = result; // 객체 구조 분해도 ㄱㄴ
$("#result").html(`ajax post 요청 성공 ${result.name}님 환영합니다.`);
}
})
}Axios
Axios
- 장점
• Promise 기반으로 만들어졌다.
• 브라우저 호환성이 뛰어나다.
- 단점
• 모듈 설치 or 호출을 해줘야 사용이 가능하다.npm install axios // 또는 cdn도 가능
3-1. axios로 get 요청
function axiosGet(){
const data = getData();
if(!data) return;
// axios 함수는 promise 객체를 return
axios({
method: "get", // default값은 get
url: "/axios", // form의 action
params: data, // req.query가 받음
}).then((res)=>{
// 서버에서 보내준 응답이 res에 담김
console.log("res", res);
console.log("res.data", res.data);
const{name} = res.data;
$("#result").html(`axios get 요청 성공 ${name}님 환영합니다.`);
})
}3-2. axios로 post 요청
async function axiosPost(){
// 동적 폼 전송은 form 의 "submit"을 이용하는 게 아님
// 따라서, js 코드 내에서 폼 유효성 검사하는 코드를 작성해야 함.
// 1. const regex = /^[a-z0-9]{5,}$/
// regex.test(form.id.value)
// 3. form.checkVaildity()와 form.reportVaildity()를 이용해 input에 작성된 유효성 검증
const data = getData();
// data에 받아오는 값은 두가지 형태 중 하나
// false or object
if(!data) return;
const res = await axios({
method: "post",
url: "/axios",
data: data, // req.body가 받음
})
console.log(res);
console.log(res.data);
$("#result").html(`axios post 요청 성공 ${res.data.name}님 환영합니다.`);
// async await 사용하지 않기
// axios({
// method: "post",
// url: "/axios",
// data: data,
// }).then((res)=>{
// const{name} = res.data;
// $("#result").html(`axios post 요청 성공 ${name}님 환영합니다.`);
// })
}fetch
fetch
- 장점
• JavaScript 내장 라이브러리이므로 별도의 import 필요 X
• Promise 기반
- 단점
• 최신 문법
• 상대적으로 Axios에 비해 기능 부족
4-1. fetch로 get 요청
async function fetchGet() {
const data = getData();
if(!data) return;
// fetch(url, option객체)
// option 객체에 method가 있음
// fetch는 method 기본값 get
// fetch는 get 요청 시 데이터를 query로 만들어서 url과 함께 전송해야 함
// 밑의 두 코드는 동일함. 쿼리가 복잡한 경우 두번째 방법 사용
// const urlQuery = `id=${data.id}&pw=${data.pw}&name=${data.name}`;
const urlQuery = new URLSearchParams(data).toString();
// ----------------------------방법 1 (then 체이닝) ------------------------------------
// fetch(`/fetch?${urlQuery}`)
// .then((res)=> {
// console.log("원본", res)
// // json() 메소드를 이용해서 parsing 해야함
// // json()은 promise 기반
// // const data = res.json(); console.log(data) ===>> promise pending (undefined) 문제 발생
// return res.json()
// }).then ((res) => {
// // 위에서 파싱해서 return 하고 있기 때문에
// // 이 함수의 res는 서버에서 응답한 객체가 잘 나옴
// console.log("파싱", res);
// })
// ---------------------------방법 2 (반만 async / await)--------------------------------
//fetch(`/fetch?${urlQuery}`).then(async (res)=> {
// console.log("원본", res); // key값이 나오지 않음 파싱해야함
// console.log("파싱", await res.json());
// // 응답을 파싱해야함.
// // .json(), .text()
//})
// ---------------------------방법 3 (async / await) -----------------------------------
const originRes = await fetch(`/fetch?${urlQuery}`);
const res = await originRes.json();
console.log(res);
}4-2. fetch로 post 요청
function fetchPost() {
const data = getData();
if(!data) return;
// 원래는 content-type 기본값 사용 : application/x-www-form-urlencoded
// 하지만 fetch로 post 요청 시에 기본값을 사용하면 동작하지 않음.
// content-type을 applicaiton/json 형태로 변경
fetch("/fetch", {
method: "post",
headers: {
'content-type': 'application/json',
},
body: JSON.stringify(data), // data 객체를 json 형태로 변경
}).then((res)=> {
return res.json();
}).then((res)=> {
console.log(res);
$("#result").html(`fetch post 요청 성공 ${res.name}님 환영합니다.`)
})
}JSON
JSON : JavaScript의 Object를 기반으로 하는 텍스트 형식의 데이터
- JavaScript Object와 JSON 문자열을 서로 변환할 수 있도록 메서드 제공
• JSON.parse(): JSON 문자열을 JavaScript 객체로 변환
• JSON.stringify(): JavaScript 객체를 JSON 문자열로 변환const data = {name: "seeun", gender: "woman"}; const jsonData = JSON.stringify(data); console.log("json: ", jsonData); // 직렬화(객체 -> json) console.log("js object: ", JSON.parse(jsonData)); // 역직렬화(json -> 객체)
Sejong Univ.