AJAX.Widgets: XMLHttpRequest

이 코드는 로컬 파일 또는 HTTP 프로토콜을 이용한 서버의 파일을 읽고자 할 때 사용할 수 있는 예제이다. 주의할 점은 FireFox와 같이 모질라 계열의 브라우저는 서로 다른 도메인의 파일을 읽고자 할 경우 보안상 서비스를 하지 않는다는 점이다.

ActiveX를 이용하지 않고 XMLHttpRequest Object를 이용하여 파일을 읽는 방법은?
FireFox와 MS IE에서 모두 동작하는 File Reader는?
HTML 페이지 또는 CSS 파일을 조합하여 동적으로 적용 가능할까?

Script Code

xmlHttpRequest = function() {
 this.request = null;
 this.action = null;
 this.async = null;
 this.method = null;

 this.Remove = function() {
 }
}

xmlHttpRequest.prototype.createRequest =  function() {
 if (window.XMLHttpRequest){
  this.request = new XMLHttpRequest();
 } else if (window.ActiveXObject){
  try{
   this.request = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(err) {
   this.request = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
}

xmlHttpRequest.prototype.getFileText = function(uri) {
 this.createRequest();

 this.method = "get";
 this.action = uri;
 this.async = false;
 var oRequest = this.request;

 oRequest.onreadystatechange = function() {
  if (oRequest.readyState == 4) { 
   if (oRequest.status == 200  oRequest.status == 0){
    this.request = oRequest;
   }
   else {
    alert("onreadystatechange Error!!!");   
   }  
  }
 };

 try {
  oRequest.open(this.method, this.action, this.async);
  oRequest.send("");
 }
 catch (err) {
  alert("Error!!!");
 }    
}

HTML Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>AJAX Widgets - File Read</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="js/httpRequest.js"></script>

 <script>
  function on_read()
  {
   var url = document.getElementById("sURL").value
   var nawX = new xmlHttpRequest();
   nawX.getFileText(url);  
   document.getElementById("putArea").value = nawX.request.responseText;
   nawX.Remove();
  }
 
 </script>
<body>
 <h2> [AJAX XMLHTTP Request] File 읽기 </h2>
 <input type="text" class="iStr" id="sURL" size="56" value="http://ajax-widget.blogspot.com/" /> 
 <input type="button" value="파일 읽기" onclick="on_read();" />
 <br/> <br/>
 <textarea id="putArea" style="width:78%; height:200px"></textarea>
</body>
</html>

AJAX.Widgets

XMLHttpRequest > File Read

댓글 없음: