2011-10-26 5 views
1

나는 다음과 같은 코드를했습니다 : 나는 로컬 호스트에서 서비스이 페이지를 호스트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> 

. 모든 WCF 서비스가 제대로 작동합니다. 그러나이 페이지를 localhost에서 호스팅하지 않고 열면 작동하지 않습니다.

이 페이지를 다른 장소에서 호스팅하고 내 WCF 서비스에 전화하려면 어떻게해야합니까?

답변

0

서비스를 호스팅하는 곳으로 http://localhost:1752/을 변경하십시오.

+0

wcf 서비스는 localhost에서 호스팅됩니다. 위 wcf 서비스로 localhost에서 페이지를 호스팅하지 않고 위의 코드 (위 코드)를 통해 어떻게 액세스 할 수 있습니까? –

+0

'localhost'를 WCF 서비스를 호스트하는 컴퓨터의 기계 이름으로 변경하십시오. – CodeCaster

+0

시스템 이름 = 호스트 이름? –

관련 문제