jQuery [통신] ajax, post, load, getJSON, getScript

jQuery 통신

• ajax : 자바스크립트를 사용한 비동기 통신으로 클라이언트와 서버간에 데이터를 주고받음(json, xml 등)
• post, parseJSON : post 페이지 요청, 수신 데이터 JSON파싱
• load : 특정 영역에 동적 웹 페이지 요청 후 삽입
• getJSON : 동적으로 json파일 가져오기
• getScript : 동적으로 js파일 가져오기(단점 : 크롬디버깅이 힘듬)

 

ajax

//파라미터
var action = 'test1';
var param1 = 1;
var param2 = 'param';
var aryParam = [ 'a', 'b', 'c' ];


jQuery.ajaxSettings.traditional = true;//Array 파라메터 넘길때 필요
$.ajax({
  url: "/srctree/TestServlet",
  type: "POST",
  async: true,
  data: {
    "action":action,
    "param1":param1,
    "param2":param2,
    "aryParam":aryParam
  },
  dataType: "json"
}).done(function(recv){
  //응답
  if(recv["result"] == "fail") {
    alert(recv["msg"]);
  } else {
   //...
  }
});
 
//서블릿에서 수신
String action = request.getParameter("action");
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");
String[] aryParam = request.getParameterValues("aryParam");

 

post, parseJSON

$.post('srctree.php', function (data) {    
    var jsonData = $.parseJSON(data);
    //처리...
});

 

load

$("#dynamicDiv").load("/page1.html", function(responseTxt, statusTxt, jqXHR){
    if(statusTxt == "success"){
      alert("New content loaded successfully!");
    }
    if(statusTxt == "error"){
      alert("Error: " + jqXHR.status + " " + jqXHR.statusText);
    }
});

 

getJSON

$.getJSON("./datas.json", function(data) {
    $.each(data, function(index, item) {
        //...
    });
});

 

getScript

$.getScript("/srctree/myscript.js",
  function() {
    //...
  }
);