本文翻译自：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. jquery自定义分页插件

    //每次只显示5个页码(function ($) { //设定页码方法,初始化 $.fn.setPager = function (options) { var opts = $.extend({}, ...

  2. ViewFilpper

    package com.example.suneyaenews; import java.util.ArrayList; import java.util.HashMap; import java.u ...

  3. python成长之路15

    一:JavaScript: JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的 ...

  4. QR Code 码

    一.QR Code码 由日本Denso公司于1994年9月研制的一种矩阵二维码符号,它除具有一维条码及其它二维条码所有的信息容量大.可靠性高.可表示汉字及图象多种文字信息.保密防伪性强等优点外,还具有 ...

  5. 最详细最实用-Orcad10.5安装说明

    接受协议 选择安装 忽略警告 全部为空 忽略警告 直接下一步 选择YES 为空,直接下一步 全选,根据需要修改该路径,下一步 根据需要修改该路径 下一步 直接next 忽略提示 直接下一步 直接下一步 ...

  6. 安卓开发37：自定义的HorizontalScrollView类，使其pageScroll的时候焦点不选中

    自定义一个HorizontalScrollView类,主要为了让这个HorizontalScrollView不能鼠标点击,不能左右按键,并且没有焦点. public class ImageMoveHo ...

  7. git 使用过程（一、准备工作）

    没有多余的废话,只是纯粹的捞干的记录下一自己使用Git的过程.(正在学习中,也是刚接触,记录过程可能有点乱.等熟悉之后在重新整理一下) 一.先下载git客户端 网址:http://msysgit.gi ...

  8. 配置greenplum参数

    在进行一个greenplum安装之前需要进行配置一下相关的系统参数,否则很容易出现意想不到的错误. 1.修改系统参数 编辑 /etc/sysctl.conf ,以下是最小配置 kernel.shmma ...

  9. [Swust OJ 1026]--Egg pain's hzf

      题目链接:http://acm.swust.edu.cn/problem/1026/     Time limit(ms): 3000 Memory limit(kb): 65535   hzf ...

  10. ContentProvider的一些总结

    ContentProvider中的URI, The URI that identifies the provider   一个特定的uri对应着唯一一个内容提供者, 谷歌官方文档里的说明, Query ...