js ajax로 비동기 통신하기

기존 클라이언트가 서버에 요청을 할 때는 매번 전체 페이지를 새로 렌더링을하며 불편함을 줬었다.

=> AJAX는 이 불편함을 없애기 위해 등장한 것

=> 서버와 비동기적으로 http 통신을하며 일부 내용만 교체를 함 

---

ajax 기술의 핵심에는 XMLHttpRequest 객체가 있습니다.

이 객체를 통해 서버와 통신할 수 있습니다.

옛날 브라우저에선 XMLHttpRequest 객체대신 ActiveXObject를 쓴다네요

---

1. 기존 XMLHttpRequest 통신방법

const httpRequest = new XMLHttpRequest()

httpRequest.open("POST", "/examples/media/request_ajax.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("city=Seoul&zipcode=06141");

XMLHttpRequest객체로 연결할 서버정보, 헤더에 담을값, 바디에 담아보낼 값들을 설정해서 통신.

 

 

2. jquery $ajax 메소드 이용하기

 - XMLHttpRequest객체를 직접 만들지 않아도 되며 더 간단해짐

$.ajax({
    url: "서버주소ㅓ",                         // 클라이언트가 요청을 보낼 서버의 URL 주소
    data: { name: "핫크리스피햄버거" },        // HTTP 요청과 함께 서버로 보낼 데이터
    type: "GET",                             // HTTP 요청 방식(GET, POST)
    dataType: "json"                         // 서버에서 보내줄 데이터의 타입
})
.done(function(json) { //HTTP 통신이 성공시 수행
	//로직
})
.fail(function(xhr, status, errorThrown) { //HTTP 통신이 실패시 수행
	//로직
})

 

 

3. axios 사용하기

 - $ajax 메소드와는 달리 jquery를 이용하지 않아도되며 promise 기반임

 - data를 json으로 자동 변환기능

axios.post(`주소`, data) //http 통신 메소드를 정하고, 서버주소와 data를 명시
	.then(response => {  //통신이 이루어졌을 시 실행
		return this.tokenController(response);
	})
	.catch(error => { //통신이 이루어지지 않았을 시 실행
		console.log(error)  
	});