ajax (7) 썸네일형 리스트형 AJAX 예제, 로컬 웹 문서 불러와 출력하는 방법 이제 드디어 Ajax 프로그래밍 예제를 만들기에는 충분한 과정을 거쳤습니다. 프로그래밍을 하기 위해서는 사전에 이것저것 많이 읽어보고 뒤져보고.. 하는 것도 중요합니다. 그리고 처음 부터 어떠한 주제를 가지고 시작하는 것도 중요합니다. 하지만, 만약, 어려운 주제를 선택하셔서 그 주제를 달성하지 못하시면 후일에 가서는 "아.. 내가 저걸 못해서 포기했구나" 라는 생각이 들곤합니다. 이번에 우리는 아주 간단한 예제를 통해서 우선 Ajax 프로그래밍에 대한 감각을 키워보고, 대충~~~ 어떻게 돌아가는 구나... 라는 감각을 키우시면 됩니다. 그리고 본 예제는 서버에서 구동하는 데이터, 웹 파일을 가져오는 것이 아니라, 로컬에 있는 파일을 활용하기 때문에, 한번쯤은 반드시 거치시는 것이 중요하리라 생각이 듭니.. AJAX 연결 라이브러리 구현하기~! 우리는 자주 쓰는 루틴을 알고리즘 또는 함수, 이런 형태로 만듭니다. 왜일까요? 반복적으로 쓰니까요. 코딩하는 관점에서 효율적인 프로그래밍이라는 것, 어찌보면, 몸이 편하는 방향으로 가게 되면 되지 않을까 합니다. ^.^ AJAX 프로그래밍하는데 가장 빈번하게 쓰이거나 공통적으로 사용하는 것이 뭐가 있을까요? 저는 3가지로 꼽아보고 싶습니다. 1. XMLHttpRequest 인스턴스 변수 선언 2. XMLHttpRequest 인스턴스 변수 셋팅하기 3. Request 함수 호출 이 된다고 생각이 드는군요.. (기초적인 수준부터 보자면은~!) 이 3가지를 하나의 라이브러리로 모아놓고, 라이브를 필요한 Ajax 프로그래밍때, 가져다 쓰면 되겠네요~ 이 라이브러리를 만들기 위해서, "Ajax에서 상태 변화시 .. Ajax 호출 기반 서비스 서버 구축시 고려사항 Ajax는 URL을 바탕으로 서버에게 서비스 요청을 합니다. 요청시 파라미터 같은 정보를 전달하여서 서버 입장에서는 전달 받은 데이터를 바탕으로 서비스를 처리하고 처리한 결과를 다시 클라이언트에게 보냅니다. 일반적인 서버-클라이언트 모델과 비슷하다고 할 수 있습니다. 하지만, Ajax는 클라이언트 측에서 보다 역동적이고, 보다 많은 처리를 할 수 있다는 가능성을 보다 많이 제공하고 있습니다. 따라서 기존의 웹 서비스에서도 이러한 일들을 충분히 처리할 수 있지만, 앞에서 이야기한 점들을 십분 활용하기 위해서 Ajax를 이용하고 있다고 할 수 있습니다. 그렇다면, 어떤 상황에서 Ajax 호출 기반 서비스를 구축할 것인가? 그 중에서도 서버를 어떻게 디자인 하여야 할 것인가?에 대해서 이야기 하고자 합니다. .. Ajax에서 상태 변화시 호출되는 함수를 함수명으로 지정하기. XMLHttpRequest 객체의 인스턴스의 onreadystatechange 값에 함수명을 기입함으로써, 상태 변화시 호출되는 함수를 지정하였습니다. 이렇게 할 경우, 호출되는 함수는 1개뿐이며, 만약 이 함수를 바꿔주고 싶으면... 어떻게 해야할까요. 함수명을 바로 기입하면 될까요? 안됩니다. Ajax 호출 흐름과 기본적인 준비 운동 2/2 에서 처럼 callRequest() 함수를 만들어서 호출시 활용하는데, 만약 이 callRequest 함수를 보다 범용적으로~~~ ^^ 바꾸고자 한다면, 어떻게?? open 함수도 맘대로 셋팅할 수 있고.. 하도록요. 그러면, 다음과 같이 eval함수를 이용할 경우 편리합니다. 그럼 Ajax 호출 흐름과 기본적인 준비 운동 2/2 에 있는 callRequest 함.. Ajax 호출 흐름과 기본적인 준비 운동 2/2 이번에는 "Ajax 호출 흐름과 기본적인 준비 운동 1"의 과정으로 만들어진 결과를 바탕으로 Ajax 통신을 호출하는 새로운 함수(이름을 callRequest())를 만들어 이 새로 만든 함수 내부에서 아래와 같은 open , send 2개의 함수를 실행합니다. 요청은 XMLHttpRequest 객체의 인스턴스의 open , send 이 두 함수를 실행하면서 이루어집니다. 우선 먼저 open 함수 부터 알아보죠. open 함수는 XMLHttpRequest 객체가 서버와 통신을 할 준비를 하게 됩니다. 그리고 3개의 인자값을 요구하게 되는데요. 첫번째 인자값은 HTTP 메소드를 사용할 방식, GET 또는 POST 방식중 선택을 하게 됩니다. 두번째 인자값은 요청을 하게 될 서버의 웹 서버의 주소, 즉 UR.. Ajax 호출 흐름과 기본적인 준비 운동 1/2 Ajax도 실행에 관련된 메커니즘이 존재하겠죠. 이 메커니즘을 알아보려합니다. Ajax는 javascript 기반을 작동을 시행하고 처리합니다. 이름도 Asynchronous Javascript and XML 이니까요. Javascript는 기본적인 부분 정도는 아신다는 가정하에 진행하겠습니다. 변수 선언, 함수선언.. 그리고 이벤트 처리 등.. 과 같은 것들을요. 우선 사용자가 짜 놓은 HTML 코드에서 이벤트가 발생을 하면, 예를들어, 버튼이 클릭되었다던가 하는 거요. 자~ 그러면, 다음부터는 소스코드를 하나씩 놓고 보면서 생각해봅시다. 첫번째로 만들 소스코드는 Ajax 통신을 할 수 있는 객체를 생성하여 초기화 해주는 것입니다. 생성이라면 XMLHttpRequest 객체를 생성 하는 것이고, 생성된.. Hello~! AJAX ... 올초 AJAX라는 것에 대해서 이야기를 들었습니다. 복학 초기라서~, 시작한지 당연히 얼마 되지 않겠죠? ^^ 그래서 카테고리 주제로 잡기에 너무~~~~~ 이르지 않을까. 솔직히 고민됩니다. 하지만! 지금 이순간도 생각과 고민.. 그리고 의견을 쬐금이라도 더 알고 싶어하는 분들과 이야기를 나누기 위해 이렇게 글을 씁니다. AJAX (Asynchronous Javascript And XML) 비동기 자바스크립트 그리고 XML 입니다. 이거 참... 비동기, 너무나도 쉬운 분들이 많지만, 아닌 분들을 위해 짧게 짚어가고자 합니다. 비동기라는 것은 동기의 반대라는 생각으로 부터 출발하셔야 합니다. 동기는 어떤 두개가 서로의 상태를 일정하게 유지하는 것입니다. 즉, 둘이 이야기를 한다고 가정하면, 두 사람이 모.. 이전 1 다음
