Ajax - 기초 - (1)

Ajax 기초 - (1)

 최근에 JSP를 사용해서 웹 프로젝트를 진행한 적이 있습니다. Ajax를 사용하면 편할 것을 페이지를 받아오는 방식으로 구현을 하다 보니 비효율적이다라는 생각이 들어 Ajax를 배움과 동시에 배운 것을 활용해보고자 블로그에 정리하려고 합니다. 나아가서 아이디 중복확인과 댓글 작성과 같은 예제를 통해서 어떻게 동작하는지 정리해보려 합니다.  처음 배우는 단계이니 기초적인 개념부터 살펴보겠습니다.

 

 

Ajax 란 ?

Asynchronous JavaScript And XML의 줄임말로 비동기 자바스크립트와 XML이라는 뜻입니다. 즉  Ajax는 자바스크립트와 XML을 사용하여 비동기 통신을 하는 것을 말합니다. 기존의 웹 방식은 웹 페이지 단위로 응답을 하는 방식입니다. 하지만 비동기 통신을 사용하게 되면 필요한 데이터만 응답받아 처리를 할 수 있어집니다. 또한 비동기 통신의 장점으로 동기 통신과는 다르게 요청 후 자신의 작업을 수행하고 서버가 응답할 경우 정보를 받아 처리를 할 수 있게 됩니다.  여기서 XML은 Ajax에서 데이터 통신용으로 사용되고 구조화된 데이터를 송, 수신하기 위해서 사용합니다. 초반에는 XML이 주로 사용되었다면 현재는 JSON이 주로 사용됩니다. 

 

 

Ajax 예제 코드

<script type="text/javascript">
    let xhr;
    function startAjax() {
        xhr=new XMLHttpRequest(); // Ajax 자바스크립트 객체
        xhr.onreadystatechange=callback; // 서버가 응답하면 실행될 함수
        xhr.open("get","AsynServlet");
        xhr.send();
    }
// 응답을 받아 실행할 함수.
    function callback(){
        if(xhr.readyState==4 && xhr.status==200){
            document.getElementById("resultView").innerHTML=xhr.responseText;
        }
    }
</script>
<form>
    <input type="text" name="userInfo">
    <button type="button" onclick="startAjax()">비동기방식테스트</button>
    <span id="resultView"></span>
</form>
    <hr>
    <textarea rows="50" cols="50"></textarea>
 

콜백함수 부분을 살펴보자 xhr.readyState : 4 서버로부터 데이터를 받은 상태임을 의미한다. 또한 xhr.status : 200 은 정상 수행을 의미한다. 하지만 위의 코드는 다른 방식으로 간단하게 표현이 가능하다. 

 

xhr.onload=function(){
    document.getElementById("resultView").innerHTML=xhr.responseText;
}

여기서 onload는 위에서 살펴봤던 것처럼 readyState가 4이고 status가 200 일 때 동작하는 이벤트이다.  또한 익숙하지 않을 수 있으나 위의 방식은 익명 함수를 이용하여 함수를 등록하는 것이다. 익명 함수와 그 보다 더 간단한 화살표 함수를 잠깐 살펴 보자.

 

<script type="text/javascript">
    
    // 아래 두 구문을 브라우저가 실행할 시점에는 infoDiv는 존재하지 않은 상태이므로 error 
    alert(document.getElementById("infoDiv"));//null
    alert(document.getElementById("infoDiv").innerHTML);//error
    
    // window.onload : 웹페이지가 완전히 로드된 후 발생하는 이벤트 
    //onload 이벤트 속성에 hi 라는 일반함수객체를 등록 
    
    window.onload=hi;
    function hi(){
        alert("hi "+document.getElementById("infoDiv").innerHTML);
    }
    
    //window onload에 익명함수(anonymous function)로 등록 
    
    window.onload=function(){
        alert("hi 익명함수 "+document.getElementById("infoDiv").innerHTML);
    }
    
    //window onload에 화살표함수(arrow function)로 등록 
    window.onload=()=>{
        alert("hi 화살표함수 "+document.getElementById("testDiv").innerHTML);
    }
</script>
<br><br>
<div id="testDiv">
익명함수와 화살표함수를 테스트 
</div>
</body>
</html>

위의 4~5번 라인만을 실행시켜 보면 alert() 함수가 실행이 되지 않는다. 아직 Div태그가 존재하지 않기 때문이다. 그렇다면 어떻게 해야 할까? 스크립트를 아래 써줘도 되지만  10~24번 라인처럼 window.onload를 이용하여 웹페이지가 완전히 로드된 후 발생하는 이벤트에 실행하고자 하는 함수들을 등록해주면 된다. 총 3가지 방법으로 등록한 것을 알 수 있다. 1. 일반함수객체를 등록하고 2. 익명함수로 등록 3. 화살표 함수로 등록하는 방법이 있다. 위와 같이 하면 정상적으로 alert() 함수가 실행되는 것을 알 수 있다.

 

 

Ajax post 방식

 위의 예제 코드에서 살펴본 방식은 get방식이다. 그렇다면 post 방식을 살펴보자. post 방식은 get방식과는 다르게 content type을 설정해줘야 한다. 이는 Ajax 방식이 아닌 동기 통신에서도 post 방식에서 처리하는 과정과 비슷하다.

<script type="text/javascript">
    function startAjax() {
        let m=document.getElementById("message").value;
        if(m==""){
            alert("등록할 메세지를 입력하세요");
            return;
        }
        let xhr=new XMLHttpRequest();        
        xhr.onload=function(){
            alert(xhr.responseText);
        }        
        //ajax 통신을 위한 정보할당 
        xhr.open("post", "AjaxPostServlet");
 
        //ajax post 방식일 때 content type을 지정해야 한다. 
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencow");
        xhr.send("message="+m);
    }
</script>
<input type="text" id="message" placeholder="메세지">
<button onclick="startAjax()" type="button">post ajax test</button>
</body>
</html>

---

https://velog.io/@miyoni/TIL15