heenam
Ajax 본문
Ajax 개요
Ajax는 서버와 데이터를 교환하는 기술의 하나이다. Ajax는 클라이언트가 서버와 적은 양의 데이터를 교환하여 비동기
적으로 THML 페이지를 업데이트 할수 있다. 따라서 Ajax는 빠르고 동적인 대화형 웹 페이지를 만드는 데 유용하다.
Ajax는 대표적으로 구글 맵에 사용된다. 이외에도 Ajax를 이용하면 혁신적인 메일 서비스, 게시판 서비스, 블로그 서비
스 등이 가능하다. Gmail, 유투브, 페이스북이 모두 Ajax를 사용하고 있다.
Ajax는 새로운 프로그래밍 언어가 아니라 기존의 표준 기술을 현명하게 사용하는 새로운 기술이다.
Ajax 외 기존 방법의 비교
기존의 웹 브라우저는 서버로 부터 페이지 단위로만 받을 수 있었지만 Ajax를 사용하면 XML 파일 조각 단위로 받을
수 있다. 따라서 전체 페이지를 다시 로드하지 않아도 XML파일 조각을 자바스크립트가 처리해서 페이지 일부를 동적
으로 업데이트할 수 있다.
Ajax동작 원리
Ajax의 중심에 있는 기능은 페이지와 상호작용하는 사용자를 방해하지 않으면서 비동기적으로 웹 서버와 통신할 수 있
는 기능이다. XMLHttpRequest 객체를 사용하면 이것이 가능해진다. Ajax에 의하여 우리는 전체 페이지의 업데이트 없
이 특정 DOM 객체를 새로 업데이트할 수 있다. 사용자가 HTTP 요청을 제출할 때 실제로 무슨 일이 일어나는지 살펴
보자.
Ajax 애플리케이션의 단계
1. 클라이언트 컴퓨터에서 사용자가 문자를 입력하는 것과 같은 이벤트가 발생하면 자바스크립트 함수가 호출된다.
함수에서 XMLHttpRequest 객체의 인스턴스가 생성된다.
2. XMLHttpRequest객체는 현재 THML 페이지의 상태를 가지고 있는 XML 메시지를 구성하여, 웹 서버로 보낸다.
3. XMLHttpRequest 객체는 웹 서버에서 응답 XML 메시지를 수신한다.
4. 웹 서버에서 반환된 메시지를 파싱해서 DOM 객체를 업데이트 한다.
<!DOCTYPE html>
<html>
<head>
<script>
function getFromServer() {
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
document.getElementById("target").innerHTML = req.responseText;
}
}
req.open("GET", "testfile1.txt", true);
req.send();
}
</script>
</head>
<body>
<div id="target" style="width: 300px; height: 60px; border: solid 1px black;"></div>
<button type="button" onclick="getFromServer()">GET DATA</button>
</body>
</html>
Ajax 코드 위치
앞의 Ajax 애플리케이션은 하나의 div 섹션과 하나의 버튼을 가진다. div 섹션은 서버로부터 오는 정보를 표시하기 위
하여 사용된다. 사용자가 버튼을 클릭하면 getFromServer() 메서드가 호출된다.
<div id="target" style="width: 300px; height: 60px; border: solid 1px black;"></div>
<button type="button" onclick="getFromServer()">GET DATA</button>페이지 헤드 섹션에 있는 getFromServer() 함수는 Ajax 코드가 포함된다.
<script>
function getFromServer() {
... //여기에 Ajax 코드가 포함된다.
}
</script>XMLHttpRequest 객체
Ajax의 핵심은 XMLHttpRequest 객체이다. 최신의 웹 브라우저는 XMLHttpRequest 객체를 지원한다.
XMLHttpRequest 객체는 배경에서 서버와 데이터를 주고받을 때 사용된다. 이것은 즉 전체 페이지를 다시 로드하지
않아도 웹 페이지의 일부를 업데이트하는 것이 가능하다는 의미이다. 데이터의 형식은 XML이 된다.
XMLHttpRequest 객체를 생성하는 구문은 다음과 한다.
req = new XMLHttpRequest();예전 버전의 인터넷 익스플로러는 ActiveX 객체를 사용한다.
req = new ActiveXObject("Microsoft.XMLHTTP");IE5와 IE6를 포함한 모든 웹 브라우저를 처리하기 위하여 먼저 브라우저가 XMLHttpRequest 객체를 지원하는지를 체크
한다. 만약 지원하면 XMLHttpRequest 객체를 생성하면 된다. 그렇지 않으면 ActiveXObject를 생성한다.
서버로 요청 보내기
서버로 요청을 보내기 위하여 우리는 XMLHttpRequest 객체의 open()과 send() 메서드를 사용한다.
req.open("GET", "testfile1.txt", true);
req.send();open()은 XMLHttpRequest 객체를 필요한 값으면 초기화한다. 즉 요청의 종류, url, 비동기 여부 등을 설정한다.
req.open(method, url, async);
method: 요청의 타입("GET" 또는 "POST")
url: 서버에서 파일의 위치
async;: 비동기여부(true 또는 false)
send()는 요청을 서버로 전송한다.
GET 요청
위의 예제에서는 단순히 텍스트 파일을 요청하였다. "test.jsp"를 요청하는 GET 요청을 작성하여 보면 다음과 같다.
req.open("GET", "testfile1.txt", true);
req.send();일반적인 경우에 GET 방식이 POST 방식보다 간단하며 빠르지만, 캐시된 결과를 얻을 수도 있고 데이터가 큰 경우에는
힘들다. 또 보안성이 약하다.
POST 요청
"test.jsp"를 요청하는 POST 요청을 작성하여 보면 다음과 같다.
req.open("POST", "test.jsp", true);
req.send();HTML 폼 데이터를 POST 방식으로 보내기 위해서는 setRequestHeader()를 이용하여 HTTP헤더를 추가한다.
send() 메서드 안에서 보내고 싶은 데이터를 지정한다.
req.open("POST", "test.jsp", true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send("input1=kim&input2=ChulSoo");url지정
open()의 url 매개 변수는 서버 상의 파일 주소이다.
req.opne("GET", "test.jsp", true);파일은 어떤 종류라도 상관없다. 즉 .txt and .xml, 또는 서버 스크립트 파일인 .jsp, .asp, .php등의 어떤 종류도
가능하다. 스크립트 파일을 선택하면 응답을 보내기 전에 서버에서 어떤 동작을 수행한 후에 결과를 HTML 파일로 작
성하여 보낼 것이다.
비동기화 여부
Ajax가 비동기 자바스크립트와 XML의 약자이기 때문에 XMLHttpRequest 객체가 Ajax처럼 동작하려면 open() 메서드
의 async 매개 변수는 당연히 true로 설정되어야 한다.
req.open("GET", "test.jsp", true);비동기 요청을 보낼 수 있다는 것은 웹 개발자에게는 커다란 진전이다.
Ajax의 도입에 따라서 자바스크립트는 서버의 응답을 기다릴 필요가 없다. 대신에 다른 스크립트를 실행할 수 있다.
서버가 응답이 준비되었을 떄 응답을 처리한다.
async로 true를 설정한 경우
응답이 준비되면 onreadystatechange 이벤트가 발생하게 되고 코드에서는 이 이벤트를 처리하는 함수를 만들어 놓으
면 된다.
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
document.getElementById("target").innerHTML = req.responseText;
}
}async로 false를 설정한 경우
async로 false를 설정하려면, open()의 3번째 매개 변수를 false로 변경한다.
req.open("GET", "testfile1.txt", false);async로 false를 사용하는 것은 권장하지 않는다.
onreadystatechange 이벤트
서버로 부터 응답이 오면 onreadystatechange이벤트가 발생한다. onreadystatechange이벤트는 ReadyState가 변경될
때마다 발생된다. ReadyState 속성은 XMLHttpReques의 현재상태를 가지고 있다.
서버응답
서버에서 응답을 얻으려면 XMLHttpRequest 객체의 responseText또는 responseMXL 속성을 사용한다.
responseText는 응답이 텍스트 형식일 경우에 사용한다. responseXML은 응답이 XML일 경우에 사용한다.
jQuery를 이용하여 Ajax 사용하기
jQuery를 사용하면 좀 더 쉽게 Ajax를 사용할 수 있다. jQuery는 Ajax의 기능을 사용할 수 있는 여러 가지 메서드를 제
공한다. 이러한 Ajax메서드를 사용하면 원격 서버로부터 HTTP Get 이나 HTTP Post를 사용하여 텍스트, HTML, XML,
JSON을 요청할 수 있으며 이러한 외부 데이터를 웹 페이지의 특정 요소로 로드할 수 있다.
get()
jQuery의 get()과 post() 메서드는 HTTP GET 또는 POST 요청 방법을 사용해 서버로 부터 데이터를 요청할 수 있는
메서드 이다. get()과 post()는 선택자를 가지지 않는다. 따라서 jquery.get()으로 표기하거나 $.get()으로 표기한다.
$.get() 메서드는 HTTP GET request를 사용해 서버로부터 데이터를 요청한다. 다음과 같은 형식을 가진다.
$.get(URL, callback);URL: 서버로부터 로드를 원하는 URL
callback: get()이 완료된 후에 호출되는 함수
post()
$.post() 메서드도 아주 유사한 형태를 가지고 있다. $.post() 메서드는 HTTP POST request명령을 이용해 서버로부터 데
이터를 요청한다.
$.post(URL, data, callback);URL: 서버로부터 로드를 원하는 URL
data: request 요청과 함께 보내지는 "key/ value" 형태로 되어 있는 쿼리 문자열
callback: 요청이 성공한 후에 실행되는 함수
load() 메서드
load() 메서드는 간단하지만 강력한 Ajax 메서드이다. load() 메서드는 서버로부터 데이터를 로드해서 선택된 요소에
반환된 데이터를 집어 넣는다.
$(selector).load(URL, data, callback);URL: 로드를 원하는 URL
data: request 요청과 함께 보내지는 "key/ value" 형태로 되어 있는 쿼리 문자열
callback: load()가 완료된 후에 호출되는 함수
load()가 서버로부터 데이터를 가져오는 가장 간단한 방법으로 $.get(url, data, success)와 유사하다. 성공적인 응답이
이루어지면 .load()는 선택된 요소의 HTML콘텐츠를 반환된 데이터로 설정한다.
'Wep Programming > 기타' 카테고리의 다른 글
| JSON (0) | 2020.07.23 |
|---|---|
| jQUERY (0) | 2020.07.20 |