JavaScript 3

[JavaScript] XMLHttpRequest 사용하기

■ XMLHttpRequest 란? 웹 페이지에서 서버와 통신을 하여 데이터를 요청 및 응답받기 위한 객체입니다. 이 객체를 사용하면 웹 페이지 전체를 다시 로딩하지 않고, 일부분만을 갱신할 수 있습니다. ■ XMLHttpRequest 주요 프로퍼티 1. readyState XMLHttpRequest 객체의 현재 상태를 나타냅니다. 객체의 값은 다음과 같이 변화합니다. 값 의미 설명 0 UNSENT XMLHttpRequest 객체가 생성된 상태 1 OPENED open() 메소드가 호출된 상태 2 HEADERS_RECEIVED send() 메소드 호출 후, 서버에 요청한 결과의 Header를 수신한 상태 3 LOADING send() 메소드 호출 후, 서버에 요청한 결과를 받는 중인 상태 4 DONE 서..

JavaScript 2023.12.03

[JavaScript/jQuery] 데이터 속성(data-xxx) 값 가져오기

■ 데이터 속성이란? 데이터 속성(data-)이란, HTML5부터 추가된 개념으로 'data-'로 시작하는 모든 속성을 말합니다. 별도 다른 조작없이 HTML 요소에 추가 정보를 저장할 수 있게 도와주는 역할을 합니다. 개발자가 임의로 속성을 만들어서 데이터를 자유롭게 저장하여 사용할 수 있습니다. 해당 엘리먼트에 로 저장하여 사용하는 것으로 이해하면 쉽습니다. ■ 사용예제 HTML user와 code 데이터 속성을 만들어 각각 001, abc라는 값을 저장해주었습니다. 이처럼 하나의 HTML요소에 여러개의 데이터 속성을 동시에 사용할 수 있습니다. JavaScript 데이터 속성의 값 추출/변경/생성하는 JS코드는 다음과 같습니다. var id = document.getElementById("userI..

JavaScript 2023.11.30

[jQuery] $.ajax, $.post 동기처리

AJAX란, Asynchronous Javascript And Xml 의 약자로 비동기 JavaScript와 XML을 말합니다. XMLHttpRequest 객체를 이용하여 서버와 통신하기위해 사용합니다. 전체 페이지를 새로고침없이 페이지의 일부 영역에만 데이터를 로드할수 있는 기법으로 기본적으로 모든 요청은 비동기식으로 전송됩니다. 하지만, 동기요청이 필요한 경우 async 값을 false로 설정하여 서버로부터 응답이 올때까지 기다릴수 있도록 동기처리도 가능합니다. 1. $.ajax 2. $.post

JavaScript 2023.11.09