검색어 추천 기능 검색어 추천 기능 검색어를 입력하면 입력된 단어에 맞춰 적절한 검색어를 추천해 주는 기능은 현재 대부분의 사이트에서 사용되고 있다. Ajax를 이용하면 이러한 기능을 어렵지 않게 구현할 수 있다. 이번에는 제이쿼리와 Ajax를 이용하여 간단한 검색어 추천 기능을 구현해 보도록 한다. 검색어 추천 기능의 동작 순서 검색어 추천은 검색어를 입력하는 도중에 입력된 검색어와 유사한 검색어를 화면에 표시해 주는 기능이다.따라서 다음과 같은 순서대로 동작하게 된다. 입력된 검색어를 Ajax 요청으로 서버에 전송함.서버에서는 전송된 검색어를 이용하여 추천 검색어 목록을 작성함.작성된 추천 검색어 목록을 Ajax 응답으로 클라이언트에 전송함.Ajax 응답으로 온 추천 검색어 목록을 처리하여, 화면에 ..
Ajax와 제이쿼리 제이쿼리와 Ajax Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 한다.그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)이다. $.ajax( ) 메소드 제이쿼리는 Ajax와 관련된 다양하고도 편리한 메소드를 많이 제공하고 있다. 그중에서도 $.ajax( ) 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드이다.$.ajax( ) 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다. $.ajax( ) 메소드의 원형은 다음과 같다. 원형 $.ajax([옵션]) URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이다.옵션은 HTTP 요청을 구성..
Ajax (다양한 Ajax 요청/타입별 응답 처리) 주기적으로 Ajax 요청하기 Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스를 만들 수 없다. 하지만 주기적으로 Ajax요청을 보내도록 설정하여, 실시간 서비스와 비슷한 동작을 하도록 만들 수는 있다. 다음 예제는 0.5초마다 주기적으로 Ajax 요청을 보내 현재 서버 시간을 출력하는 예제이다. 🔔 예제) function sendRequest() { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function() { if (httpRequest.readyState == XMLHttpRequest.DON..
HTTP 헤더 HTTP 헤더 클라이언트와 서버 사이에 이루어지는 HTTP 요청과 응답은 HTTP 헤더를 사용하여 수행된다. HTTP 헤더는 클라이언트와 서버가 서로에게 전달해야 할 다양한 종류의 데이터를 포함할 수 있따. 다음 예제는 HTTP 요청 헤더의 예제이다. 예제 Accept : */*Referer : http://codingsam.com/examples/tryit/tryhtml.php?filename=ajax_header_request_01Accept-Language : ko-KRAccept-Encoding : gzip, deflateUser-Agent : Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like GeckoHost: codi..
서버와의 통신 XMLHttpRequest 객체 Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다. Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다.웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문이다. XMLHttpRequest 객체의 생성 현재 대부분의 주요 웹 브라우저는 XMLHttpRequest 객체를 내장하고 있다. 이러한 XMLHttpRequest 객체를 생성하는 방법은 브라우저의 종류에 따라 다음과 같이 나눠진다. XMLHttpRequest 객체를 이용한 방법ActiveXObject 객체를 이용한 방법익스플로러 7과 그 이상의 버전, 크롬, 파이어폭스, 사파리, 오페라에서..
Ajax 기본 문서 객체 모델(DOM) 이란? 문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스이다. 이 모델은 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공한다. Ajax 에서는 이러한 DOM을 이용하여 웹 페이지의 일부 요소만을 변경할 수 있다. 따라서 Ajax를 배우기 전에 DOM에 대한 기본적인 사항을 알아야만 한다. DOM 요소의 선택 자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야한 한다. DOM요소를 선택하는 방법은 다음과 같다. 태그 이름(tag name)을 이용한 선택아이디(id)를 이용한 선택클래스(class)를 이용한 선택CSS 선택자(selec..
Ajax Ajax Ajax는 그 자체가 별도의 새로운 언어는 아니다. HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법이다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다.즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 예제 DOCTYPE html> Ajax Intro $(function() { $("#requestBtn").on("click", function() { $("#text").load("/examples/media/ajax_intro_data.txt"); }); }); Ajax(Asynchronous JavaScr..