如何调用WCF服务?

时间:2011-10-26 09:19:48

标签: javascript jquery wcf hosting

我有以下代码:

    <!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>

当我在localhost上托管此页面时使用该服务。所有WCF服务都能正常运行。 但是,如果我打开此页面而不在localhost中托管它,它就不起作用。

如何在其他地方托管此页面并调用我的WCF服务?

1 个答案:

答案 0 :(得分:0)

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

相关问题