티스토리 뷰

IT 이야기/프로그래밍

AJAX 예제. 파일 읽어서 화면에 출력하기

하늘과 나b 2010. 8. 15. 23:07
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 버튼을 누르면 아래와 같은 화면으로 바뀝니다.

 



'IT 이야기 > 프로그래밍' 카테고리의 다른 글

HTML의 시작  (0) 2010.08.16
AJAX #1. AJAX 소개(AJAX Introduction)  (0) 2010.08.16
AJAX 예제(AJAX Example)  (0) 2010.08.16
HTML 그 두번째 이야기  (0) 2010.08.15
HTML 글씨에 효과주기  (0) 2010.08.15
AJAX 예제. XML 파일 읽어서 출력하기  (4) 2010.08.15
[Javascript] 마우스 금지 소스  (0) 2010.08.15
[HTML] HTML5 문서타입(doctype)  (0) 2010.08.09
[Javscript] innerHTML 예제  (2) 2010.08.09
[Javascript] 즐겨찾기 추가 스크립트 소스  (0) 2010.08.09
공유하기 링크
댓글