동기? 비동기?

---

때는 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로 처리하는 것이 아닌가 싶다.