当前位置： 文江博客话题详情

如何调用WCF服务？

发布于 2024-12-12 03:42:48 字数 11123 浏览 0 评论 0原文

我有以下代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript" src="script/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" >

        var varType;
        var varUrl;
        var varData;
        var varContentType;
        var varDataType;
        var varProcessData;          
        //Generic function to call AXMX/WCF  Service        
        function CallService() 
        {
                $.ajax({
                    type        : varType, //GET or POST or PUT or DELETE verb
                    url         : varUrl, cache: false // Location of the service
                    data        : varData, //Data sent to server
                    contentType : varContentType, // content type sent to server
                    dataType    : varDataType, //Expected data format from server
                    processdata : varProcessData, //True or False
                    success     : function(msg) {//On Successfull service call
                    ServiceSucceeded(msg);                    
                    },
                    error: ServiceFailed// When Service call fails
                });
        }

        function ServiceSucceeded(result) {//When service call is sucessful
            var ProvinceDDL = document.getElementById("ddlProvince");
            for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
            var resultObject = null;
            if (varDataType == "json")
            {
                if (varUrl.indexOf(".asmx/") > 0) {
                 resultObject = result.d; // Constructed object name will be object.d //Button 1
                }
                else if (varType == "GET") {resultObject = result;}
                else {
                    // Constructed object name will be object.[ServiceName]Result // Button 2 & 3
                    resultObject = result.GetProvinceResult;
                    if (resultObject == null) {
                        //WCF Service with multiple output paramaetrs //Button 4
                        resultObject = result.GetProvinceAndBrowserResult.ProvinceInfo;
                    }

                }

                 for (i = 0; i < resultObject.length; i++) {
                     var opt = document.createElement("option"); opt.text = resultObject[i];
                     ProvinceDDL.options.add(opt)
                 }

                 if (result.GetProvinceAndBrowserResult != null) 
                    { //WCF Service with multiple output paramaetrs //Button 4
                     $("#divMulti").html(result.GetProvinceAndBrowserResult.BrowserInfo);
                     }
                 else
                     $("#divMulti").html("click button 4");


             }
             else if (varDataType == "xml") {//Parse XML based result;
                $(result).find("GetProvinceXMLResult").children().each(function() {
                var opt = document.createElement("option"); opt.text = $(this).text();
                ProvinceDDL.options.add(opt)        
                });
            }

             varType=null;varUrl = null;varData = null;varContentType = null;varDataType = null;varProcessData = null;     
        }
        function ServiceFailed(result) {
            alert('Service call failed: ' + result.status);
            varType = null; varUrl = null; varData = null; varContentType = null; varDataType = null; varProcessData = null;     
        }

        function CountryProvinceWebService() {
            varType = "POST";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWebService.asmx/GetProvince";
            varData = '{"Country": "' + $('#ddlCountry').val() + '"}';
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = true;
            CallService();
        }

        function CountryProvinceWCFJSON() {
            varType = "POST";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvince";
            varData = '{"Country": "' + $('#ddlCountry').val() + '"}';
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = true;
            CallService();
        }

        function CountryProvinceWCFXML() {
            varType = "POST";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceXML";
            varData = '{"Country": "' + $('#ddlCountry').val() + '"}';
            varContentType = "application/json; charset=utf-8"; 
            varDataType = "xml"; 
            varProcessData = true;
            CallService();
        }

        function CountryProvinceWCFJSONMulti() {
            var browser = "";
            if (jQuery.browser.mozilla == true) browser="firefox"
            else if(jQuery.browser.msie == true) browser = "ie"

            varType = "POST";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceAndBrowser";
            //We are passing multiple paramers to the service in json format {"Country" : "india", "Browser":"ie"}
            varData = '{"Country": "' + $('#ddlCountry').val() + '","Browser": "' + browser + '"}';
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = true;
            CallService();
        }

        function CountryProvinceWCFJSONGet() {
            varType = "GET";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceGET?Country=" +$('#ddlCountry').val();
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = false;
            CallService();
        }


        function CountryProvinceWCFREST() {
            varType = "GET";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceREST/" + $('#ddlCountry').val();            
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = false;
            CallService();
        }


        function ShowImage() {
            // WCF service is used to stream the image. Service url is assigned to src attribute of the image
            // Basically a GET request
            $("#image1").attr('src','http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetPicture');

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">    
    <div><b>
    <p>JQuery , WCF , JSON , XML , AJAX , ASMX , REST</p><br />
    </b>

        <div>

            <div style="background-color:ButtonShadow;width:500px;">
            <hr /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Country: &nbsp;

            <select id="ddlCountry">                   
                    <option id='usa'>USA</option>
                    <option value='india'>India</option>
             </select>


            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Provinces:&nbsp;             
              <select id="ddlProvince" name="ddlProvince">
               </select><br />
               <center><div id="divMulti" style="color:White">&nbsp;</div></center>
                <br /><br />
            </div>              
        </div>
<div>
<table><tr><td valign="top">
        <table border="1" width="500px" height="400px" cellpadding="5" cellspacing="5" 
            style="background-color: #F0F0F0">
            <tr>
                    <td align="left">1) Call ASMX Web service using JQuery </td>
                    <td><input type="button" value="Invoke" id="btnInvokeWebService" onclick="CountryProvinceWebService();" /> </td>
            </tr>
            <tr>
                    <td align="left">2) Call WCF service using JQuery and get data in JSON Format </td>
                    <td><input type="button" value="Invoke" id="btnInvokeWCFJSON" onclick="CountryProvinceWCFJSON();" /> </td>
            </tr>     
            <tr>
                    <td align="left">3) Call WCF service using JQuery and get data in XML Format </td>
                    <td><input type="button" value="Invoke" id="btnInvokeWCFXML" onclick="CountryProvinceWCFXML();" /> </td>
            </tr>
            <tr>
                    <td align="left">4)  Call WCF service using JQuery and get data in JSON Format (pass multiple input parameters) & ( Get multiple objects as output using DataContract)</td>
                    <td><input type="button" value="Invoke" id="btnInvokeWCFMJSONMultiple" onclick="CountryProvinceWCFJSONMulti();" /> </td>
            </tr> 
            <tr>
                    <td align="left">5) Call WCF service using JQuery[ Get Method] and get data in JSON Format</td>
                    <td><input type="button" value="Invoke" id="Button1" onclick="CountryProvinceWCFJSONGet();" /> </td>
            </tr>             
            <tr>
                    <td align="left">6) Call REST based WCF service using JQuery</td>
                     <td><input type="button" value="Invoke" id="Button2" onclick="CountryProvinceWCFREST();" /> </td>
            </tr>      
            <tr>
                    <td align="left">7) Stream an image through WCF and display it in browser</td>
                     <td><input type="button" value="Invoke" id="Button3" onclick="ShowImage();" /> </td>
            </tr>                                                                   
        </table>

        </td>
        <td>
        <img src="" id="image1" width="500" height="400" visible="false"  />
        </td>

        </tr></table>
             <br />  <br />  
             <hr />   
             <br />           
