Ajax

wonjoogu·2021년 3월 9일
0

SSAFY TIL

목록 보기
1/18

Ajax

  • Asynchronous Javascript And XML
  • Ajax는 언어나 프레임워크가 아닌 구현하는 방식을 의미
  • 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법
  • 서버는 클라이언트가 요청한 것을 xml로 만들어 보여준다.
  • JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과 조회
  • ex) 서버의 화면이 나타나는 것들 - 댓글, 실시간 검색어(특정 시간이 되면 순위가 바뀐다.), 좋아요, 싫어요 ...

< 일반 요청에 대한 응답 >

  • data를 입력 후 event 발생
  • Ajax를 적용하지 않는 요청은 서버에서 data를 이용 하여 logic 처리
  • logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송(화면 전환이 일어남)

< Ajax 요청에 대한 응답 >

  • data를 입력 후 event 발생(여기까진 같음)
  • Ajax를 적용하면 event 발생 시 서버에서 요청을 처리한 후 Text, XML 또는 JSON으로 응답

요즘 나오는 브라우저는

return new XMLHttpRequest();

한 줄이면 서버와 통신 가능

  • url

    • GET(R)
    • POST(C)
    • PUT(U)
    • DELETE(D)
  • contentType="text/html; -> 나는 text로 보낼거지만 너는 html로 인식해라

  • redayState - 0~4 : 로딩 상태를 의미

  • $.ajax()함수는 jQuery에서 Ajax 기능을 제공하는 가장 기본적인 함수

✔ GET 방식 (노출이 되도 되는 데이터, 전송량이 적은 데이터)

  • URL에 변수(데이터)를 포함시켜 요청
  • 데이터를 Header(헤더)에 포함하여 전송
  • URL에 데이터가 노출되어 보안에 취약
  • 전송하는 길이에 제한 있다
  • 캐싱 할 수 있다

✔ POST 방식 (노출이 되면 안되는 데이터, 전송량이 많은 데이터)

  • URL에 변수(데이터)를 노출하지 않고 전송
  • 데이터를 Body에 포함시킨다
  • URL에 데이터가 노출되지 않아서 기본 보안은 되어있다
  • 전송하는 길이에 제한이 없다.
  • 캐싱할 수 없다

< : 데이터 전송 형식 >

  • CSV

  • Comma Separated Values

  • 다른 두 형식에 비해 굉장히 짧음

  • 많은 양의 데이터 전송 시 유리

  • XML

  • server와 client는 주고 받을 data의 형식을 맞춰야함

  • tag로 data 표현

  • 비동기 : 동시에 처리가 가능한 것 ex) 파일을 다운받는 중에도 다른 작업이 가능

  • 동기 : ex) 폼 / 한 번에 하나씩만 처리 (순차처리)

profile
SSAFY 5th

0개의 댓글