[Ajax] Ajax 시작하기

1. Ajax(Asynchronous Javascript And XML)란?

서버와 클라이언트 간에 정보를 비동기적으로 전달하기 위해 JavaScript에서 사용하는 하나의 라이브러리

---

웹은 클라이언트와 서버로 나뉘어져 서로 통신을 통해 데이터를 주고 받습니다.

예를 들어, 네이버 메일에서 메일을 삭제할 때 삭제할 메일을 선택하고 [삭제] 버튼을 클릭하면 메일은 삭제가 되지만 주소는 바뀌지 않습니다. 이처럼 해당 페이지에서 페이지의 주소가 바뀌지 않고 새로운 데이터를 받기 위해 서버에 요청할 때 사용하는 게 Ajax입니다. Ajax는 데이터를 비동기적으로 전달합니다. 비동기적으로 전달한다는 의미는 페이지를 새로 고침 하지 않고, 서버에 데이터를 요청한다는 것입니다. 

---

2. 동기(Synchronous)와 비동기(Asynchronous)

* 동기(Synchronous)

1번부터 4번까지의 명령이 있을 때 순차적으로 명령이 진행됩니다. 앞의 명령이 끝날 때까지 뒤의 명령은 먼저 실행되지 않습니다.

 

* 비동기(Asynchronous)

명령의 순서와 상관없이 동시에 명령을 실행합니다. Ajax가 바로 정보를 비동기적으로 보내는 기술입니다.

---

3. 데이터 요청 타입

데이터는 반드시 클라이언트가 먼저 요청합니다. 요청 타입은 아래와 같이 5가지 방식이 있습니다.

1. GET 방식 : 데이터 조회
2. POST 방식 : 데이터 생성 (클라이언트가 서버에게 데이터를 줄 때)
3. PATCH 방식 : 데이터 변경
4. PUT 방식 : 데이터 변경
5. DELETE 방식 : 데이터 삭제

---

* 데이터 요청 시 규격

• Type : 데이터 요청 타입값
• URL : 도메인
• Header : 서버에 보낼 때 설정해야 하는 값들 (입력하지 않을 시 Ajax에서 기본값 설정)
• Body : 데이터

* GET 방식 VS POST 방식

1) GET 방식 : URL에 데이터를 담아서 보냅니다. ( URL ? 뒤에 데이터값을 넣습니다.)

$.ajax({
	type : 'GET',
    url : 'https://dori-coding.tistory.com?no=7',
    data: {},
    success : function(response){
    	System.out.println("success");
    },
    error : function(error){
    	System.out.println("error");
    },
})

GET 방식은 URL에 데이터를 담아 보내기 때문에 보안이 취약하다는 단점이 있습니다. 이 단점을 보완할 수 있는 방식이 아래의 POST 방식입니다.

 

2) POST 방식 : Body에 데이터를 담아서 보냅니다.

$.ajax({
	type : 'POST',
    url : '....',
    data: {
    	id: 'id1234',
        pwd: 'pwd1234'
    },
    success : function(response){
    	System.out.println("success");
    },
    error : function(error){
    	System.out.println("error");
    },
})