ajax

동기 통신

---

• client는 server 측 실행이 완료될 때까지 기다려서 결과를 받는 것
• HTTP 동기 통신 - 브라우저가 직접 page를 이동시키는 방식
  • ex) URL을 직접 입력 후 엔터 → URL요청(Request) → 서버에서 URL 프로그램 실행 → 결과화면(html, jsp…) → Response 화면 → 화면이 바뀐다(switching)
  • 서버측에서 로직 실행 후 화면 전체가 새롭게 바뀌는 경우 적합

비동기 통신

---

• client는 server 측 실행이 완료될 때까지 기다리지 않고 자신의 실행 흐름을 진행하는 것
• 실행이 완료 되는 경우 콜백 함수를 지정해서 처리 결과를 받는다.
• HTTP 비동기 통신 - page이동은 없지만 JS 코드로 서버측에 요청을 보내고 응답을 받음
  • ex) 로그인 하는 경우 로그아웃 버튼과 마이페이지 버튼이 나오도록 하는 경우, 포털에서 연관검색어나 많이 검색한 검색어
  • 서버로 URL이 간다.(단 xhr요청) → 서버에서 URL 프로그램 실행 → 결과 Data(csv, json, xml, Dom Tree) 생성 → 화면으로 data를 보낸다. → 데이터 파싱 후 화면에 반영
  • 화면 교체 없이 서버측에서 로직을 실행하고 그 결과를 화면 일부에 반영하는 경우 적합

AJAX

---

• 언어나 프레임워크가 아니다.
• 구현하는 방식을 의미한다.
• JS AJAX
  • XMLHttpRequset(XHR) 객체 사용 → HTTP 동기, 비동기 통신 모두 지원하는 객체 단 거의 비동기 통신을 사용한다.
  • AJAX 통신을 할 때, 전송 방식, URL, 통신 방식 등을 전송전보를 담는 역할을 한다.
  • 전송 방식 → GET, POST, DELETE, PUT, PATCH, ….
    • GET : Data 전송크기 제한이 있다. URL에 DATA표시
      • http://localhost:8080?a=x&b=y
      • a=x&b=y가 Querystring
    • POST : url에 data표시 x , body에 담겨감
    • 사용순서
      1. 요청 객체 생성 ex) let req = new XMLHttpRequset
      2. onreadystateChange 콜백 지정 → req.onreadystateChange = 콜백함수
      3. open() 호출 → 전송 방식, URL, 통신방식 → req.open(요청전송식, URL, 비동기 여부)
      4. send()호출 → 요청 전송 → req.send()를 서버로 보내고 처리를 거쳐 응답이 오면 콜백함수가 처리 된다.
      • ready state 속성
        • 0 : 객체 생성상태
        • 1 : open 호출 상태
        • 2 : send 호출 상태
        • 3 : 요청처리 하고 있는 상태(응답이 안 온 상태) → 정상 완료 보장 X
        • 4 : 요청 처리가 완료된 상태****** → 응답완료 상태!
• ajax 작동방식
  • XMLHttpRequest 이용방식(브라우저)
  • fetch() 이용방식(브라우저)→ 콜백은 Promise라는 객체 사용
  • 외부 라이브러리 이용방식 - jQuery
  • 외부 라이브러리 이용방식 - axios