[JavaScript] 동기 비동기 개념 및 Ajax 사용법

1. 동기와 비동기 개념

 

동기 방식---------------------------------------------------------------------------------------비동기 방식

 

동기(Synchronous)

동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는 것을 말한다.요청을 하면 시간이 얼마가 걸리던 요청한 자리에서 결과가 주어져야 한다.

-> 요청과 결과가 한 자리에서 동시에 일어남.

-> A노드와 B노드 사이의 작업 처리 단위(transaction)를 동시에 맞추겠다.

 

비동기(Asynchronous)

비동기는 요쳥한 결과가 동시에 일어나지  않는 것을 말한다.

-> 요청한 그 자리에서 결과가 주어지지 않음.

-> 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다.

 

---

2. 동기와 비동기의 장단점

동기

장점: 설계가 매우 간단하고 직관적이다.

 

단점: 결과가 주어질 때까지 아무것도 못하고 대기해야 한다.

 

 

비동기

장점: 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있어 자원을 효율적으로 사용할 수 있다.

 

단점: 동기보다 복잡하다, 결과가 주어지는데 시간이 걸린다.

---

 3. Ajax (Asynchronous JavaScript + XML)

Ajax란 XMLHttpRequest라는 자바스크립트의 객체를 이용하여 웹서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법을 말한다.

Ajax는 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있다.

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

 

Ajax의 장점

• 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
• 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있습니다.
• 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있습니다.
• 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.

 

Ajax의 한계

• Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
• Ajax로는 바이너리 데이터를 보내거나 받을 수 없다.
• Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.
• 클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.

 

Ajax 사용법

 

$.ajax({
        url: requestUrl,
        type: "GET"
        async: true,
        date:JSON.stringify(requestParam),
        dateType: "json"
        timeout : 10000,
        contentType: "application/json",
        
        beforeSend:function(){
        },
        complete:function(){
        },
        success:function(){
        },
        error:function(){
        },
        fail:function(){
        }
});

 

url : 요청 url

type : 요청 방식(get, post, put, delete)

async : 디폴트 값 true (false시에 동기 통신으로 변경)

date : 전달할 파라미터

dateType : 서버에서 반환되는 데이터 형식 (text, html, xml,json, jsonp, and script)

/*

"xml" : XML 문서

"html" : HTML을 텍스트 데이터로

"script" : JavaScript 코드를 텍스트 데이터로

"json" : Json 형식 데이터로 평가하고 JavaScript의 개체로 변환

"jsonp" : Jsonp로 요청을 부르고 callback 매게 변수에 지정된 함수 회수 값을 JSON 데이터로 처리

"text" : 일반 텍스트

"/

timeOut : 제한시간 설정

contentType : 서버에서 데이터를 보낼 때 사용