투케이2K

[타이틀] ​ 구 분 : Library / 라이브러리 ​ 제 목 : [라이브러리] [Web] Ajax (에이젝스) ​ 사용되는 곳 : Web JavaScript / Http 네트워크 통신 [설 명] ​ 1. Ajax 란 jQuery 라이브러리 내에 포함된 http 네트워크 통신 수행 개발 기법입니다 ​ - jQuery 란 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다 ​ ​ 2. Ajax 는 네트워크 통신에서 JSON , XML , HTML , 텍스트 파일 등 다양한 형태의 데이터를 주고받을 수 있습니다 ​ ​ 3. Ajax 사용 이점 : ​ - 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. ​ - 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [AJAX 결과 출력] ​ ​ [스프링 서버 결과 출력] [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. new Object : json 형태로 데이터를 삽입할 수 있습니다 3. object[key] = value 형식으로 쿼리파라미터 형식을 지정합니다 */

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. post 쿼리 파람 방식으로는 [url에 바로 붙여서 전송 방법], [data 쪽에 삽입 후 전송 방법] 등이 있습니다 3. 전송 형태 : http://localhost:7000/selectMultiWhere?name=김&deptList=[고구려, 백제, 신라] */

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [결과 출력] ​ ​ [요약 설명] ​ /* [JS 요약 설명] 1. $.ajax() : 비동기식 Ajax를 이용하여 HTTP 요청을 전송합니다 (가장 흔히 사용) 2. beforeSend : 통신 요청 전 필요한 헤더 값을 정의합니다 3. success : 요청 성공 시 리턴 받는 데이터를 확인할 수 있습니다 4. error : 요청 실패 에러 상태를 표시해줍니다 5. complete : 요청 완료 상태를 표시해줍니다 6. POST BODY JSON 전송 시 설정 값 : - xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8"); - da..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. JSONP : 외부로 들어오는 악성코드들 예방하기..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [동작 원리] ​ ​ 1 : 사용자에 의한 요청 이벤트가 발생합니다. ​ 2 : 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출됩니다. ​ 3 : 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냅니다. 이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있습니다. ​ 4 : 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리합니다. ​..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. XMLHttpRequest : 비동기식 통신 방식 객체이며, 서버와 데이터를 교환할 때 사용됩니다 2. xhr.open : 서..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다 2. Ajax를 이용하면 백그라운드 영역에서..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다 2. Ajax를 이용하면 백그라운드 영역에서..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다 2. Ajax를 이용하면 백그라운드 영역에서..