Ajax에 대하여

JavaScript

Ajax에 대하여

Dodledd 2024. 4. 5. 14:04

오늘은 요즘 웹통신의 비약적인 발전을 가져온 Ajax에 대해 알아보려한다.

web은 Ajax로 인해 엄청나게 발전했다고 봐도 과언이 아니며 간단하게 요악하면

웹은 클라이언트가 서버에게 요청을 보내면 서버가 클라이언트에게 응답을 내려주는 식으로 동작한다.

하지만 여기서 클라이언트가 서버에서 응답을 받을 때 조그만한 간단한 창이라도 전부 새로고침해서 불러와야한다.

전부 새로고침한다는 뜻은 굳이 바꾸지 않아도 되는 요소들을 전부 들고가서 서버와 통신하여 가져오는 것이므로 이는 많은 리소스를 먹고 낭비이다.

반면엔 Ajax는 간단하게 몇가지만 집어주면 서버에 가서 부분적으로 값을 들고오기 때문에 차지하는 리소스가 적고 페이지를 다시 새로 그려줄 필요가 없이 부분적으로 그려줄 수 있다.

그래서 Ajax가 더욱 주목받은 것 같다.

Ajax는 Asynchronous JavaScript and XML의 약자이다.

JavaScript와 XML을 이용한 비동기적 정보 교환 기법이지만 요즘은 XML보다는 JSON을 주로 사용한다. (진짜 XML은 거의 안쓴다고 한다.)

Ajax의 장점

위에서 나온대로다. 페이지를 전체 load해야하는 것을 부분적으로 가능하게 해서 속도를 크게 올렸다.
비동기식 방식이라 코드를 처리하면서 기다리지않고 다음 코드도 실행 가능하다
서버에 data만 왔다갔다 하므로 코드의 양이 줄어든다.

Ajax의 단점

히스토리 관리가 되지 않는다.
페이지 이동없는 통신으로 보안상 문제 발생 가능성이 있다.
HTTP 클라이언트의 기능이 한정되어 있다.
script로 쓰여서 디버깅이 어렵다

억지로 쓰자면 더 많지만 그건 Ajax만의 단점이라고 보기 어려워서 적지 않았다.

솔직히 단점보다는 장점이 훨씬 메리트가 있어서 단점은 잘 보이지 않는 것 같다.

간단한 사용 예를 보자

Ajax는 자바스크립트에서의 Jquery를 사용해야 쓸 수 있기 때문에 library를 필수로 등록해줘야한다.

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    이름 : <input type="text" id="input1">
    나이 : <input type="number" id="input2">
    <button onclick="test();">제출</button>
    <script>
        function test(){

            $.ajax({
                url : 'http://localhost:----/aa/jqAjax.do',
                type : 'POST',
                data :{
                    name : $('#input1').val(),
                     age : document.getElementById("input2").value
                },
                success: function(result){
                    console.log("응답 : ")
                    console.log(JSON.parse(result))
                },
                error: function(){
                    console.log("요청실패")
                }
            })
        }
    </script>

사용법은 아주 간단하다.

$.ajax 부분에는 필수로 써줘야하는 값들이 있다.

$.ajax({
    url : '',  //<- 이동시킬 url (필수)
    type : 'POST', // <- 보낼 방식, type/method 둘 다 사용 가능 디폴드는  get
    data :{ // <- 보낼 데이터, json형식이 자주 쓰인다. (key) : (value) 세트로
        name : $('#input1').val(),
         age : document.getElementById("input2").value
    },
    success: function(result){ // <- 성공했을 시 실행시킬 코드
        console.log("응답 : ")
        console.log(JSON.parse(result)) 
    },
    error: function(){
        console.log("요청실패") // <- 실패했을 시 실행시킬 코드
    }
})

보낸 데이터는 url에 적어놓은 곳으로 가게 된다. (물론 url과 일치하는 이름을 가진 받아줄 sevlet이 존재한다면)

가서 request.getparameter() 메소드로 꺼내서 저장하여 JDBC 다루듯 하면 된다.

반대로 MVC의 과정이 끝나고 다시 view에 보여줘야할 땐 Gson을 사용해서 편리하게 보내면 된다.

response.setContentType("application/json; charset=UTF-8");
new Gson().toJson(list, response.getWriter());

그럼 여기서 Gson은 뭘까??

우리는 바로 위 코드에서 데이터를 다시 보낼 때 json형식으로 담아 보냈다. 이것은 보내려면 직렬화 과정이 필요한데,

직렬화 : 데이터를 바이너리 코드구조로 바꿔서 모두가 번역할 수 있게 만드는 것이다. String으로 쭉 이어버리는 느낌도 맞다. 쉽게 예를들면 자바코드 -> 바이너리 코드 가 되면 바이너리 코드는 다른 개발폼에서도 쉽게 사용할 수 있다. 파이썬 등등..

역직렬화 : 직렬화의 반대개념이다. 바이너리코드 구조로 바뀐 것을 우리가 사용하는 언어로 다시 바꿔주는 것이다.

이것을 알았다면 Gson을 이해할 수 있다.

gson은 json구조를 띄는 직렬화된 데이터를 JAVA의 객체로 역직렬화, 직렬화 해주는 자바 라이브러리 입니다. 즉, JSON Object -> JAVA Object 또는 그 반대의 행위를 돕는 라이브러리다.

직렬화와 역직렬화는 코드로 작성하면 여간 번거로운게 아니다. 객체 필드에 선언되어있는 변수만큼 적어줘야하기 때문에 늘어나면 늘어날 수록 점점 귀찮아진다.

라이브러리의 궁극적인 목적이 편의성을 위해 나온 것들이니까 Gson도 직렬화와 역직렬화를 편하게 해주기 위해 나온 라이브러리이다.

그럼 가져온 값을 어떻게 사용해야 할까?

값을 정상적으로 가져왔다면

    success: function(result){ // <- 성공했을 시 실행시킬 코드
        console.log("응답 : ")
        console.log(JSON.parse(result)) 
    },

secces: function(result) 즉 result에 값이 돌아왔을 것이다. 이값을 가지고 홈페이지에서 값을 뿌려주면 된다.

코드로 예를 보자

let str = ""
for(let reply of result){
    str += ("<tr>" + 
             "<td>"+reply.replyWriter+"</td>"+
             "<td>"+reply.replyContent+"</td>"+   
             "<td>"+reply.createDate+"</td>"+   
            "</tr>")
}

for문을 보면 우린 위에서 값을 받아온 result를 reply에 넣어놓고 값을 사용한다.

str은 그냥 태그와 값을 그대로 저장해서 우리가 원하는 돔 위치에 뿌려주는 것이다.

여기까지가 기초적으로 Ajax를 다루는 방법이였다.

이제 세미프로젝트에서 많은 부분을 차지하게 될테니 잘 복습해둬야겠다.