Study

[Ajax] Ajax기초

Ezcho 2023. 8. 2. 22:41

Ajax

 

https://velog.io/@leyuri/SpringBoot-ajax-사용법-및-예제-thymeleaf

 

SpringBoot - ajax 사용법 및 예제 (+thymeleaf)

배경 스프링 부트 개발 환경에서 ajax 사용법에 대해 공부하면서 만든 예제이다. 💪 먼저 간단히 ajax 의 개념에 대해 설명하고 만든 예제를 설명하려고 한다. Ajax ajax는 JavaScript를 사용한 비동기

velog.io

 

http://www.tcpschool.com/ajax/ajax_intro_works

Asynchronous JavaScript and XML

비동기 자바스크립트 와 XML

 

XML Http Request 방식을 사용함.

  1. 새로고침 없이도 버튼. input, 등 여러 이벤트들로 서버와 상호작용.
  2. 사용자의 작업방해 X
  3. 일부 랜더링

주고받는 데이터들

  1. json - Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다.
  2. html
  3. xml - 복잡하게 들어가면..좀 어려우니까 우리가 만들 수 있는 임의의 태그 <book></book>, <car></car>
  4. 텍스트파일 - .txt 파일

json 파일 예시

한계

  1. 실시간 서비스 구현 힘듬

jQuery 사용할듯 아마 ?

 

동작원리

1. 우리가 보는 웹

2. 사용자UI에서 이벤트 발생(ex, 버튼의 id값) 

3. JS함수 호출

4. JS함수 내부의 XMLHttpRequest 객체 생성 및 요청

5. 서버로 이동 이때 다른 작업 가능.

6. Ajax 요청 처리

7. DB에서받음 (이때 GET, POST등 상태확인)

8. Response생성

9. html, xml, json, txt 등 데이터 웹으로 전송

10. JS함수에서 받음 일부만 갱신

11. 웹페이지 일부 다시로딩

 

일부만 다시 로드하는 법 (DOM)

 

JS로 DOM 다루기

태그이름, id, class, css selector 등등으로 영역구분 가능함.

 

 

getElementById()

 

노드관리 메서드들  -> 알면 좋을거같아서 가져와봄

1. appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트에 맨 마지막 노드로 추가함.

2. insertBefore() : 새로운 노드를 특정 노드 바로 앞에 추가함.

3. insertData() : 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가함.

 

4. createElement() : 새로운 요소 노드를 생성함.

5. createAttribute() : 새로운 속성 노드를 생성함.

6. createTextNode() : 새로운 텍스트 노드를 생성함.

7. removeChild() : 기존의 노드 리스트에서 특정 노드를 제거함.

8. removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거함

 

XMLHttpRequest 객체

얘는 서버랑 data 교환할때 쓴다.

사실 노드관리하는건 좀 귀찮으니까 우리는 미리 짜여진 api를 가지고 XMLHttpRequest 통신하는것위주로 실습

 

 ActiveXObject는 옛날거임 신경 ㄴㄴ

 

얘는 XMLHttpRequest 메서드 정리해놓은것

https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest

 

XMLHttpRequest - Web API | MDN

XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용합니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이

developer.mozilla.org

 

생성자

var 변수이름 = new XMLHttpRequest();

var httpRequest. = new XMLHttpRequest();

var xmlHttp = new XMLHttpRequest();

 

 

1. 요청단계 Request

 

open(전달방식, URL주소, 동기여부);

 

send();       // GET 방식

send(문자열); // POST 방식

 

 

GET방식

httpRequest.open("GET", "/examples/media/request_ajax.php?city=Seoul&zipcode=06141", true);

해석: XMLHttpRequest가 open 하는데 GET방식으로(즉 읽어온다.) "examples/media/request_ajax.php? 해당 api를.

httpRequest.send();

 

POST방식

 

httpRequest.open("POST", "/examples/media/request_ajax.php", true);

httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

httpRequest.send("city=Seoul&zipcode=06141");

 

if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200)

 

 

GET : 데이터를 조회할때(Read)

POST : 생성(Create), 변경(Update), 삭제(Delete)

 

Get을 쓸 때는 언제고, Post는 또 언제 쓸까?

 

즉, Get은 서버에서 어떤 데이터를 가져와서 보여줄 때 사용합니다. 어떤 값이나 내용, 상태 등을 바꾸지 않는 경우에 사용을 하는 것입니다.
이에 비해, Post는 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용합니다.

게시판으로 예를 들자면, 글의 내용에 대한 목록을 보여주는 경우나, 글의 내용을 보는 경우는 Get에 해당합니다.
그리고 글의 내용을 저장하고, 수정할 때에 Post를 사용하는 것이죠.

 

 

GET같은 경우는 URL 주소 끝에 파라미터로 포함되어 전송됨, 이 변수를 queryString 이라고 함.

 

Get이랑 Post 비교 - 비동기 기준

캐시 ⭕️ ❌
브라우저 기록 ⭕️ ❌
북마크 추가 ⭕️ ❌
데이터 길이 제한 ⭕️ ❌
HTTP 응답 코드 200(Ok) 201(Created)
언제 주로 사용하는가? 리소스 요청 리소스 생성
리소스 전달 방식 쿼리스트링 HTTP Body
idempotent ⭕️ ❌

 

 

 

<!DOCTYPE html>
<html>
        <script>
        function getJoke() {
            // Chuck Norris Joke API URL
            var apiUrl = 'https://api.chucknorris.io/jokes/random';

            // AJAX 호출
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open('GET', apiUrl, true);

            xmlHttp.onload = function () {
                if (xmlHttp.status === 200) {
                    var data = JSON.parse(xmlHttp.responseText);
                    displayJoke(data);
                } else {
                    alert('유머를 가져오는데 실패했습니다.');
                }
            };
            
            xmlHttp.onerror = function () {
                alert('요청 중 오류가 발생했습니다.');
            };
            xmlHttp.send();
        }

        function displayJoke(data) {
            var jokeDiv = document.getElementById('joke');
            
            jokeDiv.innerHTML = `
                <h2>Chuck Norris Joke</h2>
                <p>${data.value}</p>
            `;
        }
    </script>
<body>
    <h1>Chuck Norris Joke</h1>
    <div>
        <button onclick="getJoke()">유머 가져오기</button>
    </div>
    <div id="joke"></div>
</body>
</html>

 

응답상태

http://www.tcpschool.com/ajax/ajax_server_response

 

코딩교육 티씨피스쿨

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

tcpschool.com

여기잘나와있음

저작자표시 (새창열림)