Featured image for [JavaScript] Ajax

[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();
Code language: JavaScript (javascript)

  • 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);
    });
Code language: JavaScript (javascript)

  • 외부라이브러리 – 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);
    }
});
Code language: JavaScript (javascript)

  • 외부라이브러리 – 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);
    });
Code language: JavaScript (javascript)

2. XMLHttpRequest

  • XHR
  • 웹 브라우저에서 제공하는 서버와 비동기로 통신하는 API 중 하나. (웹 브라우저 내장 객체)
코딩교육 티씨피스쿨

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

가. 객체 생성

var xmlHttp = new XMLHttpRequest();
Code language: JavaScript (javascript)

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

나. readyState, status 프로퍼티

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

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

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

Http status 값의미설명
200OK요청 성공
403Forbiddedn접근 거부
404Not Found요청한 페이지를 찾을 수 없음
500Internal 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();
Code language: JavaScript (javascript)
  • 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()` 호출에 의해 파싱됨
});
Code language: JavaScript (javascript)

자세한 내용은 아래 참고.

Fetch API 사용하기 - Web API | MDNMDN

Fetch API 사용하기 – Web API | MDNMDN

가. GET

let promise = fetch(url); // 원하는 url 입력
if(response.ok){
    let json = await response.json();
}else{
    alert("에러 발생 : " + response.status)
}
Code language: JavaScript (javascript)
  • 실행 결과는 Promise 타입의 객체를 반환한다.

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

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)); // 에러 처리
Code language: JavaScript (javascript)
요청 옵션설명예시
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”

댓글 남기기