[Ajax] 에이잭스 비동기 통신 기술 소개 및 예시

 정보

• 업무명     : 에이잭스 비동기 통신 기술 소개 및 예시
• 작성자     : 이상호
• 작성일     : 2023-05-16
• 설   명      :
• 수정이력 :

 

 

 내용

[개요]

• 안녕하세요? 웹 개발 및 연구 개발을 담당하고 있는 해솔입니다.
• 오늘 포스팅에서는 에이잭스 비동기 통신 기술을 소개해 드리고자 합니다.

 

[특징]

• 웹 개발을 위해서 에이잭스 (Ajax)기술이 요구되며 이 프로그램은 이러한 목적을 달성하기 위한 기술서

 

[기능]

• Ajax 기술
• XMLHttpRequest 이해
• Ajax 작동 방식

 

[활용 자료]

• 없음

 

[자료 처리 방안 및 활용 분석 기법]

• 없음

 

[사용법]

• 없음

 

[사용 OS]

• Windows 10

 

[사용 언어]

• Java Script
• Ajax

 

 세부 내용

[Ajax 기술]

XML, HTML, CSS 및 Java Script를 결합하여 웹 어플리케이션을 효율/반응을 극대화 기술

• Ajax는 XHTML을 콘텐츠로 사용하고, CSS를 동적 콘텐츠 표시, Document Object Model 및 JavaScript와 함께 사용
• 전통적인 웹 애플리케이션은 동기식 요청을 사용하여 서버와 정보를 주고 받음. 예를 들어 사용자가 양식을 작성하고 제출을 선택하면 서버에서 새 정보로 새 페이지를 가져옴
• 반면에 Ajax를 사용하면 제출을 클릭하면 Java Script가 서버에 요청을 보내고 결과로 받은 응답 결과를 현재 화면에 업데이트함.
• XML은 일반적으로 서버 데이터를 수신하는 형식으로 사용되나 모든 형식(JSON 및 일반 텍스트 등 포함)을 사용 가능
• 웹 서버 소프트웨어와 독립적인 웹 브라우저 기술로서 클라이언트 프로그램이 백그라운드에서 서버에 정보를 요청하는 동안 사용자는 애플리케이션을 계속 사용 가능
• 또한 직관적이고 자연스러운 사용자 상호 작용이 가능하며 클릭없이 마우스 움직임만으로도 충분한 이벤트 트리거 제공
• 페이지 중심이 아닌 데이터 중심의 접근 방식을 제공

 

풍부한 인터넷 응용 기술

• 지금까지 가장 실행 가능한 RIA(Rich Internet Application) 기술
• 업계에서 엄청난 추진력을 얻고 있으며 여러 툴킷과 프레임워크가 등장
• 그러나 Ajax에는 몇가지 단점이 존재
  • (브라우저 간 호환성 문제) 각 브라우저가 JavaScript와 관련된 사항들을 다르게 해석/구현
  • (JavaScript 의존) Java Script를 비활성화하거나 지원하지 않는 브라우저에서는 Ajax 기능을 사용 못함
  • (유지관리/디버깅 어려움) Java Script로 작성된 코드는 복잡성이 높아질수록 어려움 존재

 

[XMLHttpRequest 이해]

• 클라이언트에서 서버 백그라운드로 데이터를 전송
• 서버에서 데이터를 수신
• 페이지를 다시 새로고침을 하지 않고 웹 페이지를 업데이트 수행

 

XMLHttpRequest 개체의 속성

• onReadyStateChange : readystate 속성이 변경될 때마다 호출 (동기식 요청에서는 미 작동)
• readyState : 요청 상태 구분(0~4 범위 값)
  
  • 0 : open() 메서드가 미 호출
  • 1 : open() 메서드가 호출되었으나 send() 메서드가 미 호출
  • 2 : send() 메서드가 호출되고 헤더 및 상태가 사용 가능
  • 3 : 응답의 일부 받음. 즉 responseText 속성에 데이터 저장
  • 4 : 요청 완료
• reponseText : 응답의 본문을 텍스트로 반환
• responseXML : 응답의 본문을 XML 문서 객체로 반환 (미 응답/파싱 오류 시 null)

 

XMLHttpRequest 개체의 메서드

메서드	설명
void open(method, URL)	지정된 HTTP 메서드 (GET, POST 등) 및 URL에 대한 요청
void open(method, URL, async)	위와 동일하나 비동기 여부를 지정
void open(method, URL, async, username, password)	위와 동일하나 사용자 이름과 비밀번호를 지정
void send()	서버로 비동기 요청
void send(string)	서버로 문자열을 포함한 요청
setRequestHeader(header,value)	요청 헤더 추가

 

[Ajax 작동 방식]

• 사용자는 화면 UI에서 특정 버튼을 선택
• Java Script에서 XMLHttpRequest 객체를 생성하고, 서버에 HTTP 메서드 (GET, POST 등) 및 필요한 데이터 요청
• 서버는 서버 사이드 스크립트 언어 (JSP, PHP, Servlet, ASP.net 등) 등을 사용하여 데이터베이스와 상호 작용
• 서버는 처리 결과를 데이터 형식 (XML 데이터 또는 JSON 데이터)으로 클라이언트로 반환 (XMLHttpRequest 객체에 연결된 콜백 함수)
• 콜백 함수는 이 데이터를 받아서 웹페이지의 특정 부분을 업데이트

 

 참고 문헌

[논문]

• 없음

[보고서]

• 없음

[URL]

• 없음

 

 문의사항

[기상학/프로그래밍 언어]

• sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

• saimang0804@gmail.com