AJAX 기본 원리 및 XMLHttpRequest 구현

Source

  • Evernote/IFTTT Feedly/ajax 원리.md

Summary

이 문서는 AJAX(Asynchronous JavaScript and XML)의 기본 동작 원리를 설명하며, 브라우저 호환성을 고려한 XMLHttpRequest 객체 생성 함수와 비동기 HTTP GET 요청을 처리하는 processAjax 함수의 자바스크립트 코드를 제시합니다. AJAX 기술이 Microsoft의 ActiveXObject에서 시작되어 모질라에서 XMLHttpRequest로 발전한 역사적 배경을 간략히 언급하고, jQuery.ajax 사용법 등 후속 연재 내용을 예고합니다.

Key Points

  • AJAX는 Microsoft의 ActiveXObject에서 기원하여 모질라에서 XMLHttpRequest 객체로 표준화되었습니다.
  • 브라우저 호환성을 위해 window.XMLHttpRequest 존재 여부와 window.ActiveXObject(Msxml2.XMLHTTP, Microsoft.XMLHTTP)를 순차적으로 확인하는 객체 생성 로직이 필요합니다.
  • 비동기 통신은 XMLHttpRequest 객체의 onreadystatechange 이벤트 리스너를 통해 readyState 4(완료) 및 status 200(성공) 시 콜백 함수를 실행하는 방식으로 구현됩니다.
  • 요청 시 URL에 현재 시간(new Date().getTime())을 파라미터로 추가하여 브라우저 캐시 문제를 방지하는 패턴이 사용됩니다.