What's "JavaScript SOAP Client"?

A lot of talking about AJAX is taking place here and there; AJAX is the acronym of "Asynchronous JavaScript and XML", a technology based on XMLHttpRequest, which is now supported by all main browsers. The basic idea is quite simple - and not actually a breakthrough - but it allows updating a page following a server request, without reloading the entire set of data.

We propose a solution based on AJAX that has a great advantage with respect to those commonly found in Internet: calls are made to the Web Services.

This permits:

On the server side we only have to expose a Web Service with the required methods (instead of generating dynamic pages incorporating data that are based on a custom syntax or on a generic XML)
On the client side we use the WSDL (Web Service Description Language) to automatically generate a JavaScript proxy class so as to allow using the Web Service return types - that is similar to what Visual Studio does when a Web Reference is added to the solution.

The following diagram shows the SOAP Client workflow for asynchronous calls:

The Client invokes the SOAPClient.invoke method using a JavaScript function and specifying the following:

Web Service URL (pls note that many browsers do not allow cross-domain calls for security reasons)
Web method name
Web method parameter values
Call mode (async = true, sync = false)
CallBack method invoked upon response reception (optional for sync calls)

The SOAPClient.invoke method executes the following operations (numbers refer to the previous diagram)

It gets the WSDL and caches the description for future requests
It prepares and sends a SOAP request to the server (invoking method and parameter values)
It processes the server reply using the WSDL so as to build the corresponding JavaScript objects to be returned
If the call mode is async, the CallBack method is invoked, otherwise it returns the corresponding object

SOAP을 이용한 AJAX

soap을 이용한 ajax구현입니다.

-서론-

우선 '그냥 ajax를 사용하면 되지 왜 궂이 soap을 이용하느냐' 라는 질문을 던지는 분이 계시죠?
궂이 soap으로 ajax를 구현하냐면,
좀 정형화(?) 시킬수 있기때문이죠.
페이지 하나로 끝낼수 있는것도 있고..
뭐 -_-;; 아무튼 목적은 코드의 재사용에 있습니다.
그냥 ajax를 사용하는것보다 soap을 이용해서 사용하는게 다른 용도로도(ajax외의것) 사용할수 있으니까요.

-본론-

1. 라이브러리 선택
1.1. javascript (Client)
일단 공개 라이브러리중에 soap관련 공개 라이브러리가 몇가지 있습니다.
저는 JavaScriptSOAPClient 라는 라이브러리를 사용하겠습니다.
JavaScriptSOAPClient 같은경우 SOAPClient만 있습니다.
서버구축은 안된다는 말이죠..
그리고.. 아직 soap에대한 지식이 별로 없으므로..
자료형은 json을 사용 하겠습니다.

1.2. nusoap (Server)
nusoap은 예전에 올린 tip에 있습니다.
아니면 google에서 nusoap이라고 치면 수없이 나옵니다 -_-;;

2. 준비과정
일단 서버를 구축해야겠죠?
SOAP Server구축은 설명없이 진행하겠습니다.
(Client도 그다지 설명은 많지 않습니다 -_-;;)

-폴더 구조

_lib -> nusoap
_lib -> json
_javascript -> soapclient.js
_javascript -> json.js
soapServer.php
soapClient.html

3. 개발

자~ 그럼 시작해보겠습니다.

일단 SoapServer를 개발해야겠죠?

※잠깐 타임~! nusoap을 사용하려다 보니 soapclient클레스가 충돌나죠?(안나면 말고 -_-;;) soapClient클레스명을 soap_client나 nusoapClient로 변경해주시기 바랍니다.
(전 nusoapClient로 변경했습니다.)

#soapServer.php

//nusoap 클레스
include_once("_lib/nusoap/nusoap.php");
//json_encode
include_once("_lib/json/json_encode.php");

//nusoap server 시작
$server = new soap_server();

//WSDL 설정
$server->configureWSDL("helloWorld","urn:helloWorld");

//함수 등록
$server->register("helloWorld",
array("input"=>"xsd:String"),
array("helloWorldResult"=>"xsd:String"),
"namespace",
"namespace#helloWorldResult");

$server->register("helloWorld2",
array("input"=>"xsd:String"),
array("helloWorld2Result"=>"xsd:String"),
"namespace",
"namespace#helloWorld2Result");

//Request Data
$server->service($HTTP_RAW_POST_DATA);

//함수

//helloWorld
function helloWorld($input){
$data = "Hello World
input String : ".iconv("EUCKR","UTF8",$input);
$return = json_encode2($data);
return "";
}

