客户端 JavaScript 和/或 JavaScript 代码，使用 jquery 调用 WCF 服务检索 Syste

我正在创建一个将由纯JavaScript使用的WCF服务在客户端和一些jQuery JavaScript在客户端作为井。

1(我怎样才能实现普通客户端JavaScript，以便它将以检索 WCF 服务的方式调用一次收集System.IO.Stream？此外，我将如何迭代通过普通 JavaScript 端收到的集合以这样一种方式，我可以关联每个系统.IO.流集合中的对象到 HTML 图像元素？

2(是否有可能实现使用jquery的JavaScript代码它将以这样一种方式调用 WCF 服务一次检索 System.IO.Stream 的集合？而且，怎么会我遍历 JavaScript 收到的集合以这样一种方式使用 jQuery，我可以关联每个System.IO.将集合中的对象流式传输到 HTML 图像元素？

 /*********Start of Excerpt from the Interface Code of a WCF Service
 Contract*****************/
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Runtime.Serialization;
 using System.ServiceModel;
 using System.ServiceModel.Activation;
 using System.Text;
 using System.ServiceModel.Web;
 using System.IO;
 using ConsoleForWCFServiceTutorial.PerlsDataContracts;
 using ConsoleForWCFServiceTutorial.DataAccessObjectsDAO;

 namespace ConsoleForWCFServiceTutorial
 {
    [ServiceContract(Namespace =
 "http://ConsoleForWCFServiceTutorial.CarService")]
    public interface ICarService
    {
   [OperationContract]
   [WebInvoke(Method = "GET",
                   BodyStyle = WebMessageBodyStyle.WrappedRequest)]
        Stream[] getImagesList();


    }
 }
 /*********End of Excerpt from the Interface Code of a WCF Service
 Contract*****************/


 /*********Start of Excerpt of the code associated with the Class that
 implements the WCF Service Contract*****************/
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Collections;
 using System.ServiceModel.Activation;
 using System.Configuration;
 using System.Data;
 using System.IO;
 using System.ComponentModel;
 using ConsoleForWCFServiceTutorial.PerlsDataContracts;
 using ConsoleForWCFServiceTutorial.DataAccessObjectsDAO;

 namespace ConsoleForWCFServiceTutorial
 {
      [AspNetCompatibilityRequirements(RequirementsMode =
      AspNetCompatibilityRequirementsMode.NotAllowed)]
 class CarService : ICarService
 {
       public Stream[] getImagesList()
        {

            List<Stream> myImagesList = new List<Stream>();
            string fileName = Path.Combine("BMWpicture.jpg");
            FileStream fileStream =
              new FileStream(fileName, FileMode.Open, FileAccess.Read);
            // Set the content type as image/ jpeg
            System.ServiceModel.Web.WebOperationContext.
              Current.OutgoingResponse.ContentType = "image/jpeg";

            myImagesList.Add(fileStream);
            string fileName2 = Path.Combine("MercedesBenzpicture.jpg");
            FileStream fileStream2 =
              new FileStream(fileName2, FileMode.Open, FileAccess.Read);
            // Set the content type as image/ jpeg
            System.ServiceModel.Web.WebOperationContext.
              Current.OutgoingResponse.ContentType = "image/jpeg";

            myImagesList.Add(fileStream2);
            return myImagesList.ToArray();
        }
    }
 }
 /*********End of Excerpt of the code associated with the Class that
 implements the WCF Service Contract*****************/

 <!--Start of Excerpt of the plain JavaScript client code that
 invokes one of the Methods in the WCF Service
 Contract-->
 <script type="text/javascript">
 function getImagesList2() {
   var listOfStreams =
 'http://localhost:8732/Design_Time_Addresses/ConsoleForWCFServiceTutorial/carService     /getImagesList'
   document.getElementById("image11").onload = function () {
     }; // img.onload = function()

      document.getElementById("image11").src = listOfStreams[0];

   document.getElementById("image12").onload = function () {
        }; // img.onload = function()

      document.getElementById("image12").src = listOfStreams[1];
 }
 </script>
 <!--End of Excerpt of the plain JavaScript client code that
 invokes one of the Methods in the WCF Service
 Contract-->
 <!--Start of Excerpt of the HTML code that is affected by the
 JavaScript client and WCF Service interaction-->
 <body>
    <form id="form1" runat="server">
    <div>

                 <img src=""  id="image11" alt="Smiley face" />     
               <img src=""  id="image12" alt="Smiley face" />

         <br />
         <a class="large blue button" id="A7"
 onClick="getImagesList2()">getImagesList2</a>

        </div>
    </form>
 </body>
 </html>
 <!--End of Excerpt of the HTML code that is affected by the
 JavaScript client and WCF Service interaction-->

您需要创建一个 WCF 服务，启用 CORS，该服务将返回 Base64String 的列表(从要接收的图像的字节数组转换而来(。那么通过这个答案-->https://stackoverflow.com/a/9464137/1488207，您可以将它们一一设置为img标签，遍历您在jquery中收到的列表。我不会为您提供您想要的确切内容(我想您将能够将图像转换为字节数组，然后返回 Base64Strings(，但我可以复制我的 WCF 服务的配置和代码文件以节省您的时间(我花了很多时间从 jquery 成功使用 WCF(。

<?xml version="1.0"?>

<system.web>
    <compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
    <services>
        <service  name="EmployeeService.EmployeeSearchService/*Your service name replaces EmployeeService.EmployeeSearchService */" behaviorConfiguration="DefaultServiceBehavior">
            <endpoint binding="webHttpBinding" contract="EmployeeService.IEmployeeSearchService"      behaviorConfiguration="DefaultEPBehavior" />
        </service>
    </services>
    <behaviors>
        <endpointBehaviors>
            <behavior name="DefaultEPBehavior">
                <webHttp />
            </behavior>
        </endpointBehaviors>
        <serviceBehaviors>
            <behavior name="DefaultServiceBehavior">
                <serviceMetadata httpGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="true" />
            </behavior>
        </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>
<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <!--
    To browse web app root directory during debugging, set the value below to true.
    Set to false before deployment to avoid disclosing web app folder information.
  -->
    <directoryBrowse enabled="true"/>
</system.webServer>
<connectionStrings>
    <add name="myConnString" connectionString=""/>
</connectionStrings>

实现

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using System.Web.Script.Serialization;
namespace EmployeeService
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the             class name "Service1" in code, svc and config file together.
// NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging.
public class EmployeeSearchService : IEmployeeSearchService
{
    public List<Customer> GetAllImages()
    {
        WebOperationContext.Current.OutgoingResponse.Headers.Add(
            "Access-Control-Allow-Origin", "*"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
            "Access-Control-Allow-Methods", "POST"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
            "Access-Control-Allow-Headers", "Content-Type, Accept");
        List<Base64String> s = new List<Base64String>();
        //DO YOUR IMAGE CONVERSION TO BYTE ARRAY AND THEN TO BASE64STRINGS AND ADD THEM TO THE LIST ABOVE
        var jsonData = new
        {
            totalImages = s.Count,
            Images = (
                from row in s
                select new
                {
                    imgString = row
                }
         ).ToArray()
        };
        return (new JavaScriptSerializer()).Serialize(jsonData);
    }
}
}

接口

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using EmployeeSearchService.BE;
namespace EmployeeService
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface IEmployeeSearchService
{
    [OperationContract]
    [WebInvoke(Method = "GET",
       ResponseFormat = WebMessageFormat.Json,
       RequestFormat = WebMessageFormat.Json,
       BodyStyle = WebMessageBodyStyle.Bare)]
    object GetAllImages();
}
}

现在你可以通过下面的代码从jquery调用这个服务，在成功事件中，你将得到一个包含count和一个属性Image的对象，你必须通过"result"遍历数组。图片[0]">

$.support.cors = true;
var methodName = '/GetAllImages';
var urlService = 'some http service url';
$.ajax({
    type: "GET",
    url: urlService + methodName,
    data: {},
    dataType: "Json",
    processdata: "false",
    success: function (result) {
        if (result != null) {
            images = $.parseJSON(result);
            for(var i = 0 ; i < result.totalImages ; i++)
               $('<img>').src('data:image/png;base64,' + result.Image[i]).insertAfter('#myDiv');
        }
        else { }
    },
    error: function (msg) {
        alert(msg);
    }
});

告知您是否需要更多帮助。

相关内容

最新更新

热门标签：