java 调用webapi jsonp_在Web Api中快速实现JSonp

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的介绍：

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 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中代码为：

联系人列表

$(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 = "

• ";

html += "

Name: " + contact.Name + "";

html += "

Phone No:" + contact.PhoneNo + "";

html += "

Email Address: " + contact.EmailAddress + "";

html += "

";

$("#contacts").append($(html));

});

}

8、通过WebApp中的页面请求WebApi，最终显示的结果为：

：