TIL] ajax

ajax

ajax는 전에 블로그에 공부한 것을 올린 적 있지만

아직 이해도가 부족하다고 생각하여 복습 겸 좀 더 자세히 다뤄야겠다!

---

ajax의 기본 형태

$.ajax({
    url:"/example/~~~/~~~/~~~.~~~", //클라이언트가 요청을 보낼 서버의 URL주소이다.
    data: {~~~ : "~~~"},  //HTTP요청과 함께 서버로 보낼 데이터
    type: "GET", //HTTP요청 방식(GET과 POST가 있다.)
    dataType:"json" //서버에서 보내줄 데이터 타입
})

ajax의 기본 형태는 다음과 같다.

url 부분에 클라이언트가 요청을 보낼 서버의 URL 주소를 넣고

data에 HTTP요청과 함께 서버로 보낼 데이터 값을 넣는다.

데이터 요청방식을 설정하고 dataType을 정한다.

 

---

데이터 방식

ajax의 데이터 전송방식은 전에 블로그에 포스팅한 것처럼 비동기 방식이다.

이해를 돕기위해 예를 들자면 동기식 데이터 전송은 대표적으로 로그인을 예로 둘 수 있다.

서버로 데이터를 요청하고 응답이 오는 시간 동안 작업을 멈추고 기다리는 것이다.

로그인에 예를 들자면 웹에서 로그인할 때 아이디와 패스워드를 입력하여

서버로 전송하고 서버로부터 응답을 받은 후 로그인 성공 혹은 실패 웹페이지로

이동하는 것을 보면 정확한 동기방식인 것을 알 수 있다.

동기 데이터전송은 위의 로그인처럼 서버로 데이터를 요청하고 응답이 오는 시간 동안

작업을 멈추고 기다리는 것을 볼 수 있다.

 

비동기 방식은 동기방식과 반대로 서버로 데이터를 요청하고 응답을 기다리는 동안

웹은 자신의 다른 업무를 진행하고 응답이 오면 그 후 작업을 진행한다.

즉 사용하는 사람 입장에선 화면 갱신이 없고 요청과 응답 사이 시간에도

다른 일을 진행할 수 있기 때문에 편리하다.

대표적으로 실시간으로 데이터를 받아와야 하는 것에 쓰이는데

예를 들어 날씨, 미세먼지 같은 곳에 쓰인다.

온도를 알려주는 사이트에서 온도가 바뀐다고 해서 화면 페이지가 전환되거나

리로드 되지 않는다. 비동기 방식으로 데이터 전송을 하기 때문이다!

---

데이터 형식

데이터를 전송하는 데에 여러 전송 형식이 있지만 ajax 통신에서 데이터를 전송하는 형식은

크게 세 가지가 존재한다.

어떤 것이 존재하는지 아래에서 살펴보자.

---

csv형식

mosue. 마우스, 명사.,컴퓨터의 입력 장치의 하나. 

csv형식은 위의 예제와 같이 쉼표로 데이터의 속성을 나누고 줄 바꿈으로 데이터를 나눈다.

용량이 적지만 가독성이 떨어지는 단점이 존재한다.

---

xml형식

<entries>
    <entry term="mouse. 마우스" part="명사.">
        <definition>
            컴퓨터의 입력 장치의 하나.
        </defnition>
    </entry>
</entries>

xml형식은 csv형식의 가독성을 개선하기 위해 나온 데이터 형식이다.

위의 예제와 같이 태그로 속성과 데이터를 구분한다.

가독성은 좋지만 용량이 크고 데이터가 많아지면 분석 속도가 떨어진다.

---

json형식

[{
"term": "mouse. 마우스",
"part" : "명사.",
"definition" : "컴퓨터의 입력 장치의 하나."
}]

json형식은 자바스크립트의 객체 형태로 데이터를 전송하는 형식이다.

xml형식과 csv형식의 단점을 최소화한 형식으로 현재 가장 보편화되어있는 형식이다.

가독성도 좋고 용량이 적다는 장점을 가지고 있지만 여전히 데이터 양이 많으면

분석속도가 떨어진다는 단점이 있다.

---

데이터 전송 방식

데이터 전송방식은 여러 종류가 존재한다. 아래에서 살펴보자

1. GET : 지정한 URL의 데이터를 열람하기 위한 메서드이다.
2. POST : 지정한 URL의 데이터를 생성하기 위한 메서드이다.
3. PUT : 지정한 URL의 데이터를 갱신하기 위한 메서드이다.
4. DELETE : 지정한 URL의 데이터를 삭제하기 위한 메서드이다.
5. HEAD : 지장한 URL의 헤더 정보를 요청하는 메서드이다.

보안 및 특정 브라우저에서 지원하지 않는 문제(PUT, DELETE)로 인해

GET과 POST방식이 많이 쓰이고 있다.

GET과 POST는 헷갈릴 수 있는데

GET방식의 경우 데이터를 단순히 읽어오는 경우에 쓰이고

POST방식의 경우 데이터를 생성, 수정, 삭제하는 데이터를 변경하는 경우에 사용된다.

GET방식의 경우 데이터 전송량이 POST방식 보다 적고 URL에 정보가 고스란히 담겨있어

최소한의 보안도 되지 않기 때문에

로그인의 경우 사용자의 아이디와 패스워드만 서버에 전송하여 데이터를 읽어 들이면 되지만

사용자의 개인정보가 URL에 노출이 되므로 POST방식을 사용한다.

---

ajax에 대한 복습 및 추가 학습을 하였는데

처음 공부했을 때 보다 확실하게 이해도가 높아지는 것 같다.

처음에는 정말 어려웠지만 동기방식과 비동기 방식에 대해 양쪽으로 공부하니

확실하게 이해도가 더 높아진 것 같다.

또한 데이터 형식도 csv형식, xml형식, json형식을 전부 살펴보니

확실하게 어떤 장단점이 있는지 보이고 왜 json형식이 많이 쓰이는지 알 것 같다.

공부는 내가 먼저 공부를 포기하지 않는다면 공부는 내 손을 놓지 않는 것 같다.

노력은 배신 안 한다는 말이 있듯이 정말 노력해야겠다.

열심히 공부해서 정말 프로그래머로써의 역량이 높아지고 싶다!