基本信息
源码名称：Jquery跨域调用wcf实例(返回Jsonp格式) 附源码下载
源码大小：0.08M
文件格式：.rar
开发语言：C#
更新时间：2013-03-29
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

【注意事项】

我们通过控制台程序对服务进行寄宿。从下面的配置可以看到我们采用了标准终结点WebHttpEndpoint。为了让服务具有跨域支持的能力，我们必须将标准终结点的crossDomainScriptAccessEnabled属性设置为True。WebHttpBinding也具有同名的属性，如果直接使用WebHttpBinding也需要将该属性设置为True。

如下是app.config

  

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.serviceModel>
    <standardEndpoints>
      <webHttpEndpoint>
        <standardEndpoint crossDomainScriptAccessEnabled="true"/>
      </webHttpEndpoint>
    </standardEndpoints>
    <bindings>
      <webHttpBinding>
        <binding crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>
    <services>      
      <service name="Artech.WcfServices.Service.EmployeesService">
        <endpoint kind="webHttpEndpoint" 
                  address="http://127.0.0.1:3721/employees"
                  contract="Artech.WcfServices.Service.Interface.IEmployees"/>
      </service>
    </services>
  </system.serviceModel>
</configuration>



前台脚本调用:

  

<!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>
    <title>员工列表</title>
    <style type="text/css">
        body
        {
            font-size: 12px;
            text-align: center;
        }
        #employees
        {
            border: 1px solid #000000;
            margin: 10px auto;
            background-color: #eee;
        }
        #employees tr
        {
            line-height: 23px;
        }
        #employees th
        {
            background-color: #ccc;
            color: #fff;
        }
        .oddRow
        {
            background-color: #fff;
        }
    </style>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "get",
                url: "http://127.0.0.1:3721/employees/all",
                dataType: "jsonp",
                success: function (employees) {
                    $.each(employees, function (index, value) {
                        var detailUrl = "detail.html?id="   value.Id;
                        var html = "<tr><td>";
                        html  = value.Id   "</td><td>";
                        html  = "<a href='"   detailUrl   "'>"   value.Name   "</a></td><td>";
                        html  = value.Grade   "</td><td>";
                        html  = value.Department   "</td></tr>";
                        $("#employees").append(html);
                    });
                    $("#employees tr:odd").addClass("oddRow");
                }
            });

        });
    </script>
</head>
  <body>
    <table id="employees" width="600px">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>级别</th>
            <th>部门</th>
        </tr>
    </table>
</body>
</html>

wcf代码：

  

using System.Collections.Generic;
using Artech.WcfServices.Service.Interface;
namespace Artech.WcfServices.Service
{
    public class EmployeesService : IEmployees
    {
        public IEnumerable<Employee> GetAll()
        {
            return new List<Employee>
            {
                new Employee{ Id = "001", Name="张三", Department="开发部", Grade = "G6"},    
                new Employee{ Id = "002", Name="李四", Department="人事部", Grade = "G7"}, 
                new Employee{ Id = "003", Name="王五", Department="销售部", Grade = "G8"}
            };
        }
    }
}