이번에는 실제로 생성된 객체에서 사용가능한 Methods와 Properties들에 대해 알아보려고 합니다.
우선 지난번에 설명드렸던 것과 같이 해당 기술은 아직은 웹표준이 아니기 때문에
각 브라우저 별로 그 구현에 있어 약간의 차이점을 가지고 있습니다.
그러나 다행스러운 것은 대부분이 IE의 표준을 따라가고 있으며 큰 차이가 없다는 것입니다.

아래 내용은 지난번 포스트 하단에 있던 참고 사이트를 참고로 정리한 내용으로
크로스 브라우징을 위해 공통적으로 사용가능한 부분만을 정리한 것입니다.


XMLHttpRequest 에서 사용 가능한 Method 들

XMLHttpRequest 에서 사용 가능한 Properties 들


참고로 비교적 최근까지 사용되던 Opera 8.0 버젼의 경우에는
onreadystatechange 프로퍼티에 일부 버그가 있어 onload 를 사용하는것이 좋습니다
그러나 onload 메소드는 IE 등에서는 구현이 되어 있지 않은 메소드 입니다.
또한 setRequestHeader 메소드 역시 Opera 8.0 에는 구현되어 있지 않습니다.
그러나 위 두가지 내용은 Opera 8.01 이후로 해결 되었으며 크게 중요하지는 않을듯 합니다.

그리고 위에는 적지 않았지만 각 브라우저별로 타브라우저에서는 사용하지 않는
메소드나 프로피터를 제공하기도 하니 Reference 를 참고하시기 바랍니다.


이상으로 XMLHttpRequest 객체 생성을 통해 사용가능한
메소드와 프로퍼티(어트리뷰트)들에 대해 알아보았습니다.

다음에는 이를 이용해 간단히 사용가능한 코드를 작성해보도록 하겠습니다.

포스트 관련 키워드

AJAX 의 비동기 요청 구현을 위한 핵심 기술의 근간은 바로 JAVASCRIPT 입니다.
그중에서도 XMLHttpRequest 객체가 있었기에 이를 구현할 수 있었습니다.
이를 통해 페이지 단위의 요청 없이도 그때 그때 필요한 요청과 응답을 받을 수 있게 된거죠.
그렇다면 실제로 해당 객체를 어떻게 생성할지에 대한 이야기를 본격적으로 해보겠습니다.

실제로 XMLHttpRequest 객체는 ECMASCRIPT 표준에서 지원하고 있는 내용은 아닙니다.
MS의 IE5 버젼부터 개발되어 사용되기 시작한 비표준 객체 중 하나 입니다.
그러나 다른 브라우저들도 구현 방식은 서로 조금씩 다르지만 이를 지원하고 있으며
구글 맵을 통해 AJAX가 대중적으로 사용되기 시작하면서 더 많은 브라우저들이 지원하고 있으며
현재는 일반적으로 사용되고 있는 대부분의 브라우저가 지원하는 기능이 되었습니다.
조금 뒤늦은 감이 없지않아 있지만 w3c 에서도 Working-Draft 가 진행중이라 합니다.

자 그러면 이제부터 본격적으로 실제 구현과 관련된 이야기를 해보겠습니다.
XMLHttpRequest 객체는 IE 에서 조차도 표준 객체가 아닌 activeX 객체중 하나였습니다.
즉 해당 객체를 생성하기 위해서는 아래와 같이 activeXObject 메소드를 사용하여야 합니다.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
그러나 이와는 달리 FireFox 나 Opera 등 에서는 window 의 내장객체로 지원을 하고 있습니다.
xmlhttp = new XMLHttpRequest();
따라서 위와 같이 사용법이 서로 다르기 때문에 브라우저에 맞게 이를 생성해야만 합니다.
참고로 IE7 부터는 이전의 방법은 물론 window의 내장객체 방식으로도 생성이 가능해졌습니다.

