'Ajax'에 해당되는 글 2건

  1. 2006.12.12 XMLHttpRequest (1)
  2. 2006.09.23 Ajax 마스터하기

XMLHttpRequest

Study/Web 2006. 12. 12. 16:40

이번에는 XMLHttpRequest 오브젝트에는 어떤 메소드가 있는지 살펴보자.

void open(string method, string url, boolean asynch, string username, string password) : 요청을 초기화한다. 파라미터중에서 method, url 두개만 필수항목이고 나머지는 선택항목이다. method 는 POST, GET, PUT 3가지중 하나를 사용하면 되며, url 은 요청하고자 하는 서버의 url 이다. asynch 는 요청이 비동기인지 여부를 판단하는 항목이다. 입력하지 않으면 디폴트로 true 가 설정되어 요청은 비동기로 처리된다. false 로 설정하면 요청은 동기로 처리되기 때문에 서버에서 응답을 받을때까지 프로세스는 기다리게 된다. 사실 XHR 을 사용하는 가장 큰 이점중의 하나인 비동기 처리를 위해서는 asynch 항목을 true 로 설정해서 사용해야 한다. false 를 설정한다면 XHR 을 사용하는 이점이 그만큼 줄어든다.

void send(content) : 실질적으로 요청을 서버로 보낸다. 요청이 비동기이면 이 메소드는 바로 리턴되지만 요청이 동기이면 서버에서 응답을 받을때까지 계속 대기한다. content 는 선택사항이며, DOM 객체(XML 객체)이거나 input stream, string 값으로 설정할 수 있으며 HttpRequest body 의 한 부분으로 서버로 전달된다. content 에 값을 넘기려면 open() 메소드는 반드시 POST 로 설정해야 하며, GET 방식으로 요청하려면 null 을 설정하면 된다.

open(), send() 메소드가 가장 많이 사용되는 메소드들이다. 나머지 메소드에 대해서도 알아보자.

void setRequestHeader(string header, string value) : header 에 해당하는 value 값으로 HttpRequest  헤더에 값을 설정하는 메소드로써, 반드시 open() 메소드 다음에 위치해야 한다.

void abort() : 요청을 중지한다.

string getAllResponseHeaders() : 요청에 대응되는 응답의 헤더정보를 리턴한다. 즉, Content-Length, Date, URI 등을 포함하는 헤더정보를 string 형식으로 반환한다.

string getResponseHeader(string header) : 응답의 헤더정보중에서 header 에 대응되는 값을 string 형식으로 반환한다.

이번에는 XMLHttpRequest 의 속성중에서 중요한 몇가지를 알아본다.

onreadystatechange : 자바스크립트 콜백함수(funtion pointer)를 저장한다. 콜백함수는 readyState 값이 변할때 마다 호출된다. 요청이 서버로 보내지면 readyState 는 5가지 숫자값으로 계속 변화가 일어나게 된다.

readyState : 요청의 상태를 의미한다.(0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete)

responseText : 서버의 응답을 string 형식으로 나타낸다. 단순 text를 innerHTML 속성으로 표현하기에는 알맞지만 논리적으로 파싱하거나 동적으로 페이지 컨텐츠를 생성하기는 힘들다.

responseXML : 서버의 응답을 XML 로 나타낸다. 이 속성은 DOM 객체로 파싱할 수 있다.

status : 서버로부터의 HTTP 상태코드이다.(예 200(OK), 404(NOT Found), 202(결과 값이 없을 때)등등)

statusText : HTTP 상태코드에 대한 텍스트 값이다.(예 OK, NOT Found 등등)

Posted by comtizen
TAG Ajax

댓글을 달아 주세요

  1. supra 2013.07.28 16:54  댓글주소  수정/삭제  댓글쓰기

    눈을 감아봐 입가에 미소가 떠오르면 네가 사랑하는 그 사람이 널 사랑하고 있는거야.

Ajax 마스터하기

Study/Web 2006. 9. 23. 12:07

Ajax 마스터하기



저자 : 이선민, Technical Consultant, IBM Innovation Center (IIC), IBM Korea.

2006년 9월 4일
지난 한 해 미국을 중심으로 인터넷 업계를 뜨겁게 달군 키워드 중 하나는 '웹2.0' 이었으며, Google의 Gmail과 Maps 그리고 사진공유 사이트인 Flickr 등을 통해 국내 에서도 이에 관한 관심이 매우 높아졌습니다. '웹2.0 컨퍼런스'를 기획한 ‘오라일리(O’Reilly)’사의 팀 오라일리 회장은 “웹2.0 시대로의 전환은 ‘웹의 플랫폼화(The Web as platform)’에 있다”라고 언급했으며, 여기서의 플랫폼은 MS의 Windows 와 같은 운영체제를 말합니다. 즉 지금까지는 윈도우즈를 부팅시킨 후 할 수 있었던 워드나 엑셀 작업등을 이제는 운영체제에 구애됨이 없이 웹브라우저를 통해서도 할 수 있다는 것입니다.

