Ajax정리

Ajax의 개요 (Asynchronous Javascript And Xml) 

- 비동기 Javascript와 XML을 말한다.

   (응답을 기다리지 않는데, 응답이 바로 올 때도 있고 그렇지 못할 때도 있어서 순서대로 처리하지 않는다)

   (Java는 동기 - 서버에게 요청을 하면 반드시 응답을 받아야 한다. / 순서대로 처리할 수 있다.)

- Javascript로 원격지로부터 데이터를 읽어오는데 필요한 처리 기술들의 집합체를 뜻한다.
- HTML, CSS, DOM, **XMLHttpRequest 객체의 집합체이다.
- XMLHttpRequest 객체를 사용하여 서버로부터 데이터를 가져오고, 그 내용을 페이지에 반영해 
  주기 위해, HTML태그 요소를 제어하는 DOM객체에 대한 처리 및 CSS처리를 병행한다.
- 페이지 일부분을 업데이트하기 위한 정보를 서버에 요청할 수 있다.
- 서버로부터 받은 데이터로 작업을 한다.

 

● 기존의 웹 페이지 구현 방식

 

● Ajax가 적용된 구현방식 - 페이지가 이동하지 않고 결과화면이 밑에 뿌려진다

 

jQuery의 Ajax 함수 - Ajax만 독립적으로 쓰지 않는다.

(1) 기본 사용 방법

- jQuery는 $.ajax() 함수를 사용한다. (jQuery.ajax() 라고 써도 됨)
- $.ajax() 함수에서 파생된 load(), $.get(), $.post(), $.getJSON() 등을 통해 상황에 따라 사용한다.

(2) $.ajax() 함수의 사용

- jQuery에서 사용되는 모든 Ajax 관련기능들은 $.ajax() 함수에서 시작된다.
- 기본 사용 방법
  => $.ajax() 함수에 웹서버로 보내기 위한 요청 설정 정보, 통신에 성공했을 경우에 실행될 함수, 
     통신에 실패했을 경우 실행될 함수를 설정한다.

 

 $.ajax({
      url : "접속할 페이지 주소",
      type : "get / post", ($.ajax()는 get인지 post방식인지 모르니까 알려줘야 한다)
      data : "파라미터 문자열 key=value&key=value", (보낼 데이터가 없으면 안써줘도 괜찮다)
      dataType : "text / xml / json / jsonp",
      timeout : 제한시간(밀리세컨단위),
      cache : 이전 요청에 대한 캐쉬 저장 여부 (true=사용함, false=사용안함),
      /** 통신이 성공한 경우 실행되는 함수 */
      success : function(data) {
         ......
      },
      /** 통신이 실패한 경우 실행되는 함수 (주소 오타, 웹서버 중지 등) */
      error : function(xhr, textStatus, errorThrown) {
         .....
      }
   });

 

(3) 사용 이유

 

기본적으로 HTTP프로토콜은 클라이언트 측에서 요청(Request)를 보내고 Server 측에서 응답(Response)를

받으면 연결이 끊기게 되어있다. 화면에 나타나는 내용을 갱신하기 위해선 다시 요청하고 응답하면서 페이지 전체를 갱신하게 된다.

페이지의 일부만을 갱신할 경우에도 페이지 전체를 재로드해야 하기 때문에 낭비가 초래된다.

하지만, Ajax는 html 전체가 아닌 일부를 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 요청을 한다.

이 과정에서 JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 자원과 시간을 아낄 수 있는 것이다.