유블로그

[Ajax] Ajax에 대하여 본문

기타

[Ajax] Ajax에 대하여

yujeong kang 2020. 9. 20. 21:54

- Ajax(Asynchronous JavaScript and XML)

  • 언어나 프레임워크가 아닌 구현하는 방식을 의미한다.
  • 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리한다.
  • 자바스크립트의 XMLHttpRequest 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회한다.
  • 동적으로 DOM 을 구성해야하므로 구현이 복잡하다.
  • 클라이언트 중심의 개발 방식이다.

- ajax 요청에 대한 응답

  • ajax 적용하면 event 발생시 서버에서 요청을 처리한 후 text, xml, json 중 하나로 응답한다.
  • client(브라우저)에서는 이 응답 데이터를 이용하여 화면 전환 없이 현재 페이지에서 동적으로 화면을 재구성한다.

- javascript ajax

  • XMLHttpRequest 는 자바스크립트가 ajax 방식으로 통신할 때 사용하는 객체이다.
  • 전송방식, 경로 등 전송정보를 포함한다.
  • 정확한 값을 받기 위해서 httpRequest.readyState == 4 인지 확인하여 데이터를 전부 받은 상태인지 확인 후, httpRequest.status == 200 을 확인하여 요청에 성공했는지 확인이 되면 해야할 일을 수행하는 방식으로 한다.
function getTime() { 
    sendRequest("1-03currenttime.jsp", null, viewTime, "GET");
}

function viewTime() {
    if(httpRequest.readyState == 4) {
        if(httpRequest.status == 200) {
            var time = httpRequest.responseText;
            var div = document.getElementById("curtime");
            div.setAttribute("class", "viewtime");
            div.innerHTML = time;
        }
    }
}

window.onload = function() {
    setInterval("getTime()", 1000);
}

 

- jquery ajax

  • 옵션
  • url : 대상 url
  • data : 요청 매개변수
  • type : get 또는 post
  • success : 성공했을때 수행할 함수
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    setInterval("viewTime()", 1000);
});

function viewTime() {
    $.ajax({
        url:"1-03currenttime.jsp",  
        type:"GET",
        success:function(response) {
            $("#curtime").addClass("viewtime").empty().append(response);
        },
        error:function(xhr,status,msg){
            console.log("상태값 : " + status + " Http에러메시지 : "+msg);
        }
    });
}

</script>