Ajax 정리

Ajax란 ?

• 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술을 의미함

무슨 말인지 너무 어려웠다.
비동기식,동기식 부터 정리해보자.

동기식

함수를 실행 했을 경우 함수가 끝날때까지 그 함수의 결과(값)를 기다리는 것,
값이 꼭 필요하고 값을 이용해 다음으로 진행해야 할 경우 동기식.

비동기식

함수를 호출 했을 때 결과를 기다리지 않고 바로 다음 함수로 넘어간다.
동기식과 반대로 함수를 호출하고 수행 여부와 상관없이 지나가도 상관없는 경우 비동기식으로 이루어진다. 지나간 함수의 결과는 콜백함수로 결과를 받아 마무리한다.

Ajax?

웹 서비스를 이용 할 경우 사용자가 원하는 정보가 있으면 서버로부터 받아서 보여준다. 예를 들어 사용자가 유튜브를 이용할 경우 동영상을 서버로부터 받아 볼 수 있다. 이 서비스를 위해 개발자는 서버로부터 데이터를 요구해 가져와서 HTML에 보여주는것이다. 그 데이터를 받는 방법에는 여러가지가 있다.

• URL로 GET요청
• form태그로 주소를 넣고 GET요청 전송

이 경우에는 전부 홈페이지가 새로고침하여 작동한다. 하지만 Ajax를 사용하면 웹의 새로고침 없이 GET 요청을 하여 데이터를 받아오는 js코드이다.
ex) 무한스크롤, 버튼을 누르면 아래로 내려오는 리뷰,

Ajax를 이용하면 부드럽게 동작하는 웹 서비스를 만들 수 있다.

Ajax 요청 방식

1. 예전 js 방식

var xmlHttp = new XMLHttpRequest();       
xmlHttp.onreadystatechange = function() { 
    if(this.status == 200 && this.readyState == this.DONE) {    
        document.getElementById("text").innerHTML = xmlHttp.responseText;       
    }

};
xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);
xmlHttp.send();

2.fetch API

fetch('https://jsonplaceholder.typicode.com/todos/1') //url로 fetch 요청
	.then((response)=>response.json()) // fetch 응답 객체를 받음
	.then((json)=>console.log(json))	//json응답 객체를 순수 js객체로 변환

XMLHttpRequest 보다 훨씬 간단한 것 같다.

JSON.stringify(obj) / JSON.parse(json) 로 json객체와 js객체 변환이 가능하다.

3. react나 vue 환경에서는 axios 를 설치해서 많이 사용한다고 한다.

react,vue를 공부하면서 axious도 같이 알아봐야겠다/!!