[webhacking.kr] 54번 문제 풀이[Javascript]

💡 Webhacking.kr challenge(old) 54번 문제에 대한 풀이입니다.

문제

function run(){
  if(window.ActiveXObject){
   try {
    return new ActiveXObject('Msxml2.XMLHTTP');
   } catch (e) {
    try {
     return new ActiveXObject('Microsoft.XMLHTTP');
    } catch (e) {
     return null;
    }
   }
  }else if(window.XMLHttpRequest){
   return new XMLHttpRequest();
 
  }else{
   return null;
  }
 }
x=run();  
function answer(i){
  x.open('GET','?m='+i,false);
  x.send(null);
  aview.innerHTML=x.responseText;
  i++;
  if(x.responseText) setTimeout("answer("+i+")",20);
  if(x.responseText=="") aview.innerHTML="?";
}
setTimeout("answer(0)",1000);

문제 풀이

화면에 출력되는 문자들을 다 모으면 되는 문제입니다. javascript 코드를 분석해 보겠습니다. 우선 run 함수는 브라우저간의 호환성을 위해서 ActiveXObject의 경우도 동작하도록 해준건데, 현재 상항과는 맞지 않는 코드입니다. 다음 글은 2008년에 작성된 글인데 해당 시점에서 이렇게 작성되는 이유는 XHR을 지원하지 않는 브라우저가 존재할 수 있기 때문이라고 합니다. XHR을 지원하지 않는 경우가 거의 없다고 했으니, run()함수의 리턴 값은 new XMLHttpRequest()라고 보면 됩니다.

function run(){
  if(window.ActiveXObject){
   try {
    return new ActiveXObject('Msxml2.XMLHTTP');
   } catch (e) {
    try {
     return new ActiveXObject('Microsoft.XMLHTTP');
    } catch (e) {
     return null;
    }
   }
  }else if(window.XMLHttpRequest){
   return new XMLHttpRequest(); //실제로 리턴되는 값
 
  }else{
   return null;
  }
 }

그 다음은 answer 함수 입니다. XMLHttpRequest 객체를 통해서 호출을 하고 있으며 그 결과 값을 aview 객체에 쓰고 있습니다. 그리고 i를 증가시키고 다시 한번 재귀적으로 answer를 호출시키다가 응답값이 없을때 ? 를 출력하고 끝내는 로직입니다.

function answer(i){
  x.open('GET','?m='+i,false);
  x.send(null);
  aview.innerHTML=x.responseText;
  i++;
  if(x.responseText) setTimeout("answer("+i+")",20);
  if(x.responseText=="") aview.innerHTML="?";
}
setTimeout("answer(0)",1000);

XMLHttpRequest에서 사용된 함수는 다음과 같습니다.

void open(method,url,asynch,username,password) : XHR 요청을 초기화 해주는 설정입니다. asynch 가 false 로 설정되면 동기로 처리되어, 하나의 요청을 보내고 대상으로부터 응답이 도착해야 다음의 작업을 처리하게 됩니다. method,url 값을 필수고, 나머지 옵션은 선택적으로 사용됩니다.

void send(content): 실질적으로 요청을 보냅니다. 비동기라면 바로 리턴이 되고, 동기라면 대상으로 부터 응답을 받을 때 까지 기다립니다. content로 값을 넘기려면 open에서 POST로 설정해줘야 하며, content는 http body로 넘어가게 됩니다. GET으로 open을 해줬다면, content에는 null을 적어주면 됩니다.

responseText : XHR 객체의 send에 대한 응답 값을 문자열로 반환해 줍니다.

코드가 돌아가는 로직은 대충 알았으니, 이제 출력되는 값들을 모아주면 됩니다. 각각의 출력값이 현재 aview.innerHTML에 덮어 써지기 때문에 이전의 글자가 사라지므로 다음과 같이 바꿔줌으로써 덮어쓰는게 아닌, 이어쓰게 해줍니다.그리고 마지막에 응답이 없을때 “?”가 써지면 다 지워지므로 마지막 aview.innerHTML=”?”은 삭제해 줍니다.

function answer(i){
  x.open('GET','?m='+i,false);
  x.send(null);
  aview.innerHTML+=x.responseText;  //이어쓰게 바꿔주고
  i++;
  if(x.responseText) setTimeout("answer("+i+")",2);
  //if(x.responseText=="") aview.innerHTML="?";  이부분 삭제
}
setTimeout("answer(0)",1000);