Ajax7 Ajax 활용 검색어 추천 기능 검색어를 입력하면 입력된 단어에 맞춰 적절한 검색어를 추천해 주는 기능은 현재 대부분의 사이트에서 사용되고 있습니다. Ajax를 이용하면 이러한 기능을 어렵지 않게 구현할 수 있습니다. 이번에는 제이쿼리와 Ajax를 이용하여 간단한 검색어 추천 기능을 구현해 보도록 하겠습니다. 검색어 추천 기능의 동작 순서 검색어 추천은 검색어를 입력하는 도중에 입력된 검색어와 유사한 검색어를 화면에 표시해 주는 기능입니다. 따라서 다음과 같은 순서대로 동작하게 됩니다. 1. 입력된 검색어를 Ajax 요청으로 서버에 전송함. 2. 서버에서는 전송된 검색어를 이용하여 추천 검색어 목록을 작성함. 3. 작성된 추천 검색어 목록을 Ajax 응답으로 클라이언트에 전송함. 4. Ajax 응답으로 온 추천 검색어.. 2020. 7. 3. Ajax & jQuery 제이쿼리와 Ajax Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다. 그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다. $.ajax() 메소드 제이쿼리는 Ajax와 관련된 다양하고도 편리한 메소드를 많이 제공하고 있습니다. 그중에서도 $.ajax() 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드입니다. $.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공합니다. $.ajax() 메소드의 원형은 다음과 같습니다. 원형 $.ajax([옵션]) URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소입니다. 옵션은 HTTP 요청을 구성하는 .. 2020. 7. 3. Ajax 고급 주기적으로 Ajax 요청하기 Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다. 하지만 주기적으로 Ajax 요청을 보내도록 설정하여, 실시간 서비스와 비슷한 동작을 하도록 만들 수는 있습니다. 다음 예제는 0.5초마다 주기적으로 Ajax 요청을 보내 현재 서버 시간을 출력하는 예제입니다. 예제 function sendRequest() { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function() { if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status ==.. 2020. 7. 3. Ajax HTTP 헤더 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: codingsa.. 2020. 7. 3. Ajax 서버통신 XMLHttpRequest 객체 Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체입니다. Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용됩니다. 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문입니다. XMLHttpRequest 객체의 역사 비동기식 통신 방식인 XMLHttp는 가장 처음으로 익스플로러 5 버전에서 ActiveXObject라는 객체를 사용하여 구현됩니다. 그 후에 모질라와 사파리에서 XMLHttpRequest라는 이름으로 도입하여 널리 사용되기 시작합니다. 초기의 XMLHttpRequest 객체는 W3C 표준이 아니었기 때문에 웹 브라우저마다 구현상의 차이가 존재했습니다. .. 2020. 7. 3. Ajax 기본 문서 객체 모델(DOM)이란? 문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 모델은 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. Ajax에서는 이러한 DOM을 이용하여 웹 페이지의 일부 요소만을 변경할 수 있습니다. 따라서 Ajax를 배우기 전에 DOM에 대한 기본적인 사항을 알아야만 합니다. DOM 요소의 선택 자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 합니다. DOM 요소를 선택하는 방법은 다음과 같습니다. 1. 태그 이름(tag name)을 이용한 선택 2. 아이디(id)를 이용한 선택 3. 클래스(class)를 이용한 선택 4... 2020. 7. 3. 이전 1 2 다음
