[js]ajax 기초 공부

↓ ajax 기존버전(구버전)

$(".click").click(function(){
  $.ajax({
    url:"sub.html",
    success:function(data){
      $("#container").html($(data).find("li"))
    }
  });
})

// 여기서 data는 url링크와 동일하게 인식됨

async : ture or false (defalut : ture)

// ture 비동기 , flase 동기

 

timeout : 밀리세컨드

// timeout 설정으로 해당 시간동안 통신이 되지않을 경우 통신 에러발생

 

콜백 동작 순서 

→성공 success > complete > done > always

→실패 error > complete > fail > always

 

참고

https://api.jquery.com/jquery.ajax/

 

↓ ajax 최신버전

$("div").click(function(){
  $("#container").load("sub.html li")
})

현재 열려있는 페이지 내 #container에 sub.html 내에 있는 li를 불러옴

li를 기입하지않을 경우 html전체를 불러옴(iframe과 비슷)

$(".click").click(function () {  
  $.ajax({
    url: "sub.html",
    success: function (data) {
      console.log("ajax 성공")
    },
    error: function(){
      console.log ("ajax 실패")
    },
    complete: function(){
      console.log ("ajax 발생")
    },    
  })
});

// success = done, error = fail, complete = always

var call = $.ajax({
  url:"sub.html",
})

$(".click").click(function(){
  call.done(function(data){
    $("#container").html($(data).find(".div"));
    console.log("ajax 성공")
  })
  .fail(function(){
  // call.fail(function(){
    console.log("ajax 실패")
  })
  .always(function(){
    console.log("ajax 발생")
  })
})

 

구버전 → 최신버전

success → done

error → fail

complete → always

완전히 동일한 것은 아니지만 위와같이 보면됨

 

beforeSend.function(){

  ajax가 실행되기 전 실행 될 함수

}

ex) beforeSend 로딩바 실행 > complete 로딩바 삭제

beforeSend는 ajaxStart로 대체 (아마)

complete는 ajaxStop로 대체 (아마)

 

  $(".click").click(function () {  
    $.ajax({
      url: "sub.html",
      success: function (data) {
        $(".ul1").html($(data).find("li"))
        console.log("성공")
      },
      error: function(){
        console.log("실패")
      }
    });

    $(".ul2").load("sub.html li", function(a,b,c){
      if(b == "success")
      // if(b == "success" && c.status == 200)
        console.log("success:" + c.status +" "+ c.statusText);
      if(b == "error")
        console.log("Error: " + c.status +" "+ c.statusText);
    });
  });
  
  // 성공할 경우 success: 200 OK
  // 실패할 경우 Error: 404 Not Found

파일 불러오기 성공여부 판단 가능 코드

a는 reponseText // 불러올 파일의 내용

b는 statusText // 불러올 파일의 연결 상태

c는 xhr // 요청의 상태

c.status의 종류

→ 200(파일있음),  404(파일없음), 403(파일은 있으나 권한 없음)

c.statusText의 종류

→ OK or Not Found

 

script사용할 경우 if(b==success) 에서 기재후 사용가능

success && 200을 사용하면 조금더 확실한 성공여부를 판가름가능하지만

아직까지 잘 모르겠음

 

$.ajax = $.get(), $.post(), $.getScript()를 합쳐놓은 메서드