- Ajax의 기초 -
Ajax = Asynchronous JavaScript + XML = 비동기 JavaScript + XML의 약자. 예) 구글맵 페이지는 갱신되지 않고 웹에 표현되는 정보가 바뀐다. Ajax은 기술적으로는 JavaScript에 CSS, HTML, XML 등을 조합한 것이다.XMLHttpRequest라는 오브젝트를 활용해서 비동기적으로 데이터를 추출하지만, Ajax자체의 정의가 모호하기 때문에 그 경계를 저하기는 쉽지 않다. Ajax의 송수신 데이터는 XML뿐만 아니라 텍스트도 사용할 수 있다. 또한, XMLHttpRequest 오브젝트를 사용하지 않고 Ajax를 실현할 수도 있다. Ajax에서는 XMLHttpRequest 오브젝트를 사용하여 HTTP를 매개로 서버와 통신하고, XML 등의 데이터를 송수신한다. 이제 클라이언트 측의 JavaScript가 아닌 서버 사이드 쪽의 JavaScript를 살펴보자! |
|
Lesson 1 |
|
Ajax를 사용한 페이지에서는 페이지를 새로 고치는 것과는 다른 별도의 비동기적 통신을 수행해서 마우스 등의 조작에 의한 데이터를 서버로부터 추출하여 페이지를 표시한다. XHTML(eXtensible Hyper-Text Markup Language) - 텍스트 형식으로 문서 구조를 작성하는 방법으로 XML이 있다. XML은 웹 페이지 형식에 구애받지 않고 문서 구조를 기술하는 서식이지만, 기술 방법은 HTML보다 엄격하다. XML 규칙에 따라 HTML을 기술한것이 XHTML이다. DynamicHTML - Style 오브젝트처럼 HTML에 CSS나 JavaScript 등 클라이언트측 스크립트를 조합해서 웹 페이지를 동적으로 새로 고치는 장치이다. |
|
Lesson 2 |
|
XML은 데이터나 문서를 기술하는 마크업 언어 중 하나이다. (쓰이지 않는 경우가 더 많다.) XML은 텍스트 파일에 태그를 사용하여 기술한다. 보기에는 HTML과 비슷하지만 XML의 태그명은 의미에 제한이 없고 이용 상황에 따라 정할 수 있는범용적인 문서 포맷이다. => 태그명으로 문자나 숫자 등 임의의 이름을 설정할 수 있다. <BookTitle> JavaScript가 보이는 그림책</BookTitle> 종료태그가 없는 <hr/>태그 Ajax에서는 브라우저가 받아들이는 데이터의 표준 포맷으로 XML을 사용하고, 이것을 JavaScript가 처리한다. |
|
<?xml version="1.0" encoding="utr-8"?> <picbooklist> <book> <title>UNIX가 보이는 책</title> <author>도서출판 ㅇㅇㅇ</author> <isbn>000-0000-0000-000</isbn> </book> <title>Perl 길잡이</title> <author>ㅇㅇ사</author> <isbn>111-11111-11111-1111</isbn> </book> </picbooklist> |
XML문서는 Unicode 형식의 텍스트파일로 작성한다. |
Lesson 3 |
|
XMLHttpRequest 오브젝트는 HTTP 프로토콜로 서버와 통신하여 텍스트 형식이나 XML 형식의 데이터를 받을 수 있는 오브젝트이다. 다음과 같이 작성한다. xmlhttp = new XMLHttpRequest(); |
|
XMLHttpRequest의 프로퍼티 |
기능 |
onreadystatechange | 송수신 상태가 변했을 때 호출되는 이벤트 핸들러 |
readyState | 오브젝트의 통신 상태 표시 0: 미초기화 1: op2n() 메서드 성공 2: 요소의 송신에 성공 3: 수신 중 4: 수신 완료 |
responseText | 수신한 텍스트를 나타내는 문자열 |
responseXML | 수신한 XML(DOM 형식) |
status | 서버가 보낸 HTTP 상태 404: 파일이 존재하지 않음 500: 서버 오류 200: OK |
statusText | 서버로부터 보내온 HTTP 상세 상태를 나타내는 문자열 |
XMLHttpRequest의 메서드 | 기능 |
abort() | 현재 송수신을 중지 |
getAllResponseHeaders() | 서버로부터 수신한 모든 헤더 정보를 문자열로 반환 |
getResponseHeader(header) | 서버로부터 수신한 헤더 중 header로 지정한 값을 문자열로 반환 |
open(method, url, async, user, password) | 서버에 대한 요청을 시작 |
send(data) | 요청을 송신 (송신하고 싶은 경우는 null을 지정) |
setRequestHeader(header,value) | 서버에 요청을 보낼 때 헤더에 헤더명과 값을 지정 |
1. Ajax란? | Ajax는 JavaScript에 CSS나 HTML, XML 등과 같은 기존 기술을 조합한 것. Ajax를 사용하면 페이지 새로 고침과는 달리 별도의 비동기적으로 통신해서 마우스 조작 등에 대한 반응을 빠르고 직감적으로 수행할 수 있다. |
2. XML문서가 HTML문서와 다른 점은? | XML은 태그명을 자유롭게 사용할 수 있다. |
3. 거래처 목록을 임의의 XML 태그를 사용해서 만들어보라 <회사명><담당자명><전화번호> 항목을 포함하라 | <?xml version="1.0" encoding="utr-8"?> <clientlist> <client> <company>ㅇㅇ상사</company> <incharge>김ㅇㅇ</incharge> <phone>02-111-2222</phone> </client> </clientlist> |
댓글