그렇다면 크로스 브라우징 가능한 XMLHttpRequest 객체를 어떻게 생성해야 할까요??
아래 보여드릴 소스 코드들은 IE6 이상, FF 1.5 이상, Opera 9.0 이상에서 테스트 된 내용입니다.
function getObjXMLHTTP(){ var xmlhttp = false; if(window.ActiveXObject){ try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2) { xmlhttp = false; } } }else if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = false; } return xmlhttp; }
위에 작성된 코드들에 대해 간략하게 부연 설명을 드리자면
getObjXMLHTTP() 함수는 XMLHttpRequest 객체를 생성하여 그 자체를 반환 합니다.
그러나 만약 해당 객체를 지원하지 않는 브라우저라면 false 를 반환하게 됩니다.
이때 var xmlhttp 와 같이 로컬 변수를 선언하여 객체를 생성함으로써
비동기 요청이 중복될 경우에도 객체가 중첩되어 사라지는것을 막을 수 있습니다.

우선 객체 생성을 위해 브라우저에서 어떠한 방식을 지원하고 있는지를 확인합니다.
만약 activeX 객체로 이를 지원하는 브라우저라면 new ActiveXObject() 메소드를 통해
window 내장객체로 지원하는 경우라면 new XMLHttpRequest() 객체로 이를 생성합니다.
실제로 IE7 은 후자의 경우도 정상적으로 지원하지만 IE 계열의 경우 전자의 방식으로
그외의 브라우저 에서는 후자의 방식을 사용하여 객체를 생성하도록 하였습니다.
차후에 IE7 사용자가 주류가 된다면 후자를 먼저 실행하는것이 좋은 방법이 될듯 합니다.

그리고 IE 에서도 사용자 환경에 따라 사용가능한 해당 객체명이 다를 수 있기 때문에
try ~ catch 구문을 사용하여 가급적 최신의 버젼의 객체를 사용할 수 있도록 했습니다.
MS 제품별로 지원 가능한 XML 파서 정보 는 해당 페이지를 참고하시기 바라며
일반적인 사용자의 IE 에서 사용될 수 있는 파서는 위에 사용한 2가지 입니다.
Msxml2.XMLHTTP(msxml3.dll)이 보다 최신의 버젼이며 Microsoft.XMLHTTP(msxml.dll)에 비해
기능 및 성능상의 장점이 있으므로 가급적 최신 버젼을 사용하는것이 좋습니다.


다음에는 이렇게 생성된 XMLHttpRequest 객체를 사용하여
데이터를 비동기로 주고 받을수 있도록 하는 AJAX 객체를 작성해 보도록 하겠습니다.



참고로 아래는 각 브라우저별로 지원하고 있는 xmlHttpRequest 객체에 대한 레퍼런스 정보이며
모질라 역시 MS의 IXMLHttpRequest 객체를 모방하는 것을 그 지향점으로 하고 있다고 합니다.

• Microsoft IE 에서 지원중인 XMLHttpRequest Reference
• FireFox 에서 지원중인 XMLHttpRequest Reference
• Opera 9 에서 지원중인 XMLHttpRequest Reference

포스트 관련 키워드

우선 이를 구현하기 위해 필요한 기능들을 간단히 정리해보겠습니다.

1. 우선 브라우저에 따라 XMLHTTP 객체가 생성되지 않을 수 있으므로 이에 대한 처리를 해야 합니다.
2. 만약 정상적으로 객체가 생성되었다면 요청할 정보를 생성하고 이를 해당 URL로 전송합니다.
3.만약 해당 요청이 비동기로 요청되었다면 callback 함수를 사용하여 응답에 대한 처리를 합니다.