//helloWorld2
function helloWorld2($input){
$data = "Hello World2
input String : ".iconv("EUCKR","UTF8",$input);
$return = json_encode2($data);
return "";
}
?>

이로써 서버는 구축됬습니다.
이재 클라이언트를 구축해야죠?

#soapClient.html

soapClient

여기서 주의할점.
예전 SoapServer 구현할때
함수 등록 부분에서

$server->register("helloWorld",
array("input"=>"xsd:String"),
array("return"=>"xsd:String"),
"namespace",
"namespace#helloWorldResult");

return부분을

$server->register("helloWorld",
array("input"=>"xsd:String"),
array("helloWorldResult"=>"xsd:String"),
"namespace",
"namespace#helloWorldResult");

이렇게 고치시면 됩니다.
javascript soap라이브러리에서는 리턴 받는 값을
함수명+Result 로 받더군요...

다른건 안그러던대 -_-;;
xml파싱하기 귀찮았나봅니다;;;

그리고.. JavaScriptSOAPClient에서는
xml을 배열로 받는 로직이 없어서
json으로 받아버립니다.(제가 모르는걸수도 있지만 -_-;;)

-Ending-

Library Creater :
nusoap ( http://sourceforge.net/projects/nusoap/ )
JavaScriptSOAPClient ( Matteo Casati, Ihar Voitka - http://www.guru4.net/ )
json_encode2 ( 행복한고니 - http://mygony.com/ )
json ( http://www.json.org/ )

Creater : Eisemheim ( http://www.eitetu.pe.kr/eitetu )

Sample Page : http://www.eisemheim.com/_sample/soap/javascript/soapClient.html

AJAX Core Module .js Example

AJAX Core Module.js

commXMLHttp.js <-- 이 부분이 핵심
welcome.txt
receiveTextFile.htm
filereceive.js

----welcome.txt---------------
안녕하세요 Hello World !
----end of document ----------

----receiveTextfile.htm-------

<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>
<script language="javascript" type="text/javascript" src="commXMLHttp.js"></script>
<script language="javascript" type="text/javascript" src="filereceive.js"></script>
</head>
<body>
<h1>Receive the Server of Textfile</h1>

----end of document-------------------

===== filereceive.js =====================================================
// JScript source code
function initialValueSet() {
var getorpost = "GET";
var urlfileapp = "welcome.txt";
var trueoffalse = true;
var senddata = "";
AjaxCore_openSendStatus_CJIJ(getorpost, urlfileapp, trueoffalse, senddata, AjaxCore_mainControl_CJIJ);
}

function AjaxCore_mainControl_CJIJ(xmlHttp){
alert(xmlHttp.reponseText);
document.getElementById("receiveData").innerHTML = xmlHttp.reponseText;
}
===== end of document ===========================================

################## AJAX Core Module ###################################3
// CREATE the XMLHttpRequest ActiveX Object
function AjaxCore_createXMLHttpRequest_CJIJ(){

var reqHttp;
if (window.ActiveXObject) {
try{
reqHttp = new ActiveXObject("Msxml2.XMLHTTP"); //after IE 5.0 browser
}catch(e1){
try{
reqHttp = new ActiveXObejct("Microsoft.XMLHTTP");
}catch(e){
reqHttp = null;
}
}
} else if (window.XMLHttpRequest){
try{
reqHttp = new XMLHttpRequest();
}catch(e2){
reqHttp = null;
}
}

if (reqHttp == null) errorMessage(); //unable XMLHTTPRequest..

return reqHttp;
}

// Check the readyState and status
function AjaxCore_openSendStatus_CJIJ(getorpost, urlfileapp, trueoffalse, senddata, callbackFunction){

var xmlHttp = AjaxCore_createXMLHttpRequest_CJIJ(); // CREATE XMLHttpRequest
xmlHttp.open(getorpost, urlfileapp, trueoffalse); //1:transfer method, 2:url, 3:Asynchronous or synchronous
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4){ //server status
if(xmlHttp.status == 200){ //response status
if(callbackFunction != null){
callbackFunction(xmlHttp);
}
}else{
AjaxCore_exceptionControl_CJIJ(xmlHttp);
}
}
}

var conType = "application/x-www-form-urlencoded;";
xmlHttp.setRequestHeader("Content-Type", conType);
xmlHttp.send(senddata);
}

function AjaxCore_errorHandler_CJIJ(){
//do something.. alert("unable Browser, change to IE or FireFox or Opera..and so on");
}

function AjaxCore_exceptionControl_CJIJ(xmlHttp){
switch(xmlHttp.status){
case 500:
alert("Interal Server Error");
break
case 404:
alert("URL or file Missing");
break;
case 403:
alert("Access deny");
break;
default:
alert(xmlHttp.status +"\n"+ xmlHttp.statusText + " : It's The fail between sever to client browser response transfer");
}

//do something.. example. It's The fail between sever to client browser response transfer
}

function AjaxCore_commAddListener(paramObject, paramType, paramFunction, paramFalse){
if(paramObject.attachEvent){
paramObject.attachEvent("on"+paramType, paramFunction);
}else{
paramObject.addEventListener(paramType. paramFunction, paramFlase);
}
}
############### End of Document ######################################

Ajax가 리치 웹의 끝인가?

리치 웹 기술이 뜨고 있다. Ajax라고 하는 기술 접근을 통해 '소프트웨어 웹'을 구성하는 방법을 찾게 된 것이다. 아직도 MS guy들은 그걸 DHTML이라고 부르더라. DHTML과 Ajax의 차이는 무엇일까? 바로 공개 표준(Open Standards)과 공개 프레임웍(Open Framework)이다. 90년대 DHTML은 웹 브라우저의 상용 기술만 판쳤던 과거의 유물이다.

웹2.0의 가장 큰 이득은 웹을 플랫폼으로 봐 주었고 그걸로 돈을 벌수 있다는 증명을 해 준 것이다. 웹 브라우저 안에 잡지 웹을 데이터 웹으로 끌어 내 준 것이다. 이제 웹 플랫폼 기업들은 웹 브라우저 기반 잡지 수준에서 머물기 보다 오픈 API와 데이터 플랫폼을 지향한다. Ajax가 바로 그 선상에 있다. 브라우저 밖의 웹, 소프트웨어 웹을 가르키고 있는 것이다. 즉, Ajax는 리치 웹을 향한 최초의 제대로 된 접근이지 끝이 아니라는 말이다.

LAMP(Linux+Apache+MySQL+PHP) 역시 기술에 대한 접근 방식이다. 즉, 오픈 소스와 빠른 웹 개발을 위한 경량 플랫폼의 성공을 말해 주는 것이다. 이와 마찬 가지로 Ajax는 기술 그 자체가 아니라 리치 웹을 위한 접근 방식이라는 것이다.

리치 웹 기술은 몇 가지 공용 기술을 기반으로 발전하고 있다. XML 기반 GUI 기술, 동적 언어(Dynamic Languages), CSS 그리고 Data API이다. 잠깐 살펴 볼까?

- Ajax : (X)HTML+CSS+ DOM+ JavaScript <-> Data API
- WPF/e : XAML+CSS+XBL+CLR(JavaScript/Ruby/Python) <-> Data API
- Flex: MXML+CSS+ActionScript <-> Data API
- Widget: HTML(Canvas)+ CSS+ JavaScript <-> Data API
- Firefox: XUL+CSS+JavaScript(XPCOM) <-> Data API
- WHATWG: HTML5 + CSS+ DOM+ JavaScript <-> Data API

많은 사람들이 Ajax, WPF/e, Apollo(Flex), HTML5 중에서 무엇을 공부해야 될 것인가를 나에게 물어 본다. 리치 웹 기술은 클라이언트 기반의 새로운 기술 셋을 제공하고 있다. 이 분야는 그동안 등한시 하였던 (서버 기반 개발자도 참여하고 있지만) 웹 디자이너, HTML 코더, UI 개발자 등이 관여해야될 문제이다.

SW 엔지니어들은 그들이 사용하는 언어(Langauge)에 구애 받지 않는다. 자바를 쓰든 PHP를 쓰든 적절한 상황에 적절한 언어를 통해 개발을 할 뿐이다. 프로토 타입에 RoR을 쓰고 실 서비스에는 Java를 쓰더라도 백엔드 SW에는 PHP나 Python을 사용하는 게 생산성이 높듯이 말이다.

따라서 리치 웹 개발자들도 기술 종류에 구애 받지 않고 자유 자재로 원하는 요구 사항에 적절한 기술을 사용할 것을 요구 받을 것이다. 리치 웹 벤더들은 공개 기술을 제공하기 시작했고 그것이 원하는 목표에 맞기 때문에 현재의 상황은 매우 희망적이라고 생각한다.

Ajax가 가르키는 손가락을 보지 말고 소프트웹어 웹(Software Web)이 가르키는 미래를 바라봐야 할 것이다.

AJAX, WEB 2.0 SEO, php, memcache, linux, centos6, mysql, mongodb, by VINS

JavaScript SOAP Client

What's "JavaScript SOAP Client"?

See also

SOAP을 이용한 AJAX

AJAX Core Module .js Example

Ajax가 리치 웹의 끝인가?