본인이 생각하는 웹서비스는 이기종간의 통신을 위한 몸부림? 이라고 생각한다. 웹서비스는 ajax 와 마찬가지로 현재 진행형이다. 이미 도입하여 이용하고 있는 곳도 있고 계속해서 버젼을 올리며 칼날을 세우고 있는 곳도 있다.
웹서비스는 어떤 언어로 구현됬는지에 상관없이 그 서비스를 사용할 수 있도록 구현해야 하는 기술로써, 이런 통신이 가능토록 하기 위한 가장 기본적인 초석은 HTTP 통신 프로토콜을 사용하고 있다는 것과 이기종간의 데이터 포맷을 고려하여 텍스트 기반의 XML 을 사용한다는 것이다.
Ajax 를 이용해서 SOAP 프로토콜을 기반으로 작성된 웹서비스에 접근할 수 있을까? 가능하지만 사실 어렵다. SOAP 프로토콜은 실제 XML 객체를 파라미터로 사용하고 있기 때문에 지금까지 우리가 해온 방식인 스트링 조합가지고는 상당히 힘들다. 왜냐하면 스트링을 조합하는 과정에서 에러가 날 수있는 확률이 매우 높기 때문에 좋은 방법은 아닐 것이다. 또한 SOAP 은 GET 방식이 아닌 POST 방식을 주로 사용해야 한다. 따라서 좀 더 쉬운 방법으로 SOAP request 을 위한 정적 XML 템플릿을 XMLHttpRequest 가 로드한 후에 DOM 속성과 메소드를 이용하여 XML 데이터를 조작하는 것이 훨씬 수월할 것이다.
SOAP 을 이용하는 것 말고 좀 더 쉬운 방법이 존재한다. Representational State Transfer(REST) 은 웹서비스를 아주 쉽게 이용할 수 있는 서비스 이다. REST 는 SOAP 과 비교하자면 20%의 노력으로 SOAP 의 80% 에 해당하는 이득을 취할 수 있다고 한다. Ajax 는 REST 기반 웹서비스에 아주 적합하다. XHR 객체를 이용해서 REST 웹서비스에 비동기로 접근하고 그 결과는 XML 로 받아서 브라우저에서 파싱하여 사용하면 끝이다. 어떤가? 우리가 지금까지 해오던 방식과 아주 흡사하지 않은가?
여기서 한가지 더 짚고 가야 할 것은 XHR 객체의 보안 문제이다. 이 문제는 AJAX 강의 2장 - XMLHttpRequest 오브젝트 사용하기에서 언급하였다. XHR 객체가 웹서비스를 사용한다는 것은 자기가 속해 있는 도메인 밖에 있는 서버의 리소스 url 에 접근한다는 의미이므로 보안 문제는 반드시 발생하게 되어 있다. 따라서 이 문제를 해결하기 위해서는 게이트웨이 기능을 하는 프로그램을 추가로 개발해야 한다. 표현이 게이트웨이라 그럴듯해 보이지만 코딩은 굉장히 간단하다. 게이트웨이 기능은 네트웍 프로그램으로 서버쪽 프로그램에서 구현할 것이다.
이번장의 샘플 프로그램은 야후에 구현되어 있는 REST 웹서비스에 접근하여 그 결과를 보여주는 프로그램이다.
[샘플구현보기]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Yahoo! Search Web Services</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doSearch() {
var url = "example15.php?" + createQueryString() + "&ts=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function createQueryString() {
var searchString = document.getElementById("searchString").value;
searchString = escape(searchString);
var maxResultsCount = document.getElementById("maxResultCount").value;
var queryString = "query=" + searchString + "&results=" + maxResultsCount;
return queryString;
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
//alert('handleStateChange');
parseSearchResults();
}
else {
alert("Error accessing Yahoo! search");
}
}
}
function parseSearchResults() {
var resultsDiv = document.getElementById("results");
//alert(resultsDiv.childNodes.length);
while(resultsDiv.childNodes.length > 0) {
resultsDiv.removeChild(resultsDiv.childNodes[0]);
}
var allResults = xmlHttp.responseXML.getElementsByTagName("Result");
var result = null;
for(var i = 0; i < allResults.length; i++) {
result = allResults[i];
parseResult(result);
}
}
function parseResult(result) {
var resultDiv = document.createElement("div");
var title = document.createElement("h3");
title.appendChild(document.createTextNode(getChildElementText(result, "Title")));
resultDiv.appendChild(title);
var summary = document.createTextNode(getChildElementText(result, "Summary"));
resultDiv.appendChild(summary);
resultDiv.appendChild(document.createElement("br"));
var clickHere = document.createElement("a");
clickHere.setAttribute("href", getChildElementText(result, "ClickUrl"));
clickHere.appendChild(document.createTextNode(getChildElementText(result, "Url")));
resultDiv.appendChild(clickHere);
document.getElementById("results").appendChild(resultDiv);
}
function getChildElementText(parentNode, childTagName) {
var childTag = parentNode.getElementsByTagName(childTagName);
return childTag[0].firstChild.nodeValue;
}
</script>
</head>
<body>
<h1>Web Search Using Yahoo! Search Web Services</h1>
<form action="#">
Search String: <input type="text" id="searchString"/>
<br/><br/>
Max Number of Results:
<select id="maxResultCount">
<option value="1">1</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<br/><br/>
<input type="button" value="Submit" onClick="doSearch();"/>
</form>
<h2>Results:</h2>
<div id="results"/>
</body>
</html>
<example15.html 의 전체 소스 코드>
<?
class getUrlClass{
function getUrlClass(){
}
function getTargetUrl(){
$url = $this->url."&query=$this->query&results=$this->results";
$fd = fopen ($url, "r");
while (!feof ($fd)) {
$this->buffer .= fgets($fd, 4096);
}
fclose ($fd);
header("Content-type: text/xml");
echo $this->buffer;
}
}
$myurl = new getUrlClass();
$myurl->query=$query;
$myurl->results=$results;
$myurl->url = "http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=thunderboltsoftware&type=all";
$myurl->getTargetUrl();
?>
<example15.php 의 전체 소스 코드>
[샘플구현보기] 