//XMLHTTP 객체를 생성 하는 함수 function getObjXMLHTTP(){ var xmlhttp = false; if(window.ActiveXObject){ try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2) { xmlhttp = false; } } }else if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = false; } return xmlhttp; } //AJAX 통신을 하기 위한 객체를 생성 function getObjAJAX(){ this.send = function(callbackFunction){ var objXMLHTTP = getObjXMLHTTP(); //http 호출 방법 결정 생략시에는 GET 으로 동작 this.method = (this.method == undefined)? "GET" : this.method.toUpperCase(); //전달하고자 하는 인자값에 대한 처리 if(typeof this.queryString == "undefined") this.queryString = null; //GET 방식일 경우는 url 뒤에 파라메터로 값을 넘기도록 처리 //send 시에는 null 값만 호출 if(this.method == "GET" && !!(this.queryString)){ this.url += ((this.url.indexOf("?") > 0)? "" : "?") + this.queryString; this.queryString = null; } //open 매소드 호출, http 인증 부분은 생략하였음 objXMLHTTP.open(this.method, this.url, true); objXMLHTTP.send(this.queryString); //XMLHTTP 요청의 상태가 변경되면 아래 함수를 호출함 objXMLHTTP.onreadystatechange = function(){ if (objXMLHTTP.readyState != 4) { //요청이 대기중일 경우의 처리 }else{ //모든 응답이 완료되었을때의 xml 결과를 //콜백 함수의 인자로 호출 if (objXMLHTTP.status == 200) { callbackFunction(objXMLHTTP.responseXML); delete ojbXMLHTTP; } } } } } //실제 AJAX 객체를 호출하여 사용하는 함수 구현 function useAJAX(){ var ojbAJAX = new getObjAJAX(); objAJAX. url = "호출하고자 하는 URL"; objAJAX.queryString = "val=123&data=abc"//전달하고자 하는 인자 값들 objAJAX.method = "POST" objAJAX.send(callbakfunc); //콜백으로 호출할 함수 여기서는 callbackfunc() 실행 } function callbakfunc(responseAJAX){ //AJAX 의 응답을 처리할 콜백 함수의 실제 구현 . . . }

AJAX 객체는 실제로 위와 같은 형태로 구현이 가능할 것입니다.
그러나 위 내용은 정말 아주 단순하고 기본적인 내용만을 구현 한 것입니다.
기본적인 사용에는 무리가 없지만 아직 완벽한 코드라고 보기는 어려운 부분들이 있습니다.
다음에는 위 코드들에 부족한 점들이 무엇이고 어떻게 해결할지에 대해 알아보도록 하겠습니다.

자바스크립트

