在Web Api中快速实现JSonp
本文翻译自：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的更多相关文章
- Web APi之手动实现JSONP或安装配置Cors跨域（七）
前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...
- 在ASP.NET Core Web API中为RESTful服务增加对HAL的支持
HAL(Hypertext Application Language,超文本应用语言)是一种RESTful API的数据格式风格,为RESTful API的设计提供了接口规范,同时也降低了客户端与服务 ...
- Entity Framework 6 Recipes 2nd Edition（9-3）译->找出Web API中发生了什么变化
9-3. 找出Web API中发生了什么变化 问题 想通过基于REST的Web API服务对数据库进行插入,删除和修改对象图,而不必为每个实体类编写单独的更新方法. 此外, 用EF6的Code Fri ...
- ASP.NET Web API中的Controller
虽然通过Visual Studio向导在ASP.NET Web API项目中创建的 Controller类型默认派生与抽象类型ApiController,但是ASP.NET Web API框架本身只要 ...
- Web APi 2.0优点和特点？在Web APi中如何启动Session状态？
前言 曾几何时,微软基于Web服务技术给出最流行的基于XML且以扩展名为.asmx结尾的Web Service,此服务在.NET Framework中风靡一时同时也被.NET业界同仁所青睐,几年后在此 ...
- 在ASP.NET Web API中使用OData
http://www.alixixi.com/program/a/2015063094986.shtml 一.什么是ODataOData是一个开放的数据协议(Open Data Protocol)在A ...
- Web Api中的get传值和post传值
GET 方式 get方式传参 我们一般用于获取数据做条件筛选,也就是 “查” 1.无参 var look = function () { $.ajax({ type: "GET", ...
- WEB API 中HTTP的get、post、put,delete 请求方式
一.WEB API 中HTTP 请求方式的四个主要方法 (GET, PUT, POST, DELETE), 按照下列方式映射为 CURD 操作: 1.POST 用于新建资源,服务端在指定的URI 上创 ...
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【五】——在Web Api中实现Http方法(Put,Post,Delete)
系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 在Web Api中,我们对资源的CRUD操作都是通过相应的Http方法来实现——Post(新 ...
随机推荐
- win7 VMware Workstation Centos6.5虚机桥接上网设置 详解（靠谱）
1.VMware Workstation 设置 2. vim /etc/sysconfig/network-scripts/ifcfg-eth0 NAME="System eth0" ...
- Python网络编程——获取远程设备的IP地址
有时需要把设备的主机名转换成对应的IP地址,下面是一个简单的操作. import socket def get_remote_machine_info(): # 定义get_remote_machin ...
- Protel对话窗字体显示不完全问题解决办法(PCB)
点击protel99左上角的大箭头,点击preferences ,在对话框中把use client system fonts for all dialogs 复选框去掉,就可以了.
- spring Annotation 笔记2.1
使用注解替代xml 在前几章的笔记基础上添加使用注解的形式 1.配置applicationContext 添加context schema <?xml version="1.0&quo ...
- vs2010 条件断点 has changed是什么意思？
在vs2010 断点设置 condition里,有2个选项可以选择: 一个是true,另个是has changed,true好理解,如果表达式为真则停止.但是has changed是什么意思.看了官网 ...
- Windows XP硬盘安装Ubuntu 12.04双系统图文详解
Windows XP硬盘安装Ubuntu 12.04双系统图文详解 Ubuntu 12.04 LTS版本于2012年4月26日发布,趁着五一放假,赶紧在自己的Windows XP的电脑上安装下Ubun ...
- Python重写C语言程序100例--Part9
''' [程序71] 题目:编写input()和output()函数输入,输出5个学生的数据记录. 1.程序分析: 2.程序源码: 使用list来模拟结构(不使用class) stu = [strin ...
- ThinkPHP - 连贯操作 - 【实现机制】
<?php //模型类 class Model { //数据库连接 private $_conn = NULL; //where语句 private $_where = NULL; //表名称 ...
- javascript 学习随笔
var carname="Volvo"; var carname; 重新声明变量后变量的值不变,在这里还是volvo var carname="Volvo"; ...
- 配置系统引导启动SuperScoekt
配置系统引导启动SuperScoekt SuperSocket源码解析之启动过程 一 简介 这里主要说明从配置系统引导启动SuperScoekt作为应用程序,且以控制台程序方式启动 二 启动过程 2. ...