2011-10-26 8 views
1

J'ai le code suivant:Comment appeler le service WCF?

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

Lorsque je serai l'hôte cette page avec le service sur localhost. Tout le service WCF fonctionne correctement. Mais si j'ouvre cette page sans l'héberger dans localhost, cela ne fonctionne pas.

Comment puis-je héberger cette page dans un autre endroit et appeler mon service WCF?

Répondre

0

Modifiez le http://localhost:1752/ à l'emplacement de votre service.

+0

Le service wcf est hébergé dans localhost. Comment puis-je y accéder via la page (code ci-dessus) sans héberger la page dans localhost avec le service wcf? –

+0

Remplacez 'localhost' par le nom d'ordinateur de l'ordinateur hébergeant le service WCF. – CodeCaster

+0

nom machine = nom d'hôte? –

Questions connexes