1. Ajax (Asynchronous Javascript XML)
- 비동기 방식의 자바스트립트와 XML
- 웹브라우져가 아닌 XMLHttpRequest객체를 통해 웹서버와 통신한다.
- 웹서버의 응답결과는 html이 아닌 xml또는 단순 텍스트이다.
- 페이지의 이동없이 결과가 화면에 반영된다.
2. XMLHttpRequest를 사용한 프로그래밍 순서
1) 웹브라우져에 내장하고 있는 XHR객체 얻어오기
2) XHR객체를 이용해 웹서버에 요청 전송하기
3) 콜백메소드를 통해 웹서버에서 응답된 정보를 화면에 반영하기
* xml파일을 읽어서 화면에 표시하는 예제
* title, price 태그의 내용을 읽어서 보여줌.
< server1.xml >
<?xml version="1.0" encoding="UTF-8"?>
<result>
<title>ajax test</title>
<price>10000</price>
</result>
< test01.html >
버튼 클릭하면
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
var xhr=null;
function getXHR(){
if(window.XMLHttpRequest){
//IE 7.0이상,Chrome,Firefox,Safari,...
return new XMLHttpRequest();
}else{
//IE 하위버전(6.0이하)
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getData(){
//1. XMLHttpRequest객체 얻어오기
xhr=getXHR();
//alert(xhr);
//2. 콜백메소드 설정하기(서버로부터 응답이 오면 자동호출되는 메소드)
xhr.onreadystatechange=callback;
//3. open메소드로 초기화작업 설정하기
//xhr.open("요청방식","서버주소",비동기통신방식인지)
xhr.open("GET","server1.xml",true);
//4. send메소드를 통해서 서버에 요청하기
xhr.send(null);
}
//서버로부터 응답이 오면 자동 호출!
function callback(){
//readyState==4 : 서버로부터 응답이 완료된 경우
//status==200 : 서버로부터 응답이 성공적으로 이루어진 경우
if(xhr.readyState==4 && xhr.status==200){
//응답된 값은 responseText라는 속성으로 얻어옴:텍스트형태로 얻어옴
//var xml=xhr.responseText;
//응답된 값을 XML형태로 얻어옴
var xml=xhr.responseXML;
//alert(xml);
var title=xml.getElementsByTagName("title")[0].firstChild.nodeValue;
var price=xml.getElementsByTagName("price")[0].firstChild.nodeValue;
//alert(title +"," + price);
//div참조값 얻어오기
var div=document.getElementById("result");
//div에 서버로부터 전송된 데이터 보이기
div.innerHTML="도서제목:" + title +"<br/>" +
"가격:" + price;
}
}
</script>
</head>
<body>
<input type="button" value="서버로부터 전송받기" onclick="getData()"/>
<div id="result">
</div>
</body>
</html>
'WEB > Ajax Json' 카테고리의 다른 글
| AJAX #06 JSON 관련 jar, javascript파일 (0) | 2013.05.04 |
|---|---|
| AJAX #05 JSON (0) | 2013.05.04 |
| AJAX #04 댓글 달기 예제 (1) | 2013.05.04 |
| AJAX #03 XML 태그를 만들어 호출한 곳으로 전송하는 예제 (0) | 2013.05.04 |
| AJAX #01 설명 (0) | 2013.05.04 |