04. Ajax

Notice

공지사항.

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

gi_dor

04. Ajax 본문

Language/JavaScript

04. Ajax

기돌 2024. 1. 17. 18:31

728x90

🔸 Ajax

자바스크립트와 XML 을 사용해서 서버와의 비동기 데이터 통신
- 비동기 통신 ?
  ▶ 웹 페이지 에서 서버와 데이터를 주고 받을 때 페이지를 새로고침 하지 않고 데이터를 교환 하는 방식
  보통 일반적인 동기적 통신은 요청을 보내면 서버에서 응답이 올 때까지 기다려야 한다
  그동안에는 화면이 멈추고 다른 작업이 수행 불가능하다
  비동기적 통신을 사용하면 요청을 보낸 후에도 화면이 멈추지 않고 계속해서 다른 작업을 수행할 수 있다
XMLHttpRequest 객체를 활용해서 서버와 데이터 통신을 한다
자바 스크립트로 서버와 데이터 통신이 가능해졌다
페이지의 리로딩없이 화면을 일부분 갱신하는게 가능해짐

사용 하는 이유

페이지 일부만 갱신 : 전체 페이지 새로고침 하지 않고 서버와 통신해 필요한 데이터만 가져올수 있다 , 일부분만 업데이드 할 수 있다
빠른 응답시간 : 사용자의 페이지는 일시적으로 멈추지 않고 다른 작업을 수행할 수 있어 빠른 응답시간과 더 좋은 성능을 얻을수 있다
서버 부하 감소 : 필요한 데이터만 전송하므로 전체 페이지를 새로 로드할 필요없어 서버 부하를 줄여준다고 한다
사용자 경험 향상 : 채팅메시지 같은 실시간 업데이트와 같은 기능에서 사용자 경험이 향상된다

대표 기능

구글 맵
포털사이트 검새기능
대분류의 하위분류 조회

API

onreadystatechange ⬅ 이벤트
XMLHRequest의 readyStatie 상태가 변경될 때마다 실행될 콜백함수

🔹 이벤트 핸들러 등록

인라인 이벤트 핸들러 등록

  <button onclick="handler()">버튼</button>

function handler() {
    수행문;
}

엘리먼트 객체의 이벤트 프로퍼티에 이벤트 핸들러 등록

<button id="btn">버튼</button>

// 1. 엘리먼트를 조회한다
let element = document.getElementById("btn");

// 2. 엘리먼트의 onclick 프로퍼티에 이벤트 핸들러를 등록한다
element.onclick = function () {
    수행문;
}

// 해당 엘리먼트에서 click 이벤트가 발생하면 onclick 프로퍼티에 등록한 함수를 실행한다

객체의 addEventListener() 메서드를 사용해 이벤트 핸들러 등록

<button id="btn">버튼</button>

// 1. 엘리먼트를 조회한다
let element = document.getElementById("btn");

// 2. 엘리먼트의 addEventListener() 메서드를 이용해 이벤트 핸들러 등록
element.addEventListener("click", function () {
    수행문;
})

// 해당 엘리먼트에서 click 이벤트가 발생하면 onclick 프로퍼티에 등록한 함수를 실행한다

GET 방식

$(document).ready(function() {
     $.ajax({
            type : 'get',	// get방식 명시
            url : 'AjaxTest.jsp', //이동할 JSP파일 
            dataType : 'text',
            success : function(data) {
                alert('데이터 ' + data);
            },
            error:function() {
                alert('실패');
            }
     })
}

POST 방식

<!DOCTYPE html>
<html>
<head>
  <title>Ajax 예제</title>
  // script 주소를 명시 해야 jQuery를 사용가능하다
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<button onclick="getData()">데이터 가져오기</button>
<div id="result"></div>

<script>
function getData() {
  $.ajax({
    url: '서버의_데이터_제공_URL',
    type: 'GET', // 데이터 전송 타입 
    date : // 보내는 데이터 ,
    dataType : // 문자형식으로 받기,
    success: function(response) {
      // 작업이 성공적으로 발생했을 경우 서버에서 받아온 데이터를 페이지에 업데이트
      $('#result').html(response);
    },
    error: function(error) {
    // 에러가 발생할 경우 실행될 코드
      console.log('에러 발생: ', error);
    }
  });
}
</script>

</body>

버튼을 클릭하면 Ajax getData() 함수 를 사용해 서버에서 데이터를 가져온다
result 라는 id를 가진 div 요소에 업데이트를 하게된다.

// XMLHttp객체 생성
let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        let message = xhr.responseText;

        if (message == "가능") {
            // 사용가능한 메세지 출력
        } else {
            // 
            // 
            // 사용 불가능한 메세지 출력
        }
    }
};

