7. Jquery로 AJAX 사용

$.ajax(settings)

• jQuery를 이용한 ajax통신의 가장 기본적인 API
• 주요속성
  • data : 서버에 전송할 데이터, key/value 형식의 객체
  • dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
  • type : 서버로 전송하는 데이터의 타입 (POST, GET)
  • url : 데이터를 전송할 URL
  • success : ajax통신에 성공했을 때 호출될 이벤트 핸들러

**Ajax Events**
jquery는 Ajax가 실행되는 순서(event)를 나누고
Event에 맞춰 CallBack Function을 지정 가능
 
**구조**
ajaxStart
    beforeSend
        success(statusCode=200) 또는 error
    complete
ajaxStop
 
**get() .post .load() 등 ajax 줄여 사용하는 메소드들이 많이 있다.
.load(url, data, complete)
.get/post(url, data, success, dataType)

[기본 사용 형태]

var settings = {
        url: "index.html",
        contentType: "multipart/form-data;",
        data: $("form[name=testForm]").serialize(),
        type: "GET",
        beforeSend: function(jqXHR, settings){},
        success: function(data, textStatus, jqXHR){},
        error: function(jqXHR, textStatus, errorThrown){},
        complete: function(jqXHR, textStatus){}, //success/error 후 콜백함수
        statusCode: {404: function(){alert("잘못된 요청");}}
}
 
$.ajax(settings);

<data 넘기는 다른 형태>

1)

data: { name: "John", location: "Boston"},

data: "name=John&location=Boston",

결과: index.html?name=John&location=Boston */

2)

 

contentType: "application/json"

dataType: "json"

data: JSON.stringify({name:"John", location:"Boston"})

예제: 댓글 기능 $.ajax(settings)로 구현

1) 기본 settings 설정

 
var contextPath = "${requestScope['javax.servlet.include.context_path']}";
   var settings = function() {
      this.url = contextPath;
      this.type = "GET";
      this.dataType = "json";
      this.success = function(data) {
      };
      this.statusCode = {
                         400 : function() {
                           alert("잘못된 요청입니다.")
                         },
                         404 : function() {
                           alert("없는 url입니다.")
                         }
      }
   }
 

2) 댓글 로드(댓글List + 페이지List)

var loadComments = function(paraPage) {
            var loadSet = new settings(); //settings JSON 객체 생성
            var page = (paraPage) ? paraPage : 1;
            loadSet.url += "/comments/${param.board_num}/" + page;
            loadSet.success = function(data) {
                commentList(data["list"]);
                pagingLoad(data["paging"]);
            }
            $.ajax(loadSet);
        }

2-1) 콜백함수1(댓글 목록)

function commentList(data) {
            var tbodyData = $("#commentsList .data");
            var tbodyList = $("#commentsList .list");
            tbodyList.html("");
            $.each(data, function(index, item) {
                tbodyData.find(".num").text(item.num);
                tbodyData.find(".mem_num").text(item.mem_num);
                tbodyData.find(".mem_id").text(item.mem_id);
                tbodyData.find(".mem_name").text(item.mem_name);
                tbodyData.find(".content").text(item.content);
                tbodyData.find(".indate").text(item.indate);
                tbodyData.find(".delete")
.html("<button onclick='javascript:deleteComments("+item.num+","+item.mem_num+")'>삭제</button>");
                tbodyList.append(tbodyData.html());
            });
        }

2-2) 콜백함수2(페이지 목록)

var pagingLoad = function(pagingJson) {
            var pagingSet = new settings();
            var pagingDiv = $("#pagingDiv");
            pagingSet.url += "/paging/scriptPaging";
            pagingJson["action"] = "loadComments";
            pagingSet.data = pagingJson;
            pagingSet.dataType = "html"; //success의 매개변수가 json 타입이므로 html로 수정
            pagingSet.success = function(data) {
                pagingDiv.html(data);
            }
            $.ajax(pagingSet);
        }

3) 댓글 추가

var addComments = function(formVal) {
            var addSet = new settings();
            addSet.url += "/comments/insert.do";
            var formData = {};
            $.each($(formVal).serializeArray(), function(index,item){
                formData[item["name"]] = item["value"];
            });
            addSet.data = JSON.stringify(formData);
            addSet.success = function(insertJson) {
                if (insertJson["insert"] > 0) {
                    alert("저장 성공");
                    loadComments();
                } else {//저장 실패시
                    if (insertJson["login"] == -2) {
                        var login = window.confirm
("로그인시 이용가능합니다. 로그인하시겠습니까?")
                        if(login){window.location.href= contextPath+ "/login.do";}
                    } else {
                        alert("저장 실패");
                    }                    
                }
            }
            addSet.type = "POST";
            //만약 json에 key 값이 없으면 addSet.contentType 오류 발생
            //이 오류는 아래와 같이 해결한다.
            addSet["contentType"] = "application/json";
            $.ajax(addSet);
        }

4) 댓글 삭제

var deleteComments = function(num, memNum) {
             var removeSet = new settings();
            removeSet.url += "/comments/" +num+"?mem_num="+memNum;
             removeSet.type = "DELETE";
             removeSet.success = function(deleteComment){
             if(deleteComment["delete"]>0){
                alert("삭제 성공");
                } else {
                    if (deleteComment["login"] === -2) {
                        var confirm = window.confirm
("로그인시 이용가능합니다. 로그인하시겠습니까?");
                        if (confirm) {
                            window.location.href = contextPath + "/login.do";
                        }
                    }
                    if (deleteComment["login"] === -3) {
                        window.confirm("작성자만 삭제 가능합니다. 로그인하시겠습니까?");
                    } else {
                        alert("삭제 실패");
                    }
                }
            }
            $.ajax(removeSet);
        }