jqeury跨域访问WCF自承载的服务

服务端代码：

 

[ServiceContract]
     public  interface IEmployees
    {
        [WebGet(ResponseFormat =WebMessageFormat.Json)]
        IEnumerable<Employee> GetAll(); // UriTemplate = "all",
    }
     public  class Employee
    {
         public  string Id {  get;  set; }
         public  string Name {  get;  set; }
         public  string Department {  get;  set; }
         public  string Grade {  get;  set; }
    }
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 "}
            };
        }
    }
public  class Program
    {
         static  void Main()
        {
             using (WebServiceHost host =  new WebServiceHost( typeof(EmployeesService),  new Uri( " http://127.0.0.1:3721/employees ")))
            {
                host.Open();
                Console.Read();
            }
        }
    }

 

服务端配置文件：

 

<? xml version="1.0" encoding="utf-8"  ?>
< configuration >
   < system.serviceModel >
     < standardEndpoints >
       < webHttpEndpoint >
         < standardEndpoint  crossDomainScriptAccessEnabled ="true" />
       </ webHttpEndpoint >
     </ standardEndpoints >
   </ 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/GetAll " ,
                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 >

我觉得这样跨域是最简单的。