[JavaScript] Ajax

1. Ajax

 

• Asynchronous JavaScript and XML
• 비동기적인 웹 애플리케이션 제작을 위한 웹 개발 기법

 

이를 통해 웹 페이지 전체를 다시 로드하지 않고도 페이지의 일부만을 업데이트할 수 있다.

 

---

가. 이용방법

 

여러가지 방법으로 비동기 통신을 할 수 있다.

 

• XMLHttpRequest

var xmlHttp = new XMLHttpRequest();       // XMLHttpRequest 객체를 생성함.
xmlHttp.onreadystatechange = function() { // onreadystatechange 이벤트 핸들러를 작성함.
    // 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때

    if(this.status == 200 && this.readyState == this.DONE) {
        // 요청한 데이터를 문자열로 반환함.
        document.getElementById("text").innerHTML = xmlHttp.responseText;            
    }
};
xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);
xmlHttp.send();

 

• fetch()

var fetchUrl = "/examples/media/xml_httpxmlrequest_data.txt";
fetch(fetchUrl)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.text();
    })
    .then(data => {
        document.getElementById("text").innerHTML = data;
    })
    .catch(e => {
        console.log('There has been a problem with your fetch operation: ' + e.message);
    });

 

• 외부라이브러리 - JQuery

$.ajax({
    url: "/examples/media/xml_httpxmlrequest_data.txt",
    type: "GET",
    success: function(data) {
        $("#text").html(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert("Error: " + textStatus + " " + errorThrown);
    }
});

 

• 외부라이브러리 - axios

axios
        .get("/examples/media/xml_httpxmlrequest_data.txt")
    .then(response => {
        document.getElementById("text").innerHTML = response.data;
    })
    .catch(error => {
        console.log('There has been a problem with your fetch operation: ' + error.message);
    });

 

---

2. XMLHttpRequest

 

• XHR
• 웹 브라우저에서 제공하는 서버와 비동기로 통신하는 API 중 하나. (웹 브라우저 내장 객체)

 

코딩교육 티씨피스쿨

 

---

가. 객체 생성

 

var xmlHttp = new XMLHttpRequest();

자바스크립트를 이용하여 XMLHttpRequest 객체를 생성하는 방법.

 

---

나. readyState, status 프로퍼티

 

 

readyState 값	의미	설명
0	Uninitialized	요청이 초기화되지 않음
1	Loading	서버와의 연결이 성립
2	Loaded	요청이 받아짐
3	Interactive	요청 처리 중
4	Completed	요청이 완료되고 응답이 준비됨

 

XHR 객체의 현재 상태를 나타낸다.

 

readyState의 4번이 Completed라는 것은 외우자.

 

 

Http status 값	의미	설명
200	OK	요청 성공
403	Forbiddedn	접근 거부
404	Not Found	요청한 페이지를 찾을 수 없음
500	Internal Server Error	서버 오류 발생

• 성공적인 통신 : readyState===4이면서 status===200
• 비정상적인 통신 : readyState===4이면서 status!==200

 

---

다. 예시

var xmlHttp = new XMLHttpRequest();       // XMLHttpRequest 객체를 생성함.
xmlHttp.onreadystatechange = function() { // onreadystatechange 이벤트 핸들러를 작성함.
    // 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때

    if(this.status == 200 && this.readyState == this.DONE) {
        // 요청한 데이터를 문자열로 반환함.
        document.getElementById("text").innerHTML = xmlHttp.responseText;            
    }
};
xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);
xmlHttp.send();

• xmlHttp.responseText : 서버의 응답을 문자열로 저장하고 있음.
• xmlHttp.responseXML : 예시에는 없지만 서버에 요청하여 응답으로 받은 데이터를 XML DOM 객체로 저장하고 있다.
• xmlHttp.open("GET", "요청할 데이터의 URL", **true**); : 비동기식 요청을 보내기 위해서는 open() 메소드의 세 번째 인수로 true를 전달.

 

---

3. fetch()

 

XHR로 제대로 요청과 응답을 구현하려면 복잡하고 어렵다. (예시보다 훨씬)

 

그래서 jQuery나 axios등과 같은 라이브러리를 사용하거나 fetch()를 많이 사용한다.

 

특히 fetch() 함수는 외부 라이브러리를 사용하지 않고 간단하게 구현할 수 있다.

 

Fetch API는 쉽게 사용할 수 있는 프로미스 기반의 개선된 대체제다.

 

// fetch 예시
async function postData(url = "", data = {}) {
  // 옵션 기본 값은 *로 강조
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE 등
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
  });
  return response.json(); // JSON 응답을 네이티브 JavaScript 객체로 파싱
}

postData("https://example.com/answer", { answer: 42 }).then((data) => {
  console.log(data); // JSON 데이터가 `data.json()` 호출에 의해 파싱됨
});

 

자세한 내용은 아래 참고.

 

Fetch API 사용하기 - Web API | MDN

 

---

가. GET

 

let promise = fetch(url); // 원하는 url 입력
if(response.ok){
    let json = await response.json();
}else{
    alert("에러 발생 : " + response.status)
}

• 실행 결과는 Promise 타입의 객체를 반환한다.

 

let json;
fetch(url) // 원하는 url 입력
    .then(response => response.json()) // 성공
    .then(data => json = data)
    .catch(response => alert("에러 발생 : " + response.status)); // 실패

Promise 객체를 반환하므로 다음과 같이 chaining 할 수 있다.

 

• response.json() : 응답을 JSON으로 파싱.
• response.text() : 응답을 text로 변환.
• response.formData() : 응답을 FormData 객체 형태로 반환.
• response.blob() : 응답을 Blob 형태로 반환. (Binary large object)

 

---

나. POST

// fetch()를 이용한 POST 예시
fetch('<https://example.com/profile>', {
  method: 'POST', // POST 메소드를 사용
  headers: {
    'Content-Type': 'application/json', // 데이터 형식 설정
  },
  body: JSON.stringify({ // JSON 문자열로 변환
    id: 1,
    name: 'Example User'
  }),
})
.then((response) => response.json())
.then((data) => console.log(data)) // 응답 결과를 콘솔에 출력
.catch((error) => console.error('Error:', error)); // 에러 처리

 

요청 옵션	설명	예시
method	사용할 HTTP 메소드	"GET", "POST", "PUT", "DELETE"
headers	요청의 HTTP 헤더를 설정	주로 Content-Type를 설정
body	요청의 본문	보내고자 하는 데이터를 포함
mode	요청의 모드를 설정	"cors", "no-cors", "same-origin"
credentials	요청의 자격 증명을 설정	"include", "same-origin", "omit"
cache	요청의 캐시 모드를 설정	"default", "no-cache", "reload", "force-cache", "only-if-cached"
redirect	요청의 리디렉션 모드를 설정	"follow", "error", "manual"
referrerPolicy	요청의 리퍼러 정책을 설정	"no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"

 

---