[JavaScript] XmlHttpRequest을 이용한 ajax (Asynchronous Javascript And XML)

Ajax

Ajax를 통해서 우리는 비동기적으로 서버와 통신할 수 있습니다. 즉 어떤 액션이 있을 때마다 계속 새로고침(로딩)하지 않고 그 액션의 부분만 갱신할 수 있습니다. 

 

 상황을 하나 얘기해보자면, 네이버TV로 웹드라마를 재밌게 보고 있는데 밑에 댓글창에 댓글을 달려고 합니다. 그런데 비동기적으로 통신이 안되면 댓글 작성 후 등록 버튼을 누르면 서버에 요청이가고 그 처리한 후 새로운 데이터를 클라이언트로 전송합니다. 그러면 브라우저는 새로고침이 되고 보던 영상은 끊깁니다. 슬프게도 다시 광고를 봐야할 수도 있습니다. 하지만 Ajax로 댓글 부분만 비동기적으로 갱신하면 댓글 부분만 업데이트 할 수 있게되고 웹페이지 전체를 새로고침 안하고 영상을 볼 수 있습니다.

 

Ajax의 장점

• 페이지 이동없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

 

Ajax의 단점 (장점이 있으면 단점도 있습니다.)

• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
• HTTP 클라이언트의 기능이 한정되어 있다.
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 디버깅이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
• 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

 

[출처] https://ko.wikipedia.org/wiki/Ajax  

 

이러한 Ajax는 굉장히 많이 사용되고 있습니다. 그리고 서버 - 클라이언트간의 데이터 교환을 할 때 표준적인 데이터 포맷(약속)이 있어야 하는데 Ajax를 위한 대표적인 포맷으로 JSON 포맷을 많이 사용합니다

 

 

Ajax 실행

 

밑의 코드에서는 임시의 서버를 통해서 실행했습니다. GET방법으로 local의 json파일로 요청했습니다. 

개발자도구의 Network에서 XHR(XMLHttpRequest)을 확인해보면 서버에서 요청한 info.json을 잘 받아온 걸 확인할 수 있습니다.

function ajax(){

const req = new XMLHttpRequest(); // ajax 전송을 위한 XMLHttpRequest객체 생성.

req.addEventListener('load', ()=>{
var jsonObejct = JSON.parse(this.responseText); // string to json 
console.log(jsonObject);
});

req.open("GET", "./info.json");

req.send(); // 서버로 전송

}

// ajax함수가 실행하면 open(), send()가 실행되고 끝난다. 콜스택에서 내려왔고

// 'load'이벤트가 생기면 서버에서 그 이벤트에 대한 응답이 실행된다.(콜백)



ajax()

 responseText로 서버에서는 key와 value로 된 JSON 형태는 String으로 보내줘야 네트워크를 통해 브라우저에 도착해서 보여줄 수 있습니다!

 그 문자열 데이터를 Object 객체 타입으로 바꿔서 데이터를 처리해야하는데 브라우저에서 지원해주는 JSON객체를 이용해주면 String ->JSON Object로 쉽게 변환할 수 있습니다 :>

 

 

 

[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다