2013-10-26 20:01:55Morris
[Javascript] AJAX - Web service 練習
Web service ? 因為專題工作而學習，尚不了解它的需求。
.ajax 沒辦法跨網域(Cross Domain)，但是對於提供 web service 的網域沒有問題。
至於為什麼沒有問題，在此無法提供解答。
以下關聯網址為學校實驗室提供的隨機數據(回傳隨機亂數)，而非正式廠商提供的 web service。
本次學習額外需要 XML 的傳參格式，傳回來也是一個 XML 數據，必須對此進行解析。
明白這有非常大的跳躍，因為我也根本不了解為什麼要這麼做。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="sample_soap_commu.js"></script>
<link rel="stylesheet" href="Mcss.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
commu_service("SEMA_MaintenanceService", "getState", "getStateBlock", []);
commu_service("SEMA_MaintenanceService", "getNumOfComponents", "getNumOfComponentsBlock", []);
commu_service("SEMA_MaintenanceService", "getComponentInfo", "getComponentInfoBlock", []);
</script>
<h1>SEMA_MaintenanceService, getState()</h1>
<div id="content">
<p id="getStateBlock"></p>
</div>
<br>
<h1>SEMA_MaintenanceService, getNumOfComponents()</h1>
<div id="content">
<p id="getNumOfComponentsBlock"></p>
<div>
<br>
<h1>SEMA_MaintenanceService, getComponentInfo()</h1>
<div id="content">
<p id="getComponentInfoBlock"></p>
<div>
</body>
</html>
sample_soap_commu.js
function serviceArgvXML(ser_class_name, ser_name, req_arr) {
var data;
data = '<?xml version="1.0" encoding="utf-8"?>';
data += '<soapenv:Envelope xmlns:soapenv="http://www.w3.org/2003/05/soap-envelope">';
data += '<soapenv:Header/><soapenv:Body>';
data += '<ns:' + ser_name + ' xmlns:ns="http://ws.apache.org/axis2/services/' + ser_class_name + '">';
if(req_arr != null) {
for(var i = 0; i < req_arr.length; i++)
data += '<ns:' + req_arr[i].ns_id + '>' + req_arr[i].par + '</ns:' + req_arr[i].ns_id + '>';
}
data += '</ns:'+ser_name+'>';
data += '</soapenv:Body>';
data += '</soapenv:Envelope>';
return data;
}
function commu_service(ser_class_name, ser_name, td_name, req_arr) {
var URL = "http://140.115.53.57/axis2/services/" + ser_name;
$.ajax({
type : "POST",
url : URL,
data : serviceArgvXML(ser_class_name, ser_name, req_arr),
contentType : "application/soap+xml",
dataType : "xml",
success : function(msg, status, req){
set_td_content(td_name,req);
},
error : function(msg){
alert("error" + msg);
}
});
}
/*
<soapenv:Envelope
xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:rci="http://schemas.adlink.com/platform/Excalibur/2013/03">
<soapenv:Header/>
<soapenv:Body>
<rci:start xmlns:rci="http://schemas.adlink.com/platform/Excalibur/2013/03">
<rci:Result> SEMA_OK</rci:Result>
</rci:start>
</soapenv:Body>
</soapenv:Envelope>
*/
function set_td_content(td_name, req) {
//console.info(req.responseText);
var data = $(req.responseText)[0]["children"][0]["children"][0]["children"];
$("#" + td_name).empty();// clear.
//data["childNodes"][0] -> soapenv:envelop
//data["childNodes"][0]["childNodes"][0] -> soapenv:body
//data["childNodes"][0]["childNodes"][0]["childNodes"][0] -> rci:getstate SEMA_OK or SEMA_FAIL
if(data[0]["outerText"] == "SEMA_OK") {
for(var i = 1; i < data.length; i++) {
if(i > 1)
$("#" + td_name).append("<br>");
$("#" + td_name).append("<div id=\""+data[i].tagName+"\">" + data[i].tagName+":" + data[i]["outerText"] + "<div>");
}
}
else {
$("#" + td_name).append(data[0]["outerText"]);
}
}
Mcss.css
/*
* multi-line comment
*/
p{
line-height: 1em;
font-size: 20px;
color: #66D9EF;
font-family: georgia;
}
h1, h2, h3, h4{
font-family: georgia;
color: #4DD52B;
font-weight: normal;
line-height: 1.1em;
margin: 0 0 .5em 0;
}
h1{ font-size: 3.0em; }
h2{ font-size: 1.5em; }
a{
color: #11EEEE;
text-decoration: none;
}
a:hover,
a:active{ text-decoration: underline; }
/* you can structure your code's white space so that it is as readable for when you come back in the future or for other people to read and edit quickly */
body{
font-family: arial; font-size: 80%; line-height: 1.2em; width: 100%; margin: 0; background: #272822;
}
/* you can but your code all in one line like above */
#page{ margin: 20px; }
/* or on different lines like below */
#logo{
width: 35%;
margin-top: 5px;
font-family: georgia;
font-size: 35px;
display: inline-block;
}
/* but try and be as consist possible */
#nav{
width: 60%;
display: inline-block;
text-align: right;
float: right;
font-size: 20px;
}
#nav ul{}
#nav ul li{
display: inline-block;
height: 62px;
}
#nav ul li a {
padding: 20px;
background: black;
color: white;
}
#nav ul li a:hover{
background-color: #ffb424;
box-shadow: 0px 1px 1px #666;
}
#nav ul li a:active{ background-color: #ff8f00; }
#content{
margin: 30px 0;
background: #272822;
padding: 20px;
clear: both;
}
#footer{
border-bottom: 1px #ccc solid;
margin-bottom: 10px;
}
#footer p{
text-align: right;
text-transform: uppercase;
font-size: 80%;
color: grey;
}
/* multiple styles seperated by a , */
#content,
ul li a{ box-shadow: 0px 1px 1px #999; }