本文翻译自：http://www.codeproject.com/Tips/631685/JSONP-in-ASP-NET-Web-API-Quick-Get-Started

Concept：

同源策略：同源策略是客户端语言中的一个概念，它允许元素获取同一个站点中的资源，请求别的domain中的资源将不会被允许。

跨域资源共享[Cross-origin resource sharing (CORS)]：指的是我们可以通过javascript的Ajax(XMLHttpRequests)请求去访问其他的domain，这种请求通常会被浏览器拒绝，但是我们可以通过一些方法来时的浏览器允许这项操作，我们称之为CORS。

JSONP：由于安全问题，浏览器不允许跨域的Ajax的实现，JSONP（JavaScript Object Notation with Padding ）是一个从外部的域抓取JSON数据的方式，他会比其他的实现方式(web proxy and IFrame)更优雅。

JSONP (JavaScript Object Notation with Padding) = JSON data padded with JavaScript function name

更多关于JSONP的介绍：

http://www.codeproject.com/Articles/42641/JSON-to-JSONP-Bypass-Same-Origin-Policy

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

 

 

Implimentation：

1、创建两个项目：WebApi、WebApp，分别任是webapi、MVC项目；

2、在WebApi项目中(1-5均在此项目中)，利用Nuget安装WebApiContrib.Formatting.Jsonp；

3、在App_Start文件夹添加FormatterConfig类，类的代码如下：

public static void RegisterFormatters(MediaTypeFormatterCollection formatters)
{
    var jsonFormatter = formatters.JsonFormatter;
    jsonFormatter.SerializerSettings = new JsonSerializerSettings
    {
        ContractResolver = new CamelCasePropertyNamesContractResolver()
    };

    // Insert the JSONP formatter in front of the standard JSON formatter.
    var jsonpFormatter = new JsonpMediaTypeFormatter(formatters.JsonFormatter);
    formatters.Insert(0, jsonpFormatter);
}

4、在App_Start/WebApiConfig.cs中覆盖原来的路由为：

config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}/{format}",
    defaults: new { id = RouteParameter.Optional, format = RouteParameter.Optional }
);

 

5、在global文件中添加一条代码：

FormatterConfig.RegisterFormatters(GlobalConfiguration.Configuration.Formatters);

 

此时我们已经实现了JSONP了，现在我们来做一个测试：

 

6、在WebApi项目中的Controller文件夹中添加一个class，代码为：

namespace WebApi.Controllers
{
    public class ContactsController:ApiController
    {
       public IEnumerable<Contact> GetAllContacts()
        {
            Contact[] contacts = new Contact[]
            {
                new Contact{ Name="张三", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
                new Contact{ Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},
                new Contact{ Name="王五", PhoneNo="789", EmailAddress="wangwu@gmail.com"},
            };
            return contacts;
        }
    }

    public class Contact
    {
        public string Name { get; set; }
        public string PhoneNo { get; set; }
        public string EmailAddress { get; set; }
    }
}

 

 

7、在WebApp中的某个Action的View中代码为：

<html>
<head>
     <title>联系人列表</title>
     <script src="../../Scripts/jquery-1.7.1.js"></script>
</head>
<body>
     <ul id="contacts"></ul>
     <script type="text/javascript">
                     $(function ()
                     {
                         alert("");
                                 $.ajax({
                                         Type       : "GET",
                                         url        : "http://localhost:57826/api/contacts",
                                         dataType   : "jsonp",
                                         success    : listContacts
                                 });
                         });
             
                     function listContacts(contacts) {
                         alert("");
                             $.each(contacts, function (index, contact) {
                                     var html = "<li><ul>";
                                     html += "<li>Name: " + contact.Name + "</li>";
                                     html += "<li>Phone No:" + contact.PhoneNo + "</li>";
                                     html += "<li>Email Address: " + contact.EmailAddress + "</li>";
                                     html += "</ul>";
                                     $("#contacts").append($(html));
                                 });
                         }
                 </script>
</body>
</html>

 

8、通过WebApp中的页面请求WebApi，最终显示的结果为：

：

在Web Api中快速实现JSonp的更多相关文章

  1. Web APi之手动实现JSONP或安装配置Cors跨域（七）

    前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

  2. 在ASP.NET Core Web API中为RESTful服务增加对HAL的支持

