AJAX

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

• Asynchronous JavaScript And XML
• 프로그래밍 언어가 아님
• 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식
  • 비동기: 데이터 전송하고 응답을 기다리지 않음 (동기: 기다림)
• 전체 페이지를 다시 로드 하지 않고 웹 페이지의 일부를 업데이트할 수 있음
• 브라우저가 기본 객체인 XMLHttpRequest를 이용해서 웹서버로 데이터 요청
  • MDN XMLHttpRequest
  • Request: 사용자가 요청 (ex: 오늘 날씨 어떠니?)
  • Response: 서버가 응답 (ex: 오늘 날씨 흐려구려)

동작 원리

Browser	Internet	Server	Internet	Browser
1. 이벤트 발생 2. JS에서 XMLHttpRequest객체 생성 3.XMLHttpRequest객체가 웹서버에 request를 전송	▶	4. 서버가 Request처리 5. 서버가 웹페이지로 Response전송	▶	6. js로 response읽기 7. js로 페이지 업데이트등 동작 수행

서버 Request

• XMLHttpRequest 객체는 전체 페이지를 다시 로드하지않고 웹페이지의 일부를 업데이트할 수 있게함

var xhttp = new XMLHttpRequest();

속성

• onreadystatechange
  • readyState 값이 변경될 때 호출할 함수 정의
• readyState
  • 0: 요청준비
  • 1: 서버 연결 완료
  • 2: 요청 받음
  • 3: 요청 처리중
  • 4: 요청 처리 완료 후 응답 준비
• responseText
  • 서버로부터 반환된 응답 정보 (문자열)
  • ex) SQLException 발생시 오류내용을 console.log나 alert으로 찍을 때
• responseXML
  • 서버로부터 반환된 응답 정보 (XML)
• status
  • 요청에 대한 상태 코드
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"
• statusText
  • 요청에 대한 상태 문자

메소드

• new XMLHttpRequest()
  • XMLHttpRequest 객체 생성
• getResponseHeader(key)
• open(method, url, async, user, pw)
  • 요청 설정
  • method: 요청 유형(GET/POST)
  • url: 호출할 URL
  • async: 비동기 호출 여부 (true/false)
• send() : GET 방식
• send(string) : POST 방식
• setRequestHeader()
  • 요청 header에 정보 설정

예제

GET 방식 요청

var xhttp = new XMLHttpRequest();

xhttp.open("GET", "ajax_test.jsp?name=홍길동&age=30", true);
xtthp.send();

POST 방식 요청

var xhttp = new XMLHttpRequest();

xhttp.open("POST", "ajax_test.jsp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhtthp.send("name=홍길동&age=30");

서버 Response

속성

• responseText: 문자열 형식의 응답 정보 반환
• responseXML: XML 형식의 응답 정보 반환

메서드

• getResponseHeader(key): header정보 중 지정된 정보만 반환
• getAllResponseHeaders: 모든 header 정보를 반환

예제

응답

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
  if(this.readyState == 4 && this.status == 200) {
    res = this.responseText;
    resjson = JSON.parse(res);
  }
}

xhttp.open("GET", "ajax_test.jsp", true);
xhttp.send();

• readyState == 4 && status == 200 : 성공

jQuery AJAX

$("#execute").click(function() {
  $.ajax({
    url: "./time2.jsp"
    , type: "post"
    , data: $("form").serialize()
    , dataType: "json"
    , success: function(data) {
      $("#time").text(data);
    }
    , error: function() { }
  })
});

• data
  • 서버로 데이터를 전송할 때 사용
• dataType
  • 서버측에서 전송한 응답데이터를 어떤 형식의 데이터로 해석할 것인가를 지정
  • xml, json, script, html, text
• success
  • 성공했을 때 호출할 콜백을 지정한다
  • function( PlainObject result, String textStatus, jqXHR)
• type
  • 데이터를 전송하는 방법을 지정: get, post
• error
  • 실패했을 때 호출할 콜백을 지정
  • 실제 시스템 상 에러 -> if-else처럼 코드 쓰면 안됨
  • function(jqXHR xhr, String status, String error)

단축메뉴

• $.get(url, data, success, dataType);
• $.post(url, data, success, dataType);
• $.getJSON(url, data, success);

load()

• 서버에서 데이터를 받아서 특정 요소에 넣는다
• $(selector).load(URL, data, callback);
  • URL: 필수값, 로드 할 URL
  • data: 서버로 전송할 data
  • callback: load() 작업이 완료된 후 수행할 작어

serialize(), serializeArray()

• AJAX를 이용해서 데이터를 보낼 때는 서버가 이해할 수 있는 형식으로 바꿔야함
• 데이터를 직렬화해서 하나의 객체로 만든 후 request에 담아서 보냄
• jQuery에서 제공하는 직렬화 메소드는 serialize
• serialize()
  • $("form").serialize();
  • -> FirstName=길동&LastName=홍&age=30
• serializeArray()
  • $("form").serializeArray();
  • [{name:"FirstName", value:"길동"}, {name:"LastName", value:"홍"}, {name:"age", value:"30"}]

예제

201020Ex01_AjaxTest.html

function myFunctionAjax() {
  $.ajax({
    url: "201020Ex01_Data01_intro.jsp"
    ,type: "POST"
    ,cache: false // default true: 브라우저에서 파라미터값이 바뀌어야하는데 안 바뀔때 
    ,data: $("#myForm").serialize()
    ,dataType: "html"
    ,success: function(data) {
      $("#resultAjax").html(data);
    }
    ,error: function(jqXHR, textStatus, errorThrows){
      alert("에러\n" + textStatus + " : " + errorThrows);
    }
  });
}

• data, type: 사용자가 form 양식에서 입력한 값을 serialize()해서 객체로 만든 후 post 방식으로 서버에 전송한다
• dataType: 서버에서 리턴받아 사용자에게 보여줄 data는 html양식이다

201020Ex01_Data01_intro.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>INTRO POST방식</title>
</head>
<% 
request.setCharacterEncoding("UTF-8");

String name = request.getParameter("name"); // request: jsp파일의 기본객체
String age = request.getParameter("age"); // request: jsp파일의 기본객체
String job = request.getParameter("job"); // request: jsp파일의 기본객체
String hobby = request.getParameter("hobby"); // request: jsp파일의 기본객체
%>
<body>
  <p>
    안녕하세요 <span id="name"><%=name %></span>님!<br><br>
    당신은 <span id="age"><%=age %></span>년을 살면서<br><br>
    <span id="job"><%=job %></span>으로 번 돈을<br><br>
    몽땅 <span id="hobby"><%=hobby %></span>에 쓰셨군요!<br><br>
    <em>이 시대의 진정한 멋쟁이!</em>
  </p>
</body>
</html>

• <% %> 안의 소스는 자바 코드이다
• 객체의 값을 얻어오기 전 인코딩을 UTF-8로 설정해 주어야 한다.
  • jsp, html, request객체 셋의 인코딩이 모두 utf-8로 되어야함
  • get 방식은 decodeURI 이용하여 알아서 인코딩됨
• body안의 <%=name %>과 같은 부분에 자바 코드의 변수를 사용할 수 있다.