JQuery - Ajax

 https://api.jquery.com/ ----- jquery의 api문서

----------------------------------------------------------------------------------------------------

*Ajax(Asynchronous Javascript and XML)

:: 웹페이지가 서버와 비동기 통신을 하는 기술들의 집합체이다.(동기통신도 가능)

요악 ::: 페이지 전체가 아니라 일부분에서만 서버랑 통신해서 결과를 가져온다.

① 기본함수

$.ajax({옵션속성:값}); // jQuery.ajax();

options 에 대한 상세 내용 

1. url: 요청 URL(String) 

2. type: 사용할 HTTP 메서드, 일반적으로 POST 나 GET 을 사용(String) 

3. data: 요청에 전달되는 프로퍼티를 가진 객체(Object) 

4. dataType: 응답의 결과로 반환되는 데이터의 종류를 식별하는 키워드.

필요시 이 값을 통해 데이터를  콜백 함수로 전달하기 전에 어떤 종류의 후처리가 발생할지 결정한다          

-xml : 응답 텍스트는 XML 문서로 파싱되며, 콜백에 결과로 생성된 XML DOM 을 전달  

-html : 응답 텍스트는 처리 과정 없이 콜백 함수로 전달. 

반환된 HTML 코드에 잇는 모든 <script>블록이 평가된다  

-json : 응답 텍스트는 JSON 문자열로 평가되며, 생성된 객체는 콜백에 전달된다.  

-jsonp : 원격 스크립트를 허용한다는 점을 제외하고는 json 과 유사.  

-script : 응답 텍스트는 콜백에 전달. 응답은 모든 콜백의 호출보다 먼자 자바스크립트 구문으로 처리  

-text : 응답 텍스트는 일반 텍스트 

★★8. success: 응답이 성공 상태 코드를 반환하면 호출되는 함수. 

응답 본문은 이 함수의 첫 번째 매개변수로 전달되며, dataType 프로퍼티에 명시한 형태로 구성. 

두번째 매개변수는 상태값을 나타내는 문자열이며, 이 경우에는 항상 success다(Function) 

★★9. error: 응답이 에러 상태 코드를 반환하면 호출되는 함수. 

매개변수가 세 개 전달 되는데, 각각 XHR 인스턴스, 상태값이 항상 'error' 인 메시지 문자열, 

선택사항으로 XHR 인스턴스가 반환한 예외 객체이다(Function) 

$.ajax({
  url: '주소',
  type: 'get 또는 post',
  data: {
    // 보낼 데이터
  },
  dataType: 'json, xml, script, text 또는 html',
  done: function(response) {
    // 성공 시 동작
  },
  fail: function(error) {
    // 실패 시 동작
  },
  always: function(response) {
    // 성공하든 실패하든 항상 할 동작
  }
});

$.ajax로 시작해서

1.url : url 주소

2.type : get방식 / post방식

3.data : 보낼 데이터 명시

4.datatype : 맞출 데이터타입

5.success : 성공했을때 실행할 함수

6.error : 실패했을때 출력할 함수

$(document).ready(function(){
    $.ajax({
      type: "POST",
      url: "/someController",
      data: { name: "John", location: "Boston" },
      success:function( html ) {
        $( "#results" ).append( html );
      },
      error:function(xhr, textStatus, errorThrown){
      $("div").html(
        "<div>" 
        + textStatus //error글자 + " (HTTP-"
        + xhr.status /*에러코드번호*/ + " / " 
        + errorThrown //예외객체
        + ")</div>");
      }
    });
});

textStatus :: error 글자

xhr.status :: 에러코드번호

errorThrown :: 예외객체

② 간편형 함수

$.get(); - get방식으로 Ajax를 실행

$.post(); - post방식으로 Ajax를 실행

$.getJSON(); - get방식 샐행후 JSON데이터를 가져온다  

$.getScript(); - get방식 실행후 Script데이터를 가져온다

$(select).load(); - Ajax실행 후 선택자에 문자열을 추가한다 

<script>
    $(function(){
        $("button").click(function(){
            $("p").load("sample1.txt h2");
        });
    });
</script>

아주 간편하게 사용하는 load() 사용법.

스크립트 내에서 load()를 사용해서 String타입으로 "파일명" 을 명시해준다.

여기서 type에 맞추어서 .txt 등으로 맞추어서 해준다.

★★파일명 뒤에 태그명 or id속성으로 일부만 골라서 꺼내올 수 있다.

get이나 post만을 전문적으로 하는 메소드도 있습니다. 데이터와 데이터타입은 입력하지 않아도 됩니다.

$.get('주소', '데이터', function(res) {

  // 성공 시 동작

}, '데이터타입');

$.post('주소', '데이터', function(res) {

  // 성공 시 동작

}, '데이터타입');

스크립트와 JSON만을 전문적으로 가져오는 메소드도 있습니다.

$.getScript('스크립트 주소', function(script) {

  // 성공 시 동작

});

$.getJSON('JSON 주소', { 데이터 }, function(data) {

  // 성공 시 동작

});