[Web] Ajax

1. Ajax

• HTML, CSS, 자바스크립 등 기존에 사용되던 기술과 함께 사용하기 위한 개발 기법

• Ajax 자체는 새로운 개발 언어가 아님

• 웹 페이지의 비동기 처리 방식을 위해 쓰임

• 비동기 처리라함은 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만 갱신할 수 있게 해줌

• 서버와 주고받는 데이터 객체를 XMLHttpRequest(XHR)라고 함

• XMLHttpRequest(XHR)로 가져올 수 있는 데이터 형태는 JSON 혹은 XML

• jQuery ($.ajax)를 사용

2. Ajax 동작 원리

• 자바스크립트(JavaScript)를 통해 웹 서버와 통신

Ajax를 이용한 웹 동작 흐름도

3. 답변 추가 Ajax 예시

 function addAnswer(e) {
    e.preventDefault();

    var queryString = $("form[name=answer]").serialize();

    var url = $(".answer-write").attr("action");
    console.log("url : " + url);

    $.ajax({
        type : 'post',
        url : url,
        data : queryString,
        dataType : 'json',
        error: function () {
            console.log('failure');
        },
        success : function (data, status) {
            console.log(data);
        }
    });
}

4. Ajax 옵션

속성명	설명	자료형	예시
type	HTTP 요청 방식 (GET,POST,PUT,DELETE)	String	type : "post"
url	요청할 URL 기입	String	url : "/api/questions/1/answer"
data	서버에 보낼(요청할 URL에 보낼) 파라미터 기입	Object, String	data : formData (파일 객체로 보낼 경우)   data : $("form[k=v]").serialize(); (queryString 으로 보낼 경우)   data : JSON.stringify(Object) (Object를 JSON 문자열로 변환하여 보낼 경우)
dataType	서버로부터 응답받을 데이터 타입을 선택(XML,JSON,TEXT,HTML 등)	String	dataType : "json" (JSON 포맷 데이터)   dataType : "xml" (xml 타입)
contentType	서버에 보낼 데이터 타입을 선택 default값은 "application/x-www-form-urlencoded; charset=UTF-8" (application/x-www-form-urlencoded는 queryString 형태)	String	contentType : "application/json" (JSON 포맷 데이터)
success	요청 및 응답에 성공했을 때 행위를 기입	function
error	요청 및 응답에 실패했을 대 행위를 기입	function