자바 스크립트에서 HTTP 요청하기

Java Script
AJAX
2007. 7. 16.
안혁
http://hyok.kr

.참고문헌
- Beginning Ajax with ASP.NET <Wrox>

AJAX라는 것은 기존에 없던 새로운 언어가 아닙니다. "Java Script에서 XML을 비동기적으로 요청하여 기존 웹프로그래밍의 문제점을 해결한다"라고 하는 기존 기술에 대한 재발견이지요. 이미 AJAX가 이야기 된지도 오래 되었기에, 이미 다들 알고 있는 사실이 아닌가 생각됩니다. 앞에서 이야기한 기술의 핵심인 '그' 비동기적 요청이라는 것을 해보도록 하겠습니다.

Java Script에서 HTTP를 요청하려면 HTTP 객체를 먼저 생성하여야 합니다. 브라우저에 따라 조금 다른데요. 비 MS Explore에서는
xmlHttpObj = new XMLHttpRequest();
MS Explore에서는 버전에 따라
xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
또는
xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
의 방식으로 객체를 생성할 수 있습니다. 이를 코드로 표현하여 본다면
if(window.XMLHttpRequest)
xmlHttpObj = new XMLHttpRequest();
else
{
try
{
xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
}
정도로 표현할 수 있겠습니다. 객체 생성시 마다 매번 이를 기술하는 것보다 함수로 만들어 호출하는 것이 좋으리라 생각됩니다. 저는 다음과 같이 작성하여 이를 CommonAJAXLibrary.js라는 파일로 저장하였습니다. 함수명에 XML글자가 들어있는 것은 이 함수의 주목적이 XML을 다루것에 있기 때문입니다. 꼭 XML만 요청할 수 있어서 그런 것은 아니며 HTML페이지도 요청할 수 있습니다. CreateXmlHttpRequestObject() 함수 위에 존재하는 5개의 변수는 이후에 사용될 상수값입니다. 이에 대해서는 잠시 후 설명드리겠습니다. 여기서는 상수 4만 필요하지만, 코드에 4만 적혀있으면 이해하기 더욱 힘들 것 같아 모두 기록해둡니다. 변수명을 보시면 각각이 무었인지 추측하실 수 있으리라 생각됩니다. 일단 넘어갑시다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

  var READYSTATE_UNINITIALIZED = 0;
  var READYSTATE_LOADING = 1;
  var READYSTATE_LOADED    = 2;
  var READYSTATE_INTERACTIVE = 3;
  var READYSTATE_COMPLETE = 4;

  // XML HTTP Request 객체생성, 반환
  function CreateXmlHttpRequestObject()
  {
      if(window.XMLHttpRequest)
      xmlHttpObj = new XMLHttpRequest(); // for non-MS browsers
      else
      {
      // for MS browser by version.
      try
      {
      xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e)
   {
      xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
      }
      }

      return xmlHttpObj;
  }

일단 위의 코드를 CommonAJAXLibrary.js라는 화일로 저장한 후 다음의 코드를 따라오세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

17
18
19
20
21
22

6 : xmlHttpObj변수에 방금 만든 함수를 사용하여 XMLHttpRequest객체를 생성합니다.
10 : url에 요청할 페이지의 웹주소를 넣은 후 이 11번째 url을 줄에서 요청 페이지로 설정합니다.
11 : xmlHttoObj.open("GET", url, true)이라하여 요청 URL을 설정하는데, 3번째 인자가 false이면 동기식, true이면 비동기식 요청입니다. 동기식으로 요청하면 응답이 있을때까지 대기하며, 비동기식으로 요청하면 응답이 있을때까지 다른 일을 합니다.
12 : xmlHttpObj.onreadystatechange는 이름으로 미루어 보아 요청상태가 변할때 호출하게 될 함수를 지정하는 것이라 추측 가능하군요. 상태가 변할때마다 호출하는데, 내용을 보면 '완료'상태가 되었을때 xmlHttpObj.responseText 즉 요청한 HTML을 divResults라는 녀석에게 대입하라는 내용입니다. divResults는 <div>테그입니다. 오해할만한 것이 있다면, 지금까지는 실행이 아니고 설정이라는 것입니다.
19 : xmlHttpObj.send(null)이라는 명령으로 설정에 따라 요청이 시작됩니다. 눈에는 보이지 않지만, 뒤에서 요청이 이루어지고 완료가 되었을때 결과가 <div>테그인 divResults에 입력됩니다. 그러면 그 순간 결과는 화면에 출력되겠지요.

다음은 그 출력을 위한 HTML페이지 입니다. 위 자바스크립트와 같은 화일에 입력하셨야 합니다.

1
2
3
4
5
6
7
8

<body>
<form id="form1" method="post" runat="server">
<input type="button" onclick="MakeXMLHttpCall();" value="Test XMLHTTP Call" />
<br />
<br />
<div id="divResults">(no results)</div>
</form>
</body>

위의 자바스크립트와 이 HTML을 한 화일에 작성하여 마음에 드는 이름으로 저장하십시오. 코드를 그대로 따라오셨다면, 이 화일과 CommonAJAXLibrary.js는 같은 폴더에 있어야 합니다. 다음의 XML코드가 바로 요청대상인 DataFile.xml입니다. 물론 이 화일도 같은 위치에 있어야 합니다. 내용은 꼭 XML이 아니어도 됩니다. 일반 HTML로 작성해도 되며 텍스트 문서이어도 상관없습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?xml version="1.0" encoding="utf-8" ?>
<Customers>
<Customer>
<Firstname>Foe</Firstname>
<Lastname>Bloggs</Lastname>
<email>joe@bloggs.com</email>
</Customer>
<Customer>
<Firstname>Alen</Firstname>
<Lastname>Anonymous</Lastname>
<email>anon@ymous.com</email>
</Customer>
<Customer>
<Firstname>Marvin</Firstname>
<Lastname>Martian</Lastname>
<email>marvin@mars.com</email>
</Customer>
</Customers>

HTML 화일을 웹 브라우저로 열면 다음과 같은 화면이 나오게 됩니다.

버튼을 누르면 다음과 같이 요청된 페이지가 출력됩니다.

'HTML > AJAX' 카테고리의 다른 글

자바 스크립트에서 HTTP 요청으로 XML을 받아 접근하여 보기 (0)	2008.01.17

Hyok's .Net St[or][ud]y

자바 스크립트에서 HTTP 요청하기

'HTML > AJAX' 카테고리의 다른 글

티스토리툴바

자바 스크립트에서 HTTP 요청하기

'HTML > AJAX' 카테고리의 다른 글

'HTML/AJAX' Related Articles

티스토리툴바