1. asynchronous javascript & xml
가. javascript에 의한 비동기적인 데이터를 클라이언트인 웹 브라우저와 서버 사이에서 교환하는 방식
나. 목적 : 웹 어플리케이션을 빠른 응답을 갖는 구조로 가지기 위해 사용
다. 적용 기술 : html+css, dom, xml, xmlhttprequest, javascript등 사용
라. 실행 프로세스
1) 이벤트 발생
2) xhr 객체 생성
3) 클래이언트 요청(xml, json, html, csv, text)
4) controller/model 실행 및 view로 응답
5) 응답(xml, json, html, csv, text)
6) 응답 처리 메소드 실행
2. xhr 객체의 속성
가. readState : ajax 객체의 요청, 응답 상태를 나타내는 숫자
0:request 가 초기화 되지 않음(open() 호출 전)
1:request가 셋업되고 보내지 않음(send 호출 전)
2:request가 보내지고 진행중(send() 호출 후)
3:response에서 부분적 데이터를 받으며 미완료 상태
4:서버의 응답이 완료된 상태
나. status: 서버로부터 응답된 http 상태 코드를 보내는 것
202:정상
404:페이지 없음
405:요청방식 오류
500:서버오류
다. onreadystatechange
요청에 대한 응답을 받을때마다 호출
콜백 함수 지정 속성
라. statustext
서버로부터 받은 응답 상태를 나타내는 문자열
정상 : ok
없으면 : not found
마. responsetext
서버로부터 응답된 문자열 데이터를 보유
바. responsexml
서버로부터 응답된 xml 데이터를 보유
dom 객체로 파싱 가능
<!DOCTYPE html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//////////////////////////////////////////////important
var xhr = null;
function getXHR() {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else { //ie 6.0 이하
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//////////////////////////////////////////////
function getData() {
getXHR();
xhr.open("get", "sample.jsp", true); //서버쪽에 ajax 요청 준비
xhr.onreadystatechange = callback; //callback method 지정
xhr.send(null); //서버쪽에 ajax 요청
}
//서버로부터 응답이 도착했을 때 처리하는 함수
function callback() {
if (xhr.readyState == 4) { //서버로부터 결과 전송 완료
if (xhr.status == 200) { //정상 데이터
var data = xhr.responseText;
document.getElementById("result").innerHTML = data;
}
}
}
</script>
</head>
<h1>ajax test</h1>
<input type="button" value="get data" onclick="getData()">
<hr>
<div id="result"></div>
'Programming Language > Javascript' 카테고리의 다른 글
| JSON (0) | 2016.01.21 |
|---|---|
| jquery (0) | 2016.01.20 |
| 1. javascript 기본 (0) | 2016.01.19 |
| 자바스크립트를 하면서 필요한 준비 (0) | 2016.01.19 |
| Apach-tomcat 설정 방법(windows) (0) | 2016.01.19 |
