수월한 IT

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 Ajax를 사용하여 서버에 있는 정보를 실시간으로 검색하여 전체 화면을 새로 고치지 않고 검색된 정보를 화면에 표시해 보도록 하겠습니다. 실제로는 데이터를 Database를 통해 받아야 하겠지만, 코드의 간결함과, 프로세스의 단순함을 위해 검색할 데이터를 서버 페이지의 Collection에 저장한 후 데이터를 가져와 클라이언트 화면에 표시하도록 하겠습니다. [시연 영상] 전체 화면 새로고침없이 응답정보 표시 1. 데이터 시트 아래와 같은 데이터를 자바의 Map 구조로 저장할 것입니다. 구분 요소 산이름 백수산, 금강산, 치악산, 설악산, 지리산, 내장산 강이름 한강, 낙동강, 금강, 한탄강, 두만강, 대동강, 섬진강 꽃이름 장미,..

안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 포스팅은 Ajax를 이해하기 위한 첫걸음으로 사용자의 요청 처리를 Ajax는 어떤 과정을 통해 처리되고 응답되는가에 대한 내용을 실어 보았습니다. 일반적인 웹은 사용자가 서버에게 어떤 작업을 요청하면 각 클라이언트는 그 결과를 받아와 화면에 표시하기 위해서 전체 화면을 갱신해야 하는 특징이 있습니다. 이것은 우리가 일반적으로 겪고 있는 현상중 하나가 전체 화면이 갱신되고 있다는 것입니다. 물론 브라우저의 캐시 기능이나 고속의 네트워크 환경 때문에 전체 화면 갱신에 따른 불편함이나 화면 딜레이 현상이 최소화가 되었다고는 하지만 프로그래머 입장에서는 어찌 되었던지간에 현재에 표시된 정보가 다음 화면에서도 필요하다면 수단과 방법을 가리지 않고 ..

안녕하세요. IT이곳 저곳을 여행하고 있는 IT여행자입니다. 이번엔 Ajax의 맛을 보기 위해 간단한 샘플 프로그램을 만들어 보겠습니다. 요구 사항 : 서버에 정수 하나를 전달하여 홀/짝수를 판별하여 그 결과를 "홀수입니다" 또는 "짝수입니다"로 전달받아 화면에 표시. 위와 같은 요구사항을 기존 웹 방식과 Ajax 방식을 비교해 보도록 하겠습니다. [기존 웹 방식] 파일명 : odd_even_check_form.jsp 홀짝수 체크 정수를 입력하세요 : 위의 코드를 실행하면 숫자를 입력했던 입력 상자의 값이 사라집니다. 이유는 '체크' 버튼을 클릭하면 서버에 자료를 요청하면서 현재 페이지가 자동으로 새로고침 되기 때문이다. 물론 jstl이나 el을 사용하여 파라미터로 전달된 값을 아래와 같이 다시 의 입력..

Ajax는 지금에 와서 전혀 새로운 기술은 아니지만, HTTP가 갖고 있는 단점을 보안할 수 있는 대표적인 기술중 하나 입니다. 왜 이런 기술이 보편화되서 사용되지 않는지 의문이 들정도로 간편하고 강력하죠. HTTP 가 갖고 있는 단점중 하나가 바로 저장성이 없다는 것입니다. 이런 특징 때문에 이전 페이지에서 현재 페이지로 전환되거나 새로고쳐지는 경우 여러 가지 방법으로 파라메터를 전달하여 현재 페이지에 정보를 표시하거나 처리합니다. 이런 Web 프로그램의 환경을 App 프로그램 환경처럼 만들기에 대단히 편리하고 간단한 기술이 바로 Ajax인 것입니다. 자바스크립트를 사용할 수 있는 개발자라면 더욱 쉽게 접근할 수 있으며, jQuery와 같은 라이브러리를 사용한다면 더욱 간단히 사용할 수 있습니다. 물론..