[Javascript] AJAX - Web service 練習＠Morris' Blog

2013-10-26 20:01:55| 人氣2,340| 回應0 | 上一篇 | 下一篇

[Javascript] AJAX - Web service 練習

推薦 0 收藏 0 轉貼0 訂閱站台

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; }

我要檢舉

台長： Morris

您可能對以下文章有興趣

[Javascript] google API 表格套用

[Javascript] AJAX 簡易練習

[Javascript] 縮放表單

[Javascript] SQL & Website

人氣(2,340) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 教育學習(進修、留學、學術研究、教育概況) | 個人分類: [學習]JavaScript |
此分類下一篇:[Javascript] google API 表格套用
此分類上一篇:[Javascript] AJAX 簡易練習

回應(0)