在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(新 ...
随机推荐
- 第四节 Code 39 码 / 三九码
39码是西元1974年发展出来的条码系统,是一种可供使用者双向扫瞄的分散式条码,也就是说相临两资料码之间,必须包含一个不具任何意义的空白(或细白,其逻辑值为0),且其具有支援文数字的能力,故应用较一般 ...
- 这些屌炸天的创业者为何对投资人说NO
曾有人说,世上的创业者只分为两种,一种是找到投资的,一种是没有找到的. 但其实还有第三种,就是那些拒绝了投资人的创业者. 他们摒弃了投资人抛来的橄榄枝,并非不差钱,不接受投资的原因大体出于两个方面,一 ...
- spring mvc 分页
spring mvc 分页
- myeclipse部署时An internal error occurred 错误的几种情况
myecplise上将工程部署到应用下时,经常出现 An internal error occurred during: "Add Deployment". java.lang.N ...
- asp.net从客户端检测到有潜在危险的Request.Form 值
asp.net开发中,经常遇到“从客户端检测到有潜在危险的Request.Form 值”错误提示,很多人给出的解决方案是: 1.web.config文档<system.web>后面加入这一 ...
- 宣布 Windows Azure 通过 PCI DSS 合规性验证并且 ISO 认证范围扩大，同时正式发布 Windows Azure Hyper-V 恢复管理器和其他更新功能
今天,我们高兴地宣布两个重大里程碑事件,客户将能借此提高基于 Windows Azure 构建安全且合规的应用程序的能力.此外,我们还宣布正式发布 Windows Azure Hyper-V 恢复管理 ...
- JNI_Java Native Interface
一.简介 Java Native Interface(JNI),java与c/c++交互的接口,下面是一个简单是示例. javah 可以生成native方法对应的头文件,javap 可以查看方法或者属 ...
- hadoop、spark/storm等大数据相关视频资料汇总下载
小弟不才,工作中也用到了大数据的相关东西.一開始接触的时候,是通过买来的教学视频入的门.这两天整理了一下自己的视频资料.供各位进行下载. 文档截图:
- Android Touch事件传递机制具体解释 上
尊重原创:http://blog.csdn.net/yuanzeyao/article/details/37961997 近期总是遇到关于Android Touch事件的问题,如:滑动冲突的问题,曾经 ...
- linux添加、修改环境变量
比如要把/etc/apache/bin目录添加到PATH中,方法有三: 1.In shell: setenv <path_to_append>: $ENVNAME setenv PATH ...