xhr.open("GET", "checkId.jsp?id=rltjs987");
xhr.send();

`readyState`

XMLHttpRequest 객체의 현재 상태를 반환한다
- 0 : 요청이 초기화 되지 않음
- 1 : 서버와 연결됨
- 2 : 서버가 요청을 받았다
- 3 : 서버가 요청을 처리하는 중이다
- 4 : 서버가 요청 처리를 끝내고 응답데이터는 보낼준비가 되었다

`status`

요청에 대한 HTTP 응답코드를 반환한다
- 200 : OK
- 404 : Not Found
- 500 : Server Error

`responseText`

서버로부터 받은 데이터를 문자열로 반환한다

`responseXML`

서버로부터 받은 데이터를 XML Document 객체로 반환한다

Method

let xhr = new XMLHttpRequest()
- XMLHttpRequest 객체 생성

xhr.open(method url , async , user , password)
- XMLHttpRequest 객체를 초기화 한다
- method : "GET" , "POST"
- url : 요청 URL
- async : true(비동기 동작) , false (동기식 동작)
- user/password : 사용자 인증정보
xhr.send()
- 서버로 부터 받은 요청을 보낸다 (GET 방식의 요청일 때 사용 한다)
xhr.setRequestHeader()
- POST 방식일 때 HTTP 요청 메세지의 헤더 정보를 설정한다
  - xhr.open("POST","text.jsp"")
  - xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(string)
- 서버로 요청을 보낸다 (POST 방식의 요청일 때 사용한다)
- xhr.send("title=안녕&contents=안녕하세요")

🔸 서버의 응답 컨텐츠 유형

text/html
- HTML 컨텐츠를 응답 컨텐츠로 제공함
- 웹 페이지에 바로 반영할 수 있는 컨텐츠를 제공하는 것이다
- AJax 요청을 보낸 클라이언트 측에서는 별도의 작업 없이 응답으로 받은 HTML 컨텐츠를 웹 페이지의 특정 영역에 반영 시키키만 하면된다

text/plain
- 일반 텍스트 컨텐츠를 응답 컨텐츠로 제공함
- 응답 데이터가 매우 단순한 값일 때 사용된다.

text/xml
- XML 형식의 컨텐츠를 응답 컨텐츠로 제공함
- 응답 데이터가 다양한 값이 아닐 때 사용된다

-   XML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 데이터의 구조를 기술할 수 있다
-   XML은 서로 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있게 한다

application/json
- JSON 형식의 컨텐츠를 응답 컨텐츠로 제공함
- 응답 데이터가 단순한 값이 아닐 때 사용된다

-   JSON은 XML과 비교해 더 쉽고 데이터를 저장하고 교환하기 위해 설계된 텍스트 기반의 데이터 교환 표준이다
-   JSON은 자바스크립트를 기반으로 설계되었으며 XML의 대안으로서 고안되었다
-   JSON은 XML과 비교해서 경량의 데이터 교환 표준이다

728x90

저작자표시 비영리 동일조건

'Language > JavaScript' 카테고리의 다른 글

03. DOM (0)	2024.01.15
02. 이벤트 (1)	2024.01.12
01. JavaScript (0)	2024.01.12
pre-training JavaScript (9) (1)	2023.10.20
pre-training JavaScript (8) 함수 , 객체 (1)	2023.10.19

'Language/JavaScript' Related Articles

gi_dor

04. Ajax 본문

04. Ajax

🔸 Ajax

사용 하는 이유

대표 기능

API

🔹 이벤트 핸들러 등록

GET 방식

POST 방식

readyState

status

responseText

responseXML

Method

🔸 서버의 응답 컨텐츠 유형

'Language > JavaScript' 카테고리의 다른 글

티스토리툴바

`readyState`

`status`

`responseText`

`responseXML`