AJAX

AJax(Asynchronous Javascript and XML)

• 언어나 프레임 워크가 아닌 구현하는 방식을 의미
• 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법
• Java Script의 XMLHttpRquest객체로 데이터를 전달하고 비동기 방식으로 결과를 조회
• 화면 갱신이 없어 사용자 입장에서 편리하지만, 동적으로 DOM을 구성해야하므로 구현이 복잡

 

일반 요청과 Ajax 요청에 대한 응답

 

1. 일반 요청

• 데이터를 입력 후 event 발생
• Ajax를 적용하지 않은 요청은 서버에서 데이터를 이용하여 로직 처리
• 로직 처리에 대한 결과에 따라 응답 페이지를 생서하고 client에 전송(화면 전환 발생)

1. Ajax 요청에 대한 응답

• 데이터를 입력 후 event 발생
• Ajax 적용하면, event 발생 시 서버에서 요청 처리 후 Text, XML, JSON으로 응답
• client는 이 응답 data를 이용하여 화면 전환 없이 현 재 페이지에서 동적으로 화면을 재구성

 

서버와 클라이언트의 상호 작용

1. 서버 중심
   • 화면 구성이 서버에서 이루어짐(JSP, PHP,ASP
2. 클라이언트 중심
   • 웹 브라우저에서 화면 구성(JavaScript)
   • Ajax는 클라이언트 중심의 개발 방식이며, 비동기 요청보다는 동적 화면 구성이 관건임

 

Ajax 사용방식

1. XMLHttpRequest 이용
2. fetch()이용

• response.text()
• response.json()

fetch("<https://jsonplaceholder.typicode.com/posts/1>")
        .then((response) => response.json())
        .then((data) => console.log(data.userId));
       

fetch("<https://jsonplaceholder.typicode.com/posts/1>")
        .then((response) => response.text())
        .then((data) => console.log(data));

fetch("<https://localhost:3000/user/post>", {
  method: "POST",
  headers: { 
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ 
    id: "asd123",
    description: "hello world",
  }),
}).then((response) => console.log(response));

→ method옵션: default는 get

→headers옵션: json 사용 여부 지정

→ body옵션: 요청 데이터를 json으로 직렬화하여 설정

1. 외부 라이브러리(jQUery)이용
2. axios 이용 방식

 

Get VS Post 방식

• Get방식
  • URL에 대이터를 포함시켜 요청
  • 데이터를 헤더에 포함하여 전송
  • URL에 데이터가 노출되어 보안 취약
  • 전송 길이 제한, 캐싱 가능
• POST 방식
  • URL에 데이터를 노출하지 않고 요청
  • 데이터를 바디에 포함
  • URL에 데이터가 노출되지 않아 기본 보안 o
  • 전송 길이 제한 x, 캐싱 x

 

동기 통신 vs 비동기 통신

 

동기 통신

• 호출자가 피호출자의 실행 완료될 때까지 Blocking
• (장점) 실행 순서의 순차적 보장
• (단점) 병행처리를 x

비동기 통신

• 호출자가 피호출자의 실행완료를 기다리지 않고 자신의 흐름을 계속해서 진행
• (장점) 병행처리 가능
• (단점) 실행순서 보장
• 비동기 통신 후 응답 결과 받아 처리하는 경우 콜백함수 지정

 

App 개발 → 동기 + 비동기 통신

• 동기 통신: URL이 변경되며 일어나는 요청 ⇒ 새로운 리소스 결과로 돌아옴, 실행 주체: 브라우저
• 비동기 통신: 자바 스크립트에서 통신 api를 활용하여 서버로 요청 전송 , 화면 페이지의 이동 미 발생

 

HttpRequest 속성 값 텍스트 설명

 

200	OK	요청 성공
403	Forbidden	접근 거부
404	Not Found	페이지 없음
500	Internal Server Error	서버 오류 발생

XMLHttpRequest API

• 브라우저 제공 API
• 요청 발생, 응답 수신 기능 제공
• 통신 절차
  1. 요청 객체 생성
  2. let req=new XMLHttpRequest();
  3. 요청에 필요한 정보 세팅
  4. req.open(요청 방식, URL, 비동기 여부);
  5. 요청 전송 with payLoad(데이터)

 

req.arrangedstatechange = 콜백 함수 ~>req.responseXML: xml 돔

1. req 객체 생성된 상태
2. open 상태
3. send 상태
4. 서버로부터 응답이 오고 있는 상태
5. 응답 수신 완료 상태

 

데이터 전송 형식

csv

• 쉼표로 각 항목을 구분하여 데이터 표현
• (장점)짧다.
• (단점)내용 파악이 어렵다
• ex) 20201111, 김싸피, A, 90

https://jsonplaceholder.typicode.com/