Home » 웹 표준 -6. AJAX

웹 표준 -6. AJAX

6.1. Ajax 개요 및 처리방식

  • AJAX는 XML에 기반 한 종합 기술로 비동기 자바스크립트 XML(Asynchronous JavaScript + XML)을 줄인 말로 자바 스크립트로 HTTP 요청을 보내서 XML 응답을 받아서 사용하는 기술이다.
  • 간단히 말하면, 서버 측 Scripts와 통신하기 위한 XMLHttpRequest 객체를 사용하는 것을 말한다.
  • 서버 측으로 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식 등)의 정보를 주고 받을 수 있으며 AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 “비동기성”이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.

Ajax 특징
 비동기 자바스크립트 XML(Asynchronous JavaScript + XML)
 자바 스크립트로 HTTP 요청을 보내서 XML 응답을 받아서 사용하는 기술
 HTTP 요청을 보냄 → XML 문서를 응답으로 받음 → 자동으로 XML 개체가 생성됨 → 자바스크립트는 XML 개체에 접근하여 다양한 작업을 함.
 HTML+CSS, DOM, XML, XSLT, XPath, XMLHttpRequest, JavaScript를 합쳐 사용

Ajax 장점
 비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자는 다른 작업을 할 수 있다.
 데이터만 들어가 있는 형식으로 응답을 받으므로 전통적인 웹 어플리케이션에 비해서 서버 측 처리 속도도 빠르고 전송 데이터양도 훨씬 적다.
 응답으로 받은 XML 문서를 XML 개체로 접근하여 스크립트로 조작하고 XPath를 사용하여 XML 문서를 검색하거나 XSL을 사용하여 변환을 할 수 있다. 따라서 실행 속도가 빠르다.
 불필요한 데이터 요청을 최소화할 수 있고, 많은 일이 클라이언트인 웹 브라우저에서 처리될 수 있다.

Ajax 단점
 외부 검색 엔진이 웹 페이지를 검색할 수 없는 문제가 있다.
 AJAX는 클라이언트 풀링 방식으로 실시간 서비스를 제공할 수 없다.
 AJAX가 포함된 HTML 페이지가 속한 서버가 아닌 다른 서버로 요청을 보낼 수 없고, 클라이언트 PC의 파일에 접근할 수도 없다.

6.2. XMLHttpRequest

  • Java Script를 이용하여 서버로 보내는 Http Request를 만들기 위해서는 이런 기능을 제공하는 클래스 인스턴스가 필요한데, Internet Explorer에서는 XMLHTTP라고 불리는 ActiveX object를 말한다.
  • 그러면 Mozzila, Safari나 다른 브라우저는 Microsoft의 ActiveX 객체의 method와 property를 지원하기 위해 XMLHttpRequest 클래스를 구현하고 있다.
  • 아래는 XMLHttpRequest를 이용하여 비동기 통신을 하는 예제이다.

<js/week4/ajaxExam.js>

<week4/ajaxTest.xml>

번호 설명
(1) ajaxButton이라는 id를 가진 항목이 클릭 되었을 때 makeRequest 함수 호출
(2) 각 브라우저에 따른 XMLHttpRequest 객체 생성
(3) 요청에 대한 응답을 받았을 때 수행 할 동작(불려질 함수) 정의
(4) 요청하는 부분.
* open() 메소드의 첫 번째 파라미터는 HTTP 요구 방식(request method)
– GET, POST, HEAD 중의 하나이거나 서버에서 지원하는 다른 방식입니다.
– 이 파라미터는 HTTP 표준에 따라 모두 대문자로 표기. 그렇지 않으면 (파이어폭스와 같은) 특정 브라우저는 이 요구를 처리하지 않을 수도 있다.

* 두 번째 파라미터는 요구할 페이지의 URL이다.
– 보안을 위해 서드 파티 도메인 상의 페이지를 호출할 수는 없습니다.
– 요구하는 모든 페이지에 정확한 도메인 네임을 사용해야 한다.
– 그렇지 않으면 open() 메소드를 호출할 때 'permission denied' 에러가 발생할 수 있다.

* 세 번째 파라미터는 요구가 비동기식(Asynchronous)으로 수행될 지를 결정합니다.
– 만약 이 파라미터가 TRUE 로 설정된 경우에는 자바스크립트 함수의 수행은 서버로부터 응답을 받기 전에도 계속 진행된다.
(5) send() 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다.
데이터는 서버에서 쉽게 parse할 수 있는 형식(format)이어야 한다. 예를 들자면 아래와 같습니다.
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
또는 JSON, SOAP등과 같은 다른 형식으로도 가능하다. 만약 "POST" type을 보내려 한다면, 요청(request)에 MINE type을 설정 해야 한다. 예를 들자면 send()를 호출 하기 전에 아래와 같은 형태로 send()로 보낼 쿼리를 이용해야 한다.
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
(6) XML문서에 포함 된 데이터를 가져오기 위한 개체 획득
(7) root라는 태그의 데이터를 가져온다.
(8) 가져온 태그의 첫 번째 데이터를 가져온다.

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week4메뉴 -> Ajax

6.3. JQuery Ajax

  • 위의 ajax를 jquery를 이용하면 간단하게 구현 할 수 있다.

<기본 문법>

번호 설명
(1) 전송 할 HTTP Request Method를 지칭한다. GET, POST, PUT, DELETE를 사용할 수 있으며 모든 브라우저를 지원하지 않는다.
(2) 호출 할 url
(3) 결과에 대한 Mime Type을 지정한다. xml, html, json, script, jsoup, text, multiple를 지원한다.
(4) url에 전달할 Arguments를 넣는다. Get과 Post의 형태가 약간 다른 것에 유의할 것.
(5) 성공 시 호출할 function 명을 기재한다.
(6) Request 실패 시 호출되는 function 명을 기재한다.
  • <.post / .get을 사용한 방법> *

번호 설명
(1) url, data, 호출 할 함수를 인자로 받는다.

<js/week4/jqueryAjax.js>

번호 설명
(1) getJSON을 사용. 인자로 url, 호출 할 함수를 받는다.
(2) 결과 값을 for-each문으로 돌리며 출력

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week4메뉴 -> JQuery Ajax