本文翻译自：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. UIView 设置阴影(属性说明)

    以下代码实现: 第一个图片的代码 //加阴影--任海丽编辑 _imageView.layer.shadowColor = [UIColor blackColor].CGColor;//shadowCo ...

  2. Oracle Split 函数

    为了让 PL/SQL 函数返回数据的多个行,必须通过返回一个 REF CURSOR 或一个数据集合来完成.REF CURSOR 的这种情况局限于可以从查询中选择的数据,而整个集合在可以返回前,必须进行 ...

  3. 使用wget -i下载多个文件

    使用wget -i下载多个文件 命令: wget -i filelist.txt 说明: 首先,保存一份下载链接文件 cat > filelist.txt url1 url2 url3 url4

  4. java读写

    IO流下分为字节流与字符流,每个流又分为输入输出以及读写. 字节流的两个基类为InputStream与OutputStream. 字符流为Reader和Writer

  5. C语言宏的特殊用法和几个坑（转）

    总结一下C语言中宏的一些特殊用法和几个容易踩的坑.由于本文主要参考GCC文档,某些细节(如宏参数中的空格是否处理之类)在别的编译器可能有细微差别,请参考相应文档. 宏基础 宏仅仅是在C预处理阶段的一种 ...

  6. Protel对话窗字体显示不完全问题解决办法(PCB)

    点击protel99左上角的大箭头,点击preferences ,在对话框中把use client system fonts for all dialogs 复选框去掉,就可以了.

  7. 2015暑假acm短训小结

    时间很快,短训已经结束,短短20天,心里有一些思绪想要记下. 收获: 从最近发的随笔中可以看出,做得最多的是搜索——Dfs,Bfs.对于搜索,如何描述状态,如何压缩状态,如何决定下一个结点,是否可以剪 ...

  8. objective-III 窗口应用程序

    objective-III 一.创建窗口应用程序  打开xcode->create->在iso目录下选择empty-null->创建 在打开的项目文件名上右击NEW FILE,在io ...

  9. vb.net 字符串的操作 应用

    Module Module1 Sub Main() ' 定义3个字符串变量 Dim str1, str2, str3 As String '给str1,str2付初值 str1 = "Hel ...

  10. BZOJ 3132: 上帝造题的七分钟( 二维BIT )

    二维树状数组... 自己YY一下再推一下应该可以搞出来... --------------------------------------------------------------------- ...