웹서비스 접근하기
본인이 생각하는 웹서비스는 이기종간의 통신을 위한 몸부림? 이라고 생각한다. 웹서비스는 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 웹서비스에 접근하여 그 결과를 보여주는 프로그램이다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</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 startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("The server replied with: " + xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/>
</form>
</body>
</html>
<yahooSearch.html 의 전체 소스 코드>
package ajaxbook.chap4;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;
import javax.servlet.*;
import javax.servlet.http.*;
public class YahooSearchGatewayServlet extends HttpServlet {
private static final String YAHOO_SEARCH_URL =
"http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=thunderboltsoftware"
+ "&type=all";
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String url = YAHOO_SEARCH_URL + "&" + request.getQueryString();
HttpURLConnection con = (HttpURLConnection)new URL(url).openConnection();
con.setDoInput(true);
con.setDoOutput(true);
con.setRequestMethod("GET");
//Send back the response to the browser
response.setStatus(con.getResponseCode());
response.setContentType("text/xml");
BufferedReader reader = new BufferedReader(new InputStreamReader(con.getInputStream()));
String input = null;
OutputStream responseOutput = response.getOutputStream();
while((input = reader.readLine()) != null) {
responseOutput.write(input.getBytes());
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
}
<YahooSearchGatewayServlet.java 의 전체 소스 코드>
코드가 너무 단순한 것도 있지만 지금까지 해오던 방식 그대로이기때문에 자세한 설명은 생략하겠다. 서버쪽에 위치한 게이트웨이 프로그램은 자바를 이용해서 야후가 제공하는 REST 웹서비스 url 에 네트웍으로 접근하여 그 결과를 얻어오는 프로그램으로 굳이 자바를 사용하지 않더라도 다른 언어로 충분히 작성할 수 있을 것이다.
실핼 결과를 살펴보자.
위 그림은 yahooSearch.html 의 실행화면이다. 검색할 단어를 입력하고 검색결과 갯수를 10으로 지정한 후 Submit 버튼을 눌러보자.
위 그림은 ajax 라는 검색어를 10개의 검색결과로 지정해서 얻은 결과이다. 실제 야후 웹싸이트에 가서 ajax 라는 키워드로 검색해 보자.
위 화면은 같은 ajax 키워드로 검색한 실제 결과이다. 샘플 예제와 순서가 조금 다를뿐 제목과 내용, 그리고 링크까지 같은 결과를 보여주고 있음을 확인 할 수 있다.
출처 : jinoxst님의 블로그
'WEB2.0 > ajax' 카테고리의 다른 글
| Ajax 개발을 위한 자바스크립트 다큐먼트 생성기- JSDoc (0) | 2006.04.12 |
|---|---|
| 자동완성기능 구현하기 (0) | 2006.04.12 |
| 툴팁 구현하기 (0) | 2006.04.12 |
| progress bar 기능 구현하기 (0) | 2006.04.11 |
| Auto Refresh 기능 구현하기 (0) | 2006.04.11 |