    HAL(Hypertext Application Language,超文本应用语言)是一种RESTful API的数据格式风格,为RESTful API的设计提供了接口规范,同时也降低了客户端与服务 ...

  3. Entity Framework 6 Recipes 2nd Edition（9-3）译->找出Web API中发生了什么变化

    9-3. 找出Web API中发生了什么变化 问题 想通过基于REST的Web API服务对数据库进行插入,删除和修改对象图,而不必为每个实体类编写单独的更新方法. 此外, 用EF6的Code Fri ...

  4. ASP.NET Web API中的Controller

    虽然通过Visual Studio向导在ASP.NET Web API项目中创建的 Controller类型默认派生与抽象类型ApiController,但是ASP.NET Web API框架本身只要 ...

  5. Web APi 2.0优点和特点？在Web APi中如何启动Session状态？

    前言 曾几何时,微软基于Web服务技术给出最流行的基于XML且以扩展名为.asmx结尾的Web Service,此服务在.NET Framework中风靡一时同时也被.NET业界同仁所青睐,几年后在此 ...

  6. 在ASP.NET Web API中使用OData

    http://www.alixixi.com/program/a/2015063094986.shtml 一.什么是ODataOData是一个开放的数据协议(Open Data Protocol)在A ...

  7. Web Api中的get传值和post传值

    GET 方式 get方式传参 我们一般用于获取数据做条件筛选,也就是 “查” 1.无参 var look = function () { $.ajax({ type: "GET", ...

  8. WEB API 中HTTP的get、post、put,delete 请求方式

    一.WEB API 中HTTP 请求方式的四个主要方法 (GET, PUT, POST, DELETE), 按照下列方式映射为 CURD 操作: 1.POST 用于新建资源,服务端在指定的URI 上创 ...

  9. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【五】——在Web Api中实现Http方法(Put,Post,Delete)

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 在Web Api中,我们对资源的CRUD操作都是通过相应的Http方法来实现——Post(新 ...

随机推荐

  1. Yii2归档安装法

    打开dos 操作命令  1.先把init.bat  拖到dos命令窗口 打开 (如果拖过去没打开 可以回车Enter一下) 这里需要注意一下  下图红圈中是两种环境  0->开发环境  1-&g ...

  2. How can you determine how much disk space a particular MySQL table is taking up?

    http://stackoverflow.com/questions/6474591/how-can-you-determine-how-much-disk-space-a-particular-my ...

  3. hibernate 延长加载范围 4.2

    1. 关闭延迟加载功能 lazy="false"2.修改抓取策略 fetch="join"直接查询关联数据,一个联接查询搞定3.使用Hibernate对象的in ...

  4. Linux的五个查找命令find,locate,whereis,which,type

    Linux的五个查找命令 1. find 最常见且最强大的命令,可以查找任何文件. 格式 $ find   指定目录   指定条件   指定动作   指定目录: 所要搜索的目录及其子目录,默认当前目录 ...

  5. Lucene 实例教程(二)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本人声明.否则将追究法律责任. 作者: 永恒の_☆ 地址: http://blog.csdn.net/chenghui031 ...

  6. db2 xml 转 table【XQuery系列】

    版本号:DB2 Version 9.1 1.创建測试表,初始化数据 create table emp (doc XML);   INSERT INTO EMP VALUES ('<dept bl ...

  7. Spring IOC和DI原理讲解并制作LazyCoder版的Spring (一)

    转载请注意出处:http://blog.csdn.net/zcm101 写在前面的话 最近,给项目组成员培训了Spring 控制反转和依赖注入的原理,并自己做了个Lazy Coder版的Spring, ...

  8. c# .net 读取json 字符串 与序列化和反序列化json字符串

    命名空间 using Newtonsoft.Json.Linq; JObject obj = JObject.Parse("json字符串");用 obj["" ...

  9. 静态化 - 伪静态技术（PHP正则表达式实现）

    效果: 代码: <?php // + —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— —— // + 正则表达式,实 ...

  10. Codeforces Round #315 (Div. 2C) 568A Primes or Palindromes? 素数打表+暴力

    题目:Click here 题意:π(n)表示不大于n的素数个数,rub(n)表示不大于n的回文数个数,求最大n,满足π(n) ≤ A·rub(n).A=p/q; 分析:由于这个题A是给定范围的,所以 ...