Ajax가 주목받는 이유는 이러한 웹2.0 시대를 연 많은 사이트 들이 Ajax 기술을 활용하고 있기 때문입니다.

Ajax(Asynchronous Java Script and XML)는 클라이언트 측 스크립팅을 사용하는 웹 애플리케이션 개발 방식으로서 http를 통해 xml 데이터를 웹 서버와 교환합니다. 따라서 웹 페이지는 동적으로 업데이트 될 수 있습니다. 전체 페이지를 리프레시 하여 응답성이 떨어지게 하지도 않습니다. Ajax를 사용하여 보다 풍부하고 동적인 웹 애플리케이션 사용자 인터페이스를 만들 수 있습니다. Ajax는 기술이 아니며, 오히려 여러가지 기술이 복합된 방법론 또는 패턴에 더 가깝습니다.

본 특집은 Ajax에서 사용되고 있는 XMLHttpRequest를 이용한 비동기 자료검색, DOM을 이용한 상호작용, 모든 것을 결합시켜 정리해 주는 자바스크립트 등에 관하여 자세하게 예를 들어 설명하고 있습니다.

이 시리즈는 모두 5회로 나누어 설명합니다.

  • Part 1: Ajax 소개
    Ajax 애플리케이션에 관한 서론 및 이 애플리케이션에 필요한 몇 가지 기본개념들을 설명합니다.
  • Part 2: JavaScript와 Ajax를 이용한 비동기식 요청
    XMLHttpRequest 객체에 대해 구체적으로 소개합니다. 이 객체는 서버측 애플리케이션이나 스크립트에 대한 요청을 핸들하고, 서버측 컴포넌트에서 리턴 데이터를 처리하는 Ajax 애플리케이션의 핵심 입니다. 모든 Ajax 애플리케이션은 XMLHttpRequest 객체를 사용하기 때문에 Ajax 애플리케이션의 작동은 여기에 얼마나 익숙해지냐에 달려있습니다.
  • Part 3: Ajax의 고급 요청 및 응답
    지난 글에서 다루었던 기초를 넘어서 요청 객체의 세 가지 핵심 부분들-HTTP 준비 상태,HTTP 상태 코드, 요청 유형들-에 대해 자세히 설명합니다. 애플리케이션에 무언가 문제가 있을 때 준비 상태, HEAD 요청을 하는 방법, 또는 400 상태 코드가 의미하는 것이 무엇인지를 이해하면 간단한 디버깅으로 끝낼 수 있기 때문입니다.
  • Part 4: 웹 응답에 DOM 활용하기
    웹 페이지를 정의하는 문서 객체 모델(Document Object Model)을 소개합니다.
  • Part 5 : DOM 다루기
    이번 글에서는 돔을 보다 자세히 연구합니다. 웹 페이지에 대한 특정 모델은 그 페이지의DOM 트리라고 하는데, 이러한 돔 트리의 부분들을 생성, 제거, 변경하는 방법을 설명하고 그 다음 단계인 웹 페이지를 업데이트 하는 방법을 설명합니다. 여러분은 DOM을 통해서 사용자 인터페이스를 변경할 수 있고 인터랙팅 할 수 있습니다. 이것은 실로 엄청난 프로그래밍의 힘과 유연성을 제공해 주는데, 일단 DOM 트리로 작업하는 방법을 배우면 풍부하고 동적인 인터랙티브 웹 사이트를 마스터하는 단계로 넘어갈 수 있다.

이상에서 Ajax 애플리케이션에 필요한 기본개념들에 대해 살펴보았습니다. Ajax라는 용어는 새롭지만, 이를 구현하는 기술요소들은 전혀 새로운 것이 아닙니다. 하지만 이를 이용할 경우 사용자는 원하는 응답을 빠른 시간에 받을 수 있고 이에따라 서버의 부담이 줄어들며, 개발자는 페이지 화면구성을 다이나믹하게 할 수 있고, 플래시나 액티브엑스(ActiveX) 의존도를 상당부분 대체 할 수 있다는 장점이 있습니다. 이 시리즈 이외에도 한국 developerWorks 사이트에 Ajax 에 관련된 글들이 많이 번역되어 게시되고 있으며, developerWorks 사이트에는 최신 기술자료들이 올라와 있으니 즐겨찾아 주시기 바랍니다. 여러분에게 많은 도움이 되기를 바랍니다.

Posted by comtizen
TAG Ajax

댓글을 달아 주세요