hoon's bLog

HTTP 헤더 클라이언트와 서버 사이에 이루어지는 HTTP 요청과 응답은 HTTP 헤더를 사용하여 수행 HTTP 헤더는 클라이언트와 서버가 서로에게 전달해야 할 다양한 종류의 데이터를 포함 // HTTP 요청 헤더의 예제 Accept: */* Referer: http://codingsam.com/examples/tryit/tryhtml.php?filename=ajax_header_request_01 Accept-Language: ko-KR Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko Host: codingsam.com DNT: 1 Connection:..

XMLHttpRequest(XHR) 객체 Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체 XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터 송수신 가능 웹 브라우저가 백그라운드에서 서버와 데이터를 교환할 때 사용되므로, Ajax 프로그래밍에서도 많이 사용됨 이름에 XML이 들어가긴 하지만, XMLHttpRequest은 XML 뿐만 아니라 모든 종류의 데이터 조작 가능 XMLHttpRequest 객체의 역사 비동기식 통신 방식인 XMLHttp는 가장 처음으로 익스플로러 5 버전에서 ActiveXObject라는 객체를 사용하여 구현 이후 모질라와 사파리에서 XMLHttpRequest라는 이름으로 도입하여 널리 사용 초기의 XMLHttpRequest 객체는 W3C 표준이 ..

Ajax 구성 요소 웹 페이지의 표현을 위한 HTML과 CSS 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델 데이터의 교환을 위한 JSON이나 XML 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는 데 사용되는 자바스크립트 Ajax 동작 원리 Ajax를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신을 한다. 따라서 사용자의 동작에는 영향을 주지 않으면서도 백그라운드에서 지속해서 서버와 통신이 가능!! 이벤트 발생 : 사용자에 의한 요청 이벤트가 발생 자바스크립트 호출 : 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출 XMLHttpRequest 객체 생성..

Ajax란? Ajax = Asynchronous JavaScript and XML의 약자 Ajax는 HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법 Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만 갱신 가능 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시 가능 Ajax를 배우기 위한 사전지식(해당 링크 클릭!) ☞HTML ☞자바스크립트(JavaScript) ☞XML Ajax 통신 간 주고 받는 데이터 형식 JSON XML HTML 텍스트 파일 등 Ajax(Asynchronous JavaScript and XML) Ajax Test Script 데이터 불러오기! Ajax의 장점 웹 페이지..

이펙트 효과의 지연 설정 .delay() 메서드는 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정 // 페이드 아웃 효과와 페이드 인 효과 사이에 1초의 지연시간을 설정하는 예제 $(function() { $("#startBtn").on("click", function() { // id가 "divBox"인 요소를 0.5초에 걸쳐 사라지게 하고 // 1초의 지연시간 뒤에 다시 2초에 걸쳐 나타나게 함. $("#divBox").fadeOut(500).delay(1000).fadeIn(2000); }); }); 이펙트 효과의 중지 제이쿼리에서는 .stop() 메서드와 .finish() 메서드를 사용하여 실행 중인 이펙트 효과를 중지 .stop() : 선택한 요소에서 실행 중인 모..

요소의 표시와 숨김 .hide() 메서드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정 즉, 이렇게 숨겨진 요소는 웹 페이지의 레이아웃에 영향을 주지 않고 완전히 사라짐. $(function() { $("#showBtn").on("click", function() { $("#text").show(); // id가 "text"인 요소를 나타나게 함. }); $("#hideBtn").on("click", function() { $("#text").hide(); // id가 "text"인 요소를 숨김. }); }); // CSS의 visibility 속성의 속성값을 hidden으로 설정해도 HTML 요소 숨기기 가능 // 하지만 이때는 보이지만 않을 뿐 숨겨진 요소는 여전히 웹 페이지의..

이벤트의 위임(event delegation)제이쿼리는 이벤트의 위임을 통해 다수의 요소에 공통으로 적용되는 이벤트 핸들러를 공통된 조상 요소에 단 한 번만 연결하면 동작 가능// 다음 예제는 의 자식 요소 중 에 대해 요소마다 각각 이벤트 핸들러를 직접 연결$(function() { $("ul a").on("click", function(event) { // 의 자식 요소 중 를 클릭했을 때, event.preventDefault(); // 의 클릭시 기본 동작인 링크의 작동을 중지시킴. $("#text").append("이 링크는 동작하지 않습니다!"); });});// 요소마다 직접 등록된 이벤트 핸들러는 현재 존재하는 에만 연결되며, 새롭게..

이벤트의 개념 이벤트(event)란? 오늘날 웹 페이지는 사용자가 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작을 수행 위에서 예를 든 사용자의 동작들이 모두 이벤트(event)를 발생 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미 이벤트 핸들러(event handler) 웹 페이지에서는 수많은 이벤트가 계속해서 발생 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행 $(function() { $("button").on..