Asynchronous JavaScript and XML
자바스크립트를 통해 서버에 데이터를 비동기 방식으로 요청
웹페이지를 리로드(Reload)하지 않고 데이터를 불러오는 방식이며
Ajax를 통해서 서버에 Request(요청)한 후 멈춰있는 것이 아니라
그 프로그램은 계속 돌아간다는 의미를 내포하고 있음
페이지 리로드의 경우 전체 리소스를 다시 불러와야 하는데 img, css, js 등 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만, 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점
1) 서버와 클라이언트 입장에서의 장점
서버쪽에서는 페이지 전체를 보내지 않아도 되니 자원(시간과 돈)을 아낄 수 있음
클라이언트 쪽에서는 사용자가 변경되는 부분에만 집중할 수 있기 때문에 더 나은 사용자 경험을 제공할 수 있음
2) 작업하는 개발자 입장에서의 장점
수정해야 하는 부분이 있다면 모든 페이지에서 일일이 고쳐주지 않아도 됨. 즉 일의 생산성이 높아짐 (바뀔 수 있는 부분과 고정되는 부분을 구분해서, 바뀔 수 있는 부분만 따로 Ajax로 동적으로 바꿔주는 식으로 일하기 때문)
HTML, DOM, JavaScript, XMLHttpRequest 등 여러가지 기술이 혼합적으로 사용되어 이루어짐
Ajax를 통해 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 응답받을 수 있음
1) XMLHttpRequest Object를 만든다.
Request를 보낼 준비를 브라우저에게 시키는 과정
이것을 위해서 필요한 Method를 갖춘 Object가 필요함
2) Callback 함수를 만든다.
서버에서 Response가 왔을 때 실행시키는 함수
HTML 페이지를 업데이트 함
3) Open a request
서버에서 response가 왔을 때 실행시키는 함수
HTML 페이지를 업데이트 함
4) send the request
해당 요청을 전송
XMLHttpRequest 객체를 얻은 뒤, URL을 통해 요청하고 응답을 받으면
응답 결과에 맞는 함수를 실행하는 구조로 되어 있다.
Ajax가 효율적이라고는 해도 이렇게 하게 될 경우, 코드가 길어지기 때문에
jQuery에서 그 문제를 해결해주고 있다.
// This function gets invoked when server sends the response
function reqListener (e) {
console.log(e.currentTarget.response);
}
var oReq = new XMLHttpRequest();
var serverAddress = "https://hacker-news.firebaseio.com/v0/topstories.json";
oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();
var serverAddress = 'https://hacker-news.firebaseio.com/v0/topstories.json';
// jQuery의 .get 메소드 사용
$.ajax({
url: ,
type: 'GET',
success: function onData (data) {
console.log(data);
},
error: function onError (error) {
console.error(error);
}
});
위의 예제는 자바스크립트를 이용하여 특정 서버에 요청을 보내고 그에 대한 자료를 성공적으로 받아올 수 있음을 확인해볼 수 있다. 위 예제에서는 XMLHttpRequest를 이용하여 요청을 보냈지만 일반적으로는 아래와 같이 jQuery나 기타 AJAX 기능이 내장되어 있는 라이브러리를 이용하여 AJAX 요청을 처리한다.
var xhr= new XMLHttpRequest();
xhr. onreadystatechange = function(){
if(xhr.readyState===4){
document.getElementById(‘ajax’).innerHTML= xhr.responseText;
}
}
xhr.open(‘GET’,”sidebar.html”); // html메소드와 URL을 보낸다. (open함수는 준비를 시키는것이지 보내는 것은 아니다.)
xhr.send();
위의 예제는 AJAX가 XHR객체를 형성하고 이 객체의 콜백을 만들고 HTML메소드와 URL을 결정한 뒤, XHR객체의 메소드로 정보를 보내는 방식이다.
출처
https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
https://blog.naver.com/cookr3/222209320809
https://opentutorials.org/course/3281