本文翻译自：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. a标签阻止跳转的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. C语言之新同学年龄

    新同学年龄 班里来了一名新同学,很喜欢学数学,同学们问他年龄的时候,他说我的年龄平方是个三位数,立方是个四位数,四次方是个六位数.三次方和四次方正好用遍0.1.2.3.4.5.6.7.8.9这10个数 ...

  3. cocos2d-x游戏开发系列教程-超级玛丽03-main函数

    代码下载链接 http://download.csdn.net/detail/yincheng01/6864893 解压密码:c.itcast.cn main函数内容 #include "m ...

  4. Linux的环境变量总结

    请见Github博客:http://wuxichen.github.io/Myblog/linux/2014/10/11/LinuxEnvironmentVariables.html

  5. 最小生成树Prim算法

    文章作者:甘航  文章来源:http://www.cnblogs.com/ganhang-acm/转载请注明,谢谢合作. 由于数据结构老师布置的一道题 ,我看prim算法看了半天还是一知半解. 在浏览 ...

  6. akka actor中的基本概念(学习小结)

    注:本文章是看blog后的一个阶段小结,只作为个人笔记, 原文链接:http://www.iteblog.com/archives/1154 官网地址贴上:http://doc.akka.io/doc ...

  7. Android studio多个项目之间怎么实现快速切换?

    Android studio多个项目之间怎么实现快速切换?Android studio中打开的项目太多了,想切换到一个项目很麻烦,怎么才能快速切换到另一个项目中呢?请看下文详细介绍 在对Android ...

  8. Linux 特殊符号使用： 倒引号`的使用

    Linux中有很多特殊符号,这里介绍 ` 倒引号的含义. 我们考虑下这个场景,有时我们需要将一个命令的执行结果赋值给某个变量,或者别的用途. 这时我们可以用两个`倒引号将该命令括起来. 例1: 如 e ...

  9. ArduinoYun教程之配置Arduino Yun环境

    ArduinoYun教程之配置Arduino Yun环境 配置Arduino Yun 不管你使用前面介绍的哪种方式连接Arduino Yun.如今都能够配置你的Arduino Yun了.首先须要的是使 ...

  10. Search Insert Position--寻找插入点Given a sorted array and a target value, return the index if the target

    问题:链接 Given a sorted array and a target value, return the index if the target is found. If not, retu ...