[jQuery - 기능 - (6) ] $.ajax(), $.getJSON → JSON 데이터

$.ajax()

//Create
function submit(){
    var reply = { author : $("#author").val(), comment : $("#comment").val() };
    
    $.ajax({
        type : 'POST',
        url : '/comment',
        contentType: 'application/json',
        
        data : JSON.stringify( reply ),
        //dataType 정의
        dataType: 'json',
        //요청결과가 성공일 경우
        success : function(data) {
            alert("success!");
            },
        //요청결과가 실패일 경우
        error : function(xhr, status, error){
            alert("Error!");
        }
    });
}

• 코드 10줄 : json 객체를 String으로 변환시킨다.
  참고 : JSON.parse() : String 객체를 json객체로 변환시킨다.
•  

Ajax

  Ajax(Asynchronous JavaScript and XML, 비동기식 자바스크립트와 xml)는 비동기적인 웹 애플리케이션의 제작을 위해 사용하는 웹 개발 기법이다.

• 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 화면의 전체 갱신없이 내부에서 서버와 통신을 하는 것을 말한다.
• 통신 후 리턴받는 데이터는 xml 또는 json 데이터타입이 되며 받은 데이터로 javascript에서 ui조작을 하여 전체갱신없이 ui의 일부분만 동적인 변경이 가능하게 된다.
• 이는 페이지 요청 후 화면이 전체갱신되면서 html이 랜더링되는 일반적인 웹프로그래밍 방법과는 다르며, 윈도우 클라이언트 프로그램과 더 비슷한 방식이기도 하다.

▶ jquery를 이용해서 ajax를 사용하는 이유

  일반 javascript로  ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데 jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 된다. 그리고 여러 브라우저에서 똑같이 동작한다는 장점이 있다.

  Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 하는데,그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)이다.

 

 

$.getJSON

$.getJSON(
    URL, //호출 URL
    jQuery("#baseFrame").serialize(), //넘길 데이터
    function(resultData){ //return 데이터 처리
 if(resultData.returnString== "Success"){ //json 형식에 따라 수정.
      alert(!"성공적으로 삭제하였습니다.");
  }else{
      alert(!"실패하였습니다.");
  }
});

• 코드 3줄 : https://whitekeyboard.tistory.com/190?category=809483 ( .serialize() 설명 )
•  

 

▶ $.getJSON vs $.ajax 비교

  결론부터 말하자면 거의 같다.
$.getJSON ()은 dataType이 “json”으로 설정된 $.ajax ()와 같다.$.getJSON ()은보다 광범위한 $.ajax ()의 단축형 일뿐이다.