AJAX

[jsp기본 -> 이벤트 -> jquery -> 비동기서버통신(ajax)]
자바스크립트 공부단계 4가지중 마지막이다.

• Asynchronous javascript and xml 의 약자로써 영어 말 뜻 그대로
  자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버간의 XML이나 JSON 데이터를 주고 받는 기술이다.😁

AJAX를 사용해야 하는 이유는 다음과 같다.

• AJAX는 비동기 통신을 가능하게하는데 이것은 페이지를 새로고침하지 않고도 서버와 데이터를 교환할 수 잇게 한다. 이는 웹페이지의 특정 부분만 업데이트 할 수 있게 한다.
  --> 대규모 웹 애플리케이션에서 효율적으로 데이터를 업데이트하고 렌더링할 수 있도록 도와준다.
• 데이터 포맷의 다양성: AJAX는 XML뿐만 아니라 JSON, HTML 및 다른 데이터 형식과도 통신할수 있다.
• 빠른 응답 시간 : AJAX를 사용하면 데이터를 비동기적으로 요청하고 받을 수 있기 때문에 웹페이지가 빠르게 응답하고 사용자가 더 높은 속도로 상호작용할 수 있게 된다.

렌더링 ❔ : 데이터나 정보를 시각적으로 표현하는 과정(그래픽 처리과정)

위 그림에서 XMLHttpRequest는 JavaScript에서 제공되는 객체로 코드에 드러나진 않지만 자동으로 브라우저와 서버간의 통신을 할 수 있게 API를 제공한다. 이 XMLHttpRequest 객체를 사용하여 서버로 데이터를 요청하고 응답을 받아 올 수 있다.

동기, 비동기

동기는 작업을 순차적으로 처리하고 기다리는 반면, 비동기는 병렬적으로 처리하고 중간에 다른 작업을 실행한다.

Ajax 형식

$.ajax({
    type: "post 또는 get",
    async:"true 또는 false",
    url: "요청할 URL",
    data: {서버로 전송할 데이터},
    dataType: "서버에서 전송받을 데이터형식",
    success:function (data,textStatus){
       //정상 요청, 응답 시 처리
    },
    error: function(xhr,status,error){
       //오류 발생 시 처리
    },
    complete:function(data,textStatus){
      //작업 완료 후 처리
     }
});```

data속성은 서버로 보낼 데이터이고 success속성의 data는 서버에서 받아오는 함수이다.