Ajax란 무엇인가?

in JS on Ajax



ajax는 무엇인가?

Ajax는 뭔가?

Ajax는 JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고침하지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다. 즉 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있다.

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오늘 방식이다. 이 방식의 장점은 페이지를 리로드 할 경우에는 전체 리소스를 다시 불러와야 하는데 이미지, 스크립트, 기타 코드들을 모두 재요청할 경우 불필요한 리소스가 낭비가 되지만 비동기 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있다.

사용하는 이유

HTTP 프로토콜은 클라이언트 쪽에서 Request를 보내고 Server에서 response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해 다시 request-response를 하면서 페이지를 갱신하게 된다. 하지만 이 방법은 페이지의 일부분만 갱신할 때도 페이지 전체를 다시 로드해야 하는데 자원, 시간 낭비가 발생한다. 하지만 ajax는 html 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request를 한다.

이 경우 Json이나 xml 형태로 필요한 데이터만 받아 갱신할 수 있다. 이 방법을 이용하면 속도나 자원을 아낄 수 있을 뿐만 아니라 속도 면에서도 향상된 모습을 보인다.

장단점

장점

  1. 웹페이지의 속도향상
  2. 서버의 처리가 완료될때까지 기다리지 않고 처리 가능하다.
  3. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
  4. 기존 웹에서는 불가능했던 다양한 UI를 사용할 수 있게 한다. 예를들어 Flickr라는 사이트에서는 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.

단점

  1. 히스토리 관리가 안 되기 때문에 보안을 신경 써야 한다.
  2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
  3. XMLHttpRequest를 통해 통신하는 경우 사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 요청이 완료되지 않은 상태에서 사용자가 페이지를 떠나거나 오작동할 우려가 있다.

Jquery와의 시너지

일반 Javascript만으로 Ajax를 하게 되면 코딩량이 많아지고 브라우저별로 구현방법이 다른 단점이 있는데, jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 된다. Jquery ajax를 사용하면 HTTP Get과 HTTP Post 방식 모두를 사용해서 원격 서버로에 데이터를 요청할 수 있다. Jquery는 Ajax처럼 JavaScript 라이브러리 중 하나인데 자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것이다.

Ajax 사용예시

우선 AJAX데이터를 담을 Ex DTO 클래스이다.

public class Ex {
  String name;
  
  int age;
  
  public String getName() {
    return name;
  }
  
  public void setName(String name) {
    this.name = name;
  }
  
  public int getAge() {
    return age;
  }
  
  public void setAge(int age) {
    this.age = age;
  }
}

기본

AJAX의 최소화된 형태다. Data를 전송해서 필요한 로직들을 처리하고 값을 return한다.

@ResponseBody가 나오는데, @RequestMapping으로 String type을 반화하면, ViewResolver에서 정의한 prefix와 suffix가 return 값에 추가되어 view로 이동이 된다.

@ResponseBody를 사용하면 view를 생성해주는 것이 아니라, JSON/Object 형태로 데이터를 넘겨준다.

Client

$('#btn1').on('click', function() {
  var form = {
    name: "ex",
    age: 1
  }
  
  $.ajax({
    url: "requestObject",
    type: "POST",
    data: form,
    success: function(data) {
      $('#result').text(data);
    },
    error: function() {
      alert("simpleWithObject err");
    }
  });
});

Server

@RequestMapping(value="/requestObject", method=RequestMethod.POST)
@ResponseBody
public String simpleWithObject(Ex ex) {
  //필요 로직 처리
  return ex.getName() + ex.getAge();
}

View

<body>
  <button id="btn1">simpleAJAX</button>
  <div id="result></div>
</body>

image

Form 파라미터 넘기기

파라미터를 넘기기 위해 serialize() 함수를 사용한다. 필요한 로직 처리를 하고 마찬가지로 @ResponseBody 어노테이션을 사용해서 object 형태로 넘긴다.

Client

$('#btn2').on('click', function(){
      $.ajax({
          url: "serialize",
          type: "POST",
          data: $("#frm").serialize(),
          success: function(data){
              $('#result').text(data);
          },
          error: function(){
              alert("serialize err");
          }
      });
  });

Server

@RequestMapping(value="/serialize", method=RequestMethod.POST)
@ResponseBody
public String serialize(Ex ex) {
    //필요한 로직 처리   
    return ex.getName() + ex.getAge();
}

View

<body>
<form id="frm">
    name : <input type="text" name="name" id="name"><br>
    age : <input type="text" name="age" id="age">
</form>
    <button id="btn2">serialize</button>
    <div id="result"></div>
</body>

image

JSON.stringify()

AJAX에는 dataType이라는 옵션이 있는데, 설정을 안 해주면 MIME 타입에 의해 자동으로 설정이 된다. AJAX를 사용하는 예시를 보면 JSON.stringify()라는 함수를 많이 사용하는데, 이 함수는 type을 String 객체로 변환시켜 주는 역할을 한다.

서버쪽으로 데이터를 넘길 때, String 객체로 변환시켜주지 않으면 url의 get 파라미터 형식(?a=1&b=2)처럼 넘겨버린다.

하지만 stringify 함수를 그냥 사용하면 415에러가 뜨기 때문에 jackson 라이브러리를 추가해줘야 한다. 이는 pom.xml 파일에 추가해주면 된다.

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.5</version>
</dependency>

클라이언트 쪽에서 데이터를 JSON 형태로 보내주면, 서버 족에서도 JSON으로 받아줘야 한다. 이렇게 JSON 형태로 받게 해주는 어노테이션이 @ReuqestBody이다.

Client

$('#btn3').on('click', function(){
    var form = {
            name: "ex",
            age: 1
    }
    $.ajax({
        url: " stringify",
        type: "POST",
        data: JSON.stringify(form),
        contentType: "application/json; charset=utf-8;",
        dataType: "json",
        success: function(data){
            var txt = data.name + data.age;
            $('#result').text(txt);
        },
        error: function(){
            alert("stringify err");
        }
    });
});

Server

@RequestMapping(value="/stringify", method=RequestMethod.POST)
@ResponseBody
public Object stringify(@RequestBody Ex ex) {
    HashMap<String, Object> map = new HashMap<String, Object>();
    map.put("name", ex.getName());
    map.put("age", ex.getAge());
    return map;
}

View

<body>
    <button id="btn3">stringify</button>
    <div id="result"></div>
</body>

출처 https://coding-factory.tistory.com/143 https://myjamong.tistory.com/17