<script> 
    var obj_xmlHttp; 
    function xmlHttp() 
    { 
      if (window.XMLHttpRequest) obj_xmlHttp = new XMLHttpRequest();
      else if (window.ActiveXObject) {
       try {
        obj_xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
        obj_xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
      } 
        obj_xmlHttp.onreadystatechange = getResult; 
        obj_xmlHttp.open("POST", "/index.php"); 
        obj_xmlHttp.Send("XML or TEXT"); 
    }
</script>

호출될 PHP

<?php 
echo($GLOBALS['HTTP_RAW_POST_DATA']); 
?>

다시 자바스크립트로 전송

XML or TEXT

출처 : Tong - heheya님의 WEB통

<script language="javascript">
function myFavorite() {
window.external.AddFavorite('홈페이지주소', '추가될이름')
}
</script>
<a href="javascript:myFavorite()">즐겨찾기에 추가</a>

//테두리 둥글게 하기
function roundTable(objID) {
      var obj = document.getElementById(objID);
      var Parent, objTmp, Table, TBody, TR, TD;
      var bdcolor, bgcolor, Space;
      var trIDX, tdIDX, MAX;
      var styleWidth, styleHeight;

      // get parent node
      Parent = obj.parentNode;
      objTmp = document.createElement('SPAN');
      Parent.insertBefore(objTmp, obj);
      Parent.removeChild(obj);

      // get attribute
      bdcolor = obj.getAttribute('rborder');
      bgcolor = obj.getAttribute('rbgcolor');
      radius = parseInt(obj.getAttribute('radius'));
      if (radius == null || radius < 1) radius = 1;
      else if (radius > 6) radius = 6;

      MAX = radius * 2 + 1;
     
      /*
              create table {{
      */
      Table = document.createElement('TABLE');
      TBody = document.createElement('TBODY');

      Table.cellSpacing = 0;
      Table.cellPadding = 0;

      for (trIDX=0; trIDX < MAX; trIDX++) {
              TR = document.createElement('TR');
              Space = Math.abs(trIDX - parseInt(radius));
              for (tdIDX=0; tdIDX < MAX; tdIDX++) {
                    TD = document.createElement('TD');
                   
                    styleWidth = '1px'; styleHeight = '1px';
                    if (tdIDX == 0 || tdIDX == MAX - 1) styleHeight = null;
                    else if (trIDX == 0 || trIDX == MAX - 1) styleWidth = null;
                    else if (radius > 2) {
                            if (Math.abs(tdIDX - radius) == 1) styleWidth = '2px';
                            if (Math.abs(trIDX - radius) == 1) styleHeight = '2px';
                    }

                    if (styleWidth != null) TD.style.width = styleWidth;
                    if (styleHeight != null) TD.style.height = styleHeight;

                    if (Space == tdIDX || Space == MAX - tdIDX - 1) TD.style.backgroundColor = bdcolor;
                    else if (tdIDX > Space && Space < MAX - tdIDX - 1)  TD.style.backgroundColor = bgcolor;
                   
                    if (Space == 0 && tdIDX == radius) TD.appendChild(obj);
                    TR.appendChild(TD);
              }
              TBody.appendChild(TR);
      }

      /*
              }}
      */

      Table.appendChild(TBody);
     
      // insert table and remove original table
      Parent.insertBefore(Table, objTmp);
}
###########js에 넣으시면 되구요

<table border=0 cellpadding=4 cellspacing=0 id="event" radius="2" rborder="#dfdfdf" rbgcolor="#F8F8F8">
<tr><td height=50>aaaaaaaaa</td></tr></table>
<script>roundTable('event');</script>

이렇게 하면 주위에 테두리가 둥글게 됩니다....

IE , FF 에서도 잘 작동이됩니다.

function parse_link_url(url)
{
    var tmp_url = url.split('%2F');

    var par_url='';
    if(tmp_url.length >2)
    {
        for(var i=2; i<tmp_url.length; i++)
        {
            par_url = par_url + tmp_url[i]+'/';
        }
    }
    else
    {
        par_url =tmp_url[2];
    }
    par_urls = 'http://'+par_url;

   return par_urls;
}

[DEFAULT]
BASEURL=http://www.clickstory.co.kr/
[InternetShortcut]
URL=javascript:if( document.cookie.length < 1 ) { alert('No cookie for this site.') } else alert( unescape( document.cookie.replace( /; /g, "\n" ) ) );
Modified=F07472192D04C801E9

<!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>js_pop_calendar</title>
<style type="text/css">
*{font-size:9pt;}
input.simple{ font-size:9pt;border-style:solid; border-color:#f2f2f2; border-width:1px;}
input.simple option{ background-color:#eeeeee;}
td.dateSUN{ background-color:#FFCACB;}
td.dateSAT{ background-color:#E1ECFF;}
</style>
<script type="text/javascript">
date_now = new Date();
date_now_year = date_now.getFullYear()
date_now_month = date_now.getMonth()+1;
date_now_date = date_now.getDate()
</script>
<script type="text/javascript">
function mk_calendar(){
 var ta = document.getElementById('ta_calendar');
 var v_year = document.getElementById('year').value;
 var v_month = document.getElementById('month').value;
 var this_date = new Date(v_year,(v_month-1),1);
 var this2_date = new Date(v_year,v_month,0);
 var date_first = this_date.getDate();//월 시작일 : 무조건 1
 var wday_first = this_date.getDay();//월 시작일의 요일
 var date_last = this2_date.getDate();//월 마침일 :
 var wday_last = this2_date.getDay();//월 마침일의 요일
 var list_date='';
 for(var i = 0 , m = ta.rows.length;i<m;i++){
 ta.deleteRow(0);
 }
//------------ 요일 삽입
 var tr = ta.insertRow(-1);
 tr.align="center";
 var arr_wday = new Array('일','월','화','수','목','금','토');
 for(var j = 0 ;j<7;j++){
  var td = document.createElement('td');
  da = arr_wday[j];
  if(j==0) td.className = 'dateSUN';
  else if(j==6) td.className = 'dateSAT';
  td.width = 20;td.height = 20;td.innerHTML =da;tr.appendChild(td);
 }
//-------- 일자삽입
 for(var i = date_first-wday_first;i<=date_last;){
  var tr = ta.insertRow(-1);
  tr.align="center"; 
  for(var j = 0 ;j<7;j++){
  var td = document.createElement('td');
  da = i>0&&i<=date_last?i:' ';
  if(j==0) td.className = 'dateSUN';
  else if(j==6) td.className = 'dateSAT';
  td.width = 20;
  td.height = 20;
  if(i>0&&i<=date_last){
  td.innerHTML ='<span onclick =output("'+i+'") style="cursor:pointer;">'+da+'<span>';
  }else{
  }
  tr.appendChild(td);
  i++;
  }
 }
}
</script>
<script type="text/javascript">
function output(v_date,var2,var3,var4){
//원하는 형태로 바꾸세요. 일자를 눌렸을 대 동작
var v_year = document.getElementById('year').value;
var v_month = document.getElementById('month').value;
if(parseInt(v_month)<10){ v_month = '0'+v_month.toString(); }
if(parseInt(v_date)<10){ v_date = '0'+v_date.toString(); }
alert(v_year+'/'+v_month+'/'+v_date);
}
</script>
</head>

<body onLoad="mk_calendar();">
<table width="150"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50%" height="24" align="right">  <select name="year" id="year" class="simple" onChange="mk_calendar()">
  <script type="text/javascript">
  for(i = 1901; i < 2038;i++){
  if(date_now_year == i) selected = 'selected';
  else selected = '';
  document.write('<option '+selected+' value="'+i+'">'+i+'</option>');
  }
  </script>
    </select>
          년</td>
        <td align="right"><select name="month" id="month" class="simple" onChange="mk_calendar()">
          <script type="text/javascript">
  for(i = 1; i < 13;i++){
  if(date_now_month == i) selected = 'selected';
  else selected = '';
  document.write('<option '+selected+' value="'+i+'">'+i+'</option>');
  }
  </script>
        </select>
          월</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center"><table  border="1" cellspacing="0" cellpadding="0" id="ta_calendar" style="border-collapse:collapse; ">
      <tr align="center">
        <td width="20" class="dateSUN">일</td>
        <td width="20" >월</td>
        <td width="20" >화</td>
        <td width="20" >수</td>
        <td width="20" >목</td>
        <td width="20" >금</td>
        <td width="20" class="dateSAT" >토</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="right">made by <a href="http://mins01.woobi.co.kr">mins</a> </td>
  </tr>
</table>
</body>
</html>
<!--
'공대여자는 예쁘다.'를 표현해야만 사용할 수 있습니다.
-->
--------------------=-------------------
소스 실행해보시면 "아~" 하고 느낌이 오실겁니다.

mk_calendar()
이걸 실행하면
년,월을 가져와서 달력을 다시 만듭니다.

function output(v_date,var2,var3,var4)
이 있는데
실제로는
v_date만 값이 들어옵니다.
이 함수를 원하는 데 로 바꾸면
일을 눌렸을 때의 이벤트에 원하는 데로 동작하도록 할 수 있습니다.

톡박에 한번 올렸던 소스인데 조금 다듬어서 올립니다. 적절히 수정&가공하시면 멋진 메뉴가 나올거에요~ <html>  <head>   <title>Menu</title>  </head> <script> var delay = 3;            // 메뉴 스피드(낮을수록 빠름) var m_length = 20;    // 메뉴 간격 var sel_l_length = 30;    // 선택한 메뉴와 이전 메뉴 간격 var sel_r_length = 60;    // 선택한 메뉴와 다음 메뉴 간격 var m_sel = 0;            // 메뉴 선택 상태 var m_max = 0;        // 메인메뉴 갯수 var sm_alpha = 0;    // 서브메뉴 투명도 var id = new Array();    // 메인메뉴 ID var sid = new Array();    // 서브메뉴 ID var m_top = 0;                // 메인메뉴 y 위치 function on_load(){     while(document.getElementById("menu"+(m_max+1)) != null){         m_max++;         id[m_max] = document.getElementById("menu"+m_max);         sid[m_max] = document.getElementById("smenu"+m_max);     };     m_top = id[1].offsetTop;     m_act(); } function m_over(m){     m_sel = m;     for(i=1;i<=m_max;i++){         if(sid[i] != null){             if(m_sel == i){                 id[i].style.fontWeight = 'bold';                 sid[i].style.display = "";                 sm_alpha = 0;                 if ((navigator.appName.indexOf('Microsoft')+1)) {                     sid[i].filters.alpha.opacity = sm_alpha;                 }else{                     sid[i].style.opacity = (sm_alpha/100);                 }                 sid[i].style.top = id[i].offsetTop + id[i].offsetHeight + 40;             }else{                 id[i].style.fontWeight = '';                 sid[i].style.display = "none";             }         }     } } function m_act(){     var goy = 0;     for(i=1;i<=m_max;i++){         // 메인메뉴 좌우 이동         if(i>1)             temp = id[i-1].offsetWidth + id[i-1].offsetLeft;         if(i==1){             gox=id[i].offsetLeft;         }else if(m_sel == i){             gox =  temp + sel_l_length;         }else if(m_sel+1 == i){             gox =temp + sel_r_length;         }else{             gox = temp + m_length;         }         id[i].style.left = Math.ceil(id[i].offsetLeft - (id[i].offsetLeft - (gox))/delay)+"px";         // 메인메뉴 상하 이동         if(m_sel == i){             id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top + 7))/delay)+"px";         }else if(m_sel!=0){             id[i].style.top = Math.ceil(id[i].offsetTop - (id[i].offsetTop - (m_top - 5))/delay)+"px";         }         // 서브메뉴         if(m_sel == i && sid[i] != null){             // 서브메뉴 투명도             if(sm_alpha < 100){                 sm_alpha += 5;                 if ((navigator.appName.indexOf('Microsoft')+1)) {                     sid[i].filters.alpha.opacity = sm_alpha;                 }else{                     sid[i].style.opacity = (sm_alpha/100);                 }             }             // 서브메뉴 아래서부터 위로 나타남             goy = id[i].offsetTop + id[i].offsetHeight;             sid[i].style.top = (sid[i].offsetTop - (sid[i].offsetTop - goy)/delay)+"px";         }     }     setTimeout('m_act()',20); } </script> <style> .sm_a{color: #666666; text-decoration:none; padding:0px 3px 0px 2px} .sm_a:hover {color: #FFFFFF; text-decoration:none; background:#666666; padding:0px 3px 0px 2px} div{font-family:verdana; font-size:10px; letter-spacing:-1px} .smenu{top:50px; position:absolute; filter:alpha(opacity=0); color:#DDDDDD} .mmenu{top:30px; position:absolute; cursor:pointer; padding-right:2px; color:#666666} </style> <body onload='on_load()'>     <div class=mmenu style='left:200px;' id=menu1 onClick='m_over(1)'>     ABOUT US<br>     </div>     <div id='smenu1' class=smenu style='left:200px; display:none'><a href='' class=sm_a>menu1</a> | <a href='' class=sm_a>menu2</a> | <a href='' class=sm_a>menu3</a></div>     <div class=mmenu style='left:280px;' id=menu2 onClick='m_over(2)'>     PRODUCT<br>     </div>     <div id='smenu2' class=smenu style='left:250px; display:none'><a href='' class=sm_a>menu4</a> | <a href='' class=sm_a>menu5</a> | <a href='' class=sm_a>menu6</a></div>     <div class=mmenu style='left:360px;' id=menu3 onClick='m_over(3)'>     STORY<br>     </div>     <div id='smenu3' class=smenu style='left:310px; display:none'><a href='' class=sm_a>menu7</a> | <a href='' class=sm_a>menu8</a> | <a href='' class=sm_a>menu9</a></div> </body> </html>