프로그래밍 기초 공부

AJAX란?

alclssha 2022. 10. 17. 04:00

열아홉 번째로 포스팅하게 될 내용은 AJAX에 대한 내용입니다.

 

[ AJAX란 ]

  • JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
  • 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도
  • 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술
  • 자바스크립트를 통해서 서버에 데이터를 요청하는 것

 

[ 비동기 방식이란 ]

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식 
Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있음

 

[ 비동기 방식의 장점 ]

페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점


[ AJAX를 사용하는 이유 ]

  • WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용
  • HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊김
  • 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 됨
  • 그렇지만 위의 경우 엄청난 자원낭비와 시간낭비를 초래할 것
  • AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request함
  • 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있음

 

[ JAX를 사용 가능하게 만드는 것들 ]

  • AJAX라는 기술은 여러가지 기술이 혼합적으로 사용되어 이루어짐
    • HTML
    • DOM
    • JavaScript
    • XMLHttpRequest
    • Etc

 

[ AJAX의 진행과정 ]

  1. XMLHttpRequest Object를 만든다.
    • request를 보낼 준비를 브라우저에게 시키는 과정
    • 이것을 위해서 필요한 method를 갖춘 object가 필요함
  2. callback 함수를 만든다.
    • 서버에서 response가 왔을 때 실행시키는 함수
    • HTML 페이지를 업데이트 함
  3. Open a request
    • 서버에서 response가 왔을 때 실행시키는 함수
    • HTML 페이지를 업데이트 함
  4. send the request

 

[ Ajax의 장점 ]

  1. 웹페이지의 속도향상
  2. 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능
  3. 서버에서 Data만 전송해면 되므로 전체적인 코딩의 양이 줄어듬
  4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해줌
    •  사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있음

 

[ Ajax 의 단점 ]

  1. 히스토리 관리가 안 됨 (보안에 좀 더 신경을 써야함)
  2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있음
  3. XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않음
  4. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 됨

[ Ajax의 한계 ]

  1. Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없음
  2. Ajax로는 바이너리 데이터를 보내거나 받을 수 없음
  3. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없음
  4. 클라이언트의 PC로 Ajax 요청을 보낼 수는 없음

 

[ Jquery와 Ajax ]

  • 일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데
  • jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 돰
  • jquery ajax를 사용하면, HTTP Get방식과 HTTP Post방식 모두를 사용하여 원격 서버로부터 데이터를 요청할 수 있음
  • Jquery는 Ajax처럼 JavaScript의 라이브러리 중 하나인데 자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것