티스토리 뷰

AJAX 이야기

파일 읽어서 화면에 출력하기



이 예제는
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first에서 퍼온 예제입니다.

 

Change Content 버튼을 누르면
ajax_info.txt 파일에 있는 내용을 읽어 화면에 출력합니다.

 

1. ajax_ex1.html 파일 만들기

ajax_ex1.html 파일을 만들고 아래와 같이 입력합니다.

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
  if (window.XMLHttpRequest)
  {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","ajax_info.txt",true);
  xmlhttp.send();
}
</script>
</head>

<body>

<div id="myDiv">

  <h2>Let AJAX change this text
  <button type="button" onclick="loadXMLDoc()">Change Content

</body>
</html>


2. ajax_info.txt 파일 만들기

AJAX is not a new programming language.

AJAX is a technique for creating fast and dynamic web pages.

 

실행하면 아래와 같이 나타납니다.

아래 그림은 첫번째 그림입니다. 


위 그림에서 Change Content 버튼을 누르면 아래와 같은 화면으로 바뀝니다.

 



댓글