</div>
    </div>
    </form>
</body>
</html>

当我使用本地主机上的服务托管此页面时。所有 WCF 服务均正常工作。 但是，如果我打开此页面而不将其托管在本地主机中，则它不起作用。

如何在其他位置托管此页面并调用我的 WCF 服务？

原文

I've the following code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript" src="script/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" >

        var varType;
        var varUrl;
        var varData;
        var varContentType;
        var varDataType;
        var varProcessData;          
        //Generic function to call AXMX/WCF  Service        
        function CallService() 
        {
                $.ajax({
                    type        : varType, //GET or POST or PUT or DELETE verb
                    url         : varUrl, cache: false // Location of the service
                    data        : varData, //Data sent to server
                    contentType : varContentType, // content type sent to server
                    dataType    : varDataType, //Expected data format from server
                    processdata : varProcessData, //True or False
                    success     : function(msg) {//On Successfull service call
                    ServiceSucceeded(msg);                    
                    },
                    error: ServiceFailed// When Service call fails
                });
        }

        function ServiceSucceeded(result) {//When service call is sucessful
            var ProvinceDDL = document.getElementById("ddlProvince");
            for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
            var resultObject = null;
            if (varDataType == "json")
            {
                if (varUrl.indexOf(".asmx/") > 0) {
                 resultObject = result.d; // Constructed object name will be object.d //Button 1
                }
                else if (varType == "GET") {resultObject = result;}
                else {
                    // Constructed object name will be object.[ServiceName]Result // Button 2 & 3
                    resultObject = result.GetProvinceResult;
                    if (resultObject == null) {
                        //WCF Service with multiple output paramaetrs //Button 4
                        resultObject = result.GetProvinceAndBrowserResult.ProvinceInfo;
                    }

                }

                 for (i = 0; i < resultObject.length; i++) {
                     var opt = document.createElement("option"); opt.text = resultObject[i];
                     ProvinceDDL.options.add(opt)
                 }

                 if (result.GetProvinceAndBrowserResult != null) 
                    { //WCF Service with multiple output paramaetrs //Button 4
                     $("#divMulti").html(result.GetProvinceAndBrowserResult.BrowserInfo);
                     }
                 else
                     $("#divMulti").html("click button 4");


             }
             else if (varDataType == "xml") {//Parse XML based result;
                $(result).find("GetProvinceXMLResult").children().each(function() {
                var opt = document.createElement("option"); opt.text = $(this).text();
                ProvinceDDL.options.add(opt)        
                });
            }

             varType=null;varUrl = null;varData = null;varContentType = null;varDataType = null;varProcessData = null;     
        }
        function ServiceFailed(result) {
            alert('Service call failed: ' + result.status);
            varType = null; varUrl = null; varData = null; varContentType = null; varDataType = null; varProcessData = null;     
        }

        function CountryProvinceWebService() {
            varType = "POST";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWebService.asmx/GetProvince";
            varData = '{"Country": "' + $('#ddlCountry').val() + '"}';
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = true;
            CallService();
        }

        function CountryProvinceWCFJSON() {
            varType = "POST";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvince";
            varData = '{"Country": "' + $('#ddlCountry').val() + '"}';
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = true;
            CallService();
        }

        function CountryProvinceWCFXML() {
            varType = "POST";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceXML";
            varData = '{"Country": "' + $('#ddlCountry').val() + '"}';
            varContentType = "application/json; charset=utf-8"; 
            varDataType = "xml"; 
            varProcessData = true;
            CallService();
        }

        function CountryProvinceWCFJSONMulti() {
            var browser = "";
            if (jQuery.browser.mozilla == true) browser="firefox"
            else if(jQuery.browser.msie == true) browser = "ie"

            varType = "POST";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceAndBrowser";
            //We are passing multiple paramers to the service in json format {"Country" : "india", "Browser":"ie"}
            varData = '{"Country": "' + $('#ddlCountry').val() + '","Browser": "' + browser + '"}';
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = true;
            CallService();
        }

        function CountryProvinceWCFJSONGet() {
            varType = "GET";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceGET?Country=" +$('#ddlCountry').val();
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = false;
            CallService();
        }


        function CountryProvinceWCFREST() {
            varType = "GET";
            varUrl = "http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceREST/" + $('#ddlCountry').val();            
            varContentType = "application/json; charset=utf-8";
            varDataType = "json";
            varProcessData = false;
            CallService();
        }


        function ShowImage() {
            // WCF service is used to stream the image. Service url is assigned to src attribute of the image
            // Basically a GET request
            $("#image1").attr('src','http://localhost:1752/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetPicture');

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">    
    <div><b>
    <p>JQuery , WCF , JSON , XML , AJAX , ASMX , REST</p><br />
    </b>

        <div>

            <div style="background-color:ButtonShadow;width:500px;">
            <hr /><br />     
            Country:  

            <select id="ddlCountry">                   
                    <option id='usa'>USA</option>
                    <option value='india'>India</option>
             </select>


                     
                     
            Provinces:              
              <select id="ddlProvince" name="ddlProvince">
               </select><br />
               <center><div id="divMulti" style="color:White"> </div></center>
                <br /><br />
            </div>              
        </div>
<div>
<table><tr><td valign="top">
        <table border="1" width="500px" height="400px" cellpadding="5" cellspacing="5" 
            style="background-color: #F0F0F0">
            <tr>
                    <td align="left">1) Call ASMX Web service using JQuery </td>
                    <td><input type="button" value="Invoke" id="btnInvokeWebService" onclick="CountryProvinceWebService();" /> </td>
            </tr>
            <tr>
                    <td align="left">2) Call WCF service using JQuery and get data in JSON Format </td>
                    <td><input type="button" value="Invoke" id="btnInvokeWCFJSON" onclick="CountryProvinceWCFJSON();" /> </td>
            </tr>     
            <tr>
                    <td align="left">3) Call WCF service using JQuery and get data in XML Format </td>
                    <td><input type="button" value="Invoke" id="btnInvokeWCFXML" onclick="CountryProvinceWCFXML();" /> </td>
            </tr>
            <tr>
                    <td align="left">4)  Call WCF service using JQuery and get data in JSON Format (pass multiple input parameters) & ( Get multiple objects as output using DataContract)</td>
                    <td><input type="button" value="Invoke" id="btnInvokeWCFMJSONMultiple" onclick="CountryProvinceWCFJSONMulti();" /> </td>
            </tr> 
            <tr>
                    <td align="left">5) Call WCF service using JQuery[ Get Method] and get data in JSON Format</td>
                    <td><input type="button" value="Invoke" id="Button1" onclick="CountryProvinceWCFJSONGet();" /> </td>
            </tr>             
            <tr>
                    <td align="left">6) Call REST based WCF service using JQuery</td>
                     <td><input type="button" value="Invoke" id="Button2" onclick="CountryProvinceWCFREST();" /> </td>
            </tr>      
            <tr>
                    <td align="left">7) Stream an image through WCF and display it in browser</td>
                     <td><input type="button" value="Invoke" id="Button3" onclick="ShowImage();" /> </td>
            </tr>                                                                   
        </table>

        </td>
        <td>
        <img src="" id="image1" width="500" height="400" visible="false"  />
        </td>

        </tr></table>
             <br />  <br />  
             <hr />   
             <br />           
</div>
    </div>
    </form>
</body>
</html>

When I host this page with the service on localhost. All the WCF Service works properly.
But if I open this page without hosting it in localhost, it doesn't work.

How can I host this page in another place and call my WCF Service?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

小清晰的声音 2024-12-19 03:42:48

将 http://localhost:1752/ 更改为您托管服务的位置。

Change the http://localhost:1752/ to where you host your service.

回复 原文
~没有更多了~

关于作者

朱染

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文