AJAX

SJ K·2022년 11월 29일
0

JS

목록 보기
4/10
post-custom-banner

동기? 비동기?


때는 11월의 어느 중반 면접의 질문 중 동기, 비동기에 대하여 설명하라고 했다. 질문에 대한 답을 못하자 "에이작스는 동기인가 비동기인가?" 친절하게 바꿔주셨는데 그것마저 답을 못했다. 덕분에 동기와 비동기에 대하여 확실히 공부하게 되었다!

동기/비동기

  • 동기는 a와 b가 있으면 a의 작업이 완료될 때 까지 b는 대기상태인것을 말한다. 즉 a작업이 완료되야 b가 실행된다.
  • 비동기는 a가 어느정도 실행이되면 b도 실행을한다. a와 b를 같이 처리한다.
    ex) AJAX

AJAX?


AJAX란?

ajax(Asynchronous JavaScript And XML)는 JavaScript와 XML을 이용한 비동기적방식으로 서버와 통신하는 방식이다. 즉, ajax를 이용하면 페이지 전체를 로딩하지 않아도 일부분만 갱신할 수 있다.

  • 장점
    1 페이지 이동없이 빠른속도로 화면전환
    2 수신하는 데이터 양을 줄일 있고, 클라이언트에게 처리를 위임
    3 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능
  • 단점
    1 AJAX를 쓸 수 없는 브라우저에 대한 문제
    2 HTTP클라이언트의 기능이 한정
    3 페이지 이동없는 통신으로 인한 보안상의 문제
    4 스크립트로 작성되므로 디버깅이 용이하지 않다
    5 요청을 남발하면 역으로 서버부하

AJAX사용

ajax의 기본 뼈대 :

$.ajax({

    url: "", //서버 url
    type: "POST", //HTTP 요청 타입
    async: true, // true(비동기), false(동기)
    dataType: "", //서버로부터 받을 데이터 타입
    data: data, //서버로 전달할 데이터(key:value 형태의 객체 or String)
    contentType: "application/x-www-form-urlencoded; charset=UTF-8", //서버로 보내는 데이터 타입
    
    //콜백함수
    beforeSend:function(){
	alert("ajax통신 전 무조건 실행");
    	xhr.abort(); // ajax 중단함수
    },
    success : function(arg) {
	alert("통신성공시에만 실행");
    }, 
    error : function(xhr, status, error){
	alert("통신실패시에만 실행");
    },
    complete:function(){
	alert("ajax통신 후 무조건 실행");
    }
});

Jquery를 이용한 AJAX

 $.ajax({
          type: "GET",//HTTP 요청 타입
          url: "", //서버 url
          data: {}, //서버로 전송할 데이터
          success: function(response){
          	alert("통신성공시 실행")
          }
         error : function(xhr){
         		alert("통신실패시 실행")
         }
  })

내 생각에 Jquery로 ajax를 처리하는 이유는 코드의 간결성 때문에 jquery로 처리하는 것이 아닌가 싶다.

profile
하루하루 알차게
post-custom-banner

0개의 댓글