jQuery의 Ajax API

jQuery의 Ajax API

• 참고 - Ajax란?(MDN 문서)

• 지원 API
  • $.ajax()
  • $.get()
  • $.post()
  • $.getJSON()
  • $(응답받은 내용을 추가할 부모태그).load()

• $.ajax로 xml 파일 요청하기

  // jQuery
  $(document).ready( function() {
     $.ajax('content/sample.xml', {
        success :  function(data) {                    
          $(data).find('testxml').each(function() { 
            $('body').append("<h1>"+$(this).find('name').text() + '</h1>');
            $('body').append("<h1>"+$(this).find('age').text() + '</h1>');
            $('body').append("<h1>"+$(this).find('kind').text() + '</h1>');
          });
        }
      });
  });
  

  • success: 성공했을 때 호출할 콜백을 지정
  • xml 파일을 요청하면 일일이 xml 태그를 find함수로 찾고 그 값을 append해줘야 해서 다소 번거롭다.
• <!--sample.xml 파일--> <?xml version="1.0" encoding="utf-8" ?> <testxml> <name>자바스크립트</name> <age>21</age> <kind>웹앱개발 전용 OOP 언어</kind> </testxml>

• $.ajax로 json 형식의 파일 요청하기
  • 기본적인 형식은 다를 것이 없다. 다만 JSON.parse()로 자바스크립트 객체로 파싱해줘야 한다.
  • xml과 다른 점은 일일이 태그를 find할 필요가 없어서 코드가 간단해진다는 점. 받아온 데이터를 $.each 메서드를 써서 한번에 값을 출력할 수 있다.
  •  
• $(document).on('ready', function() { $.ajax('content/samplejson.txt', { success : function(data) { var result = JSON.parse(data); $.each(result, function(key, value) { $('body').append("<h1>" +value + '</h1>'); }); } }); });
• $.getJSON으로 json 형식의 파일 요청하기
  • $.getJSON 메서드를 사용하면 파싱할 필요가 없어서 코드가 조금이나마 더 짧아진다.
  •  
• $(document).ready(function () { // there's no need to parse $.getJSON('content/samplejson.txt', function(data) { $.each(data, function(key, value) { $('body').append("<h1>" +value + '</h1>'); }); }); });

jQuery 사용할 때와 안 할 때 코드 비교

• 문제: AJAX를 사용하여 element 클릭시, 해당 element의 id를 쿼리스트링으로 서버에 보낸 뒤 이를 JSON 형태로 만들어서 리턴하기

• jQuery 사용하지 않는 경우
  • javascript

  function getA(id) {
      var el = document.getElementById(id);
      el.click(function() {
          var xhr = new XMLHttpRequest(); // ajax 통신을 위해 XMLHttpRequest 객체 만들기
          xhr.onload = function() {
              // 서버로부터 응답을 받은 뒤의 동작
              if(xhr.status == 200) {
                  // 이상 없음
                  var data = xhr.responseText;
                  alert(data);
                  var obj = JSON.parse(data);  // JSON 형식의 문자열을 자바스크립트 객체로 변환
                  document.querySelector('output').appendChild(obj.pid);
              }
          }
          // XMLHttpRequest 객체의 open(), send()로 요청
          // open(method, 요청 url, asynchronous 여부)
          // 요청 url에 쿼리스트링 pass
          xhr.open('GET', 'url?pid=' + id, true);
          xhr.send(); 
      })
  }
  

  • Servlet 파일

  package core;
  
  import java.io.IOException;
  import java.io.PrintWriter;
  
  import javax.servlet.ServletException;
  import javax.servlet.annotation.WebServlet;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  
  @WebServlet("/basket1")
  public class BasketServlet1 extends HttpServlet {
  	private static final long serialVersionUID = 1L;
  
  	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  		response.setContentType("application/json: charset=utf-8");
  		// pass 받은 쿼리스트링 저장 
  		String pid = request.getParameter("pid");
          // JSON 형태 문자열 만들기(API 써도 됨)
  		String result = "{\"pid\":\"" + pid  + "\"}";
  		PrintWriter out = response.getWriter();
  		out.print(result); 
  	}
  }
  

• jQuery 사용하는 경우
  • javascript
  • function getA(id) { $('#id').click(function() { $.getJSON('url?pid=' + id, function(data) { $('output').each(function(index, dom) { $(dom).text(data.pid); }) } }) }
  • 서블릿 파일 코드는 똑같음