记录一下 这周研究 api相关知识,主要介绍 api 分类、创建、调用。特别感谢网上同仁提供的资料。
关于 web api 分类:
wcf web api 和 asp.net web api , 2012年2月 微软已宣布 WCF和ASP.NET 团队合并,把WCF Web API的内容并入了ASP.NET Web API。
(详见:http://www.cnblogs.com/shanyou/archive/2012/03/11/2390672.html)
关于 web api 创建:
研发环境配置:
首先需要安装了ASP.NET MVC 4的 Visual Studio 。下面的用哪个都行:
- Visual Studio 2012
- Visual Studio 2010 且已安装 ASP.NET MVC 4。(需要安装vssp1补丁,耗时较长)
下面使用vs2010 为例,具体操作步骤:
第一:创建项目,选择 mvc4 web 应用程序
第二:在弹出的“新 ASP.NET MVC 4 项目”对话框中,选择“Web API”然后点“确定”。
第三:当你创建完项目以后,”新建项目“向导就自动创建了2个控制器。在解决方案资源管理器里展开”Controllers“目录就能看到了。
- HomeController 是一个传统的 ASP.NET MVC 控制器。它只是负责处理站点的HTML页,跟Web API没有直接关系。
- ValuesController 是一个示例 WebAPI 控制器。
解决方案资源管理里,右击 Controllers 目录,选择”添加“,”控制器“:并且选择控制器模版类型,如图:
第四:
控制器定义了三个方法,要么返回单个商品,要么返回一组产品:
- GetAllProducts 方法返回所有的产品,返回类型为 IEnumerable<Product> 。
- GetProductById 方法通过ID查询某个产品。
ok!web API已经能用了。每一个控制器上的方法都对应了一个URI:
关于 web api 调用:
第一种:从浏览器中访问WEB API
如:http://localhost:xxxx/api/products/. (将 "xxxx" 替换为真实的端口号)
第二种:用JavaScript和jQuery调用 Web API(注意:有时候 $ 识别需替换成JQuery)
(详见:http://tech.it168.com/a2012/0606/1357/000001357231_all.shtml)
在jQuery中,使用 JSONP 跨越数据传输方式, 通过$.getJSON的方法获取服务器端数据。调用WEB API,代码如下:
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 // Send an AJAX request 6 7 $.getJSON("api/products/", 8 9 function (data) { 10 11 // On success, 'data' contains a list of products. 12 13 $.each(data, function (key, val) { 14 15 16 17 // Format the text to display. 18 19 var str = val.Name + ': $' + val.Price; 20 21 22 23 // Add a list item for the product. 24 25 $('<li/>', { text: str }) 26 27 .appendTo($('#products')); 28 29 }); 30 31 }); 32 33 }); 34 35 </script>
实例一 经常使用的传统方式。
1 $(document).ready(function () { 2 3 $.getJSON("api/customers", Loadfun); 4 5 }); 6 7 $.getJson方法中第一个参数是调用服务的地址,第二个参数是回调方法,这个回调方法Loadfun中,将展示服务端web api返回的数据,代码如下: 8 9 function Loadfun(data) { 10 $("#customerTable").find("tr:gt(1)").remove(); 11 $.each(data, function (key, val) { 12 var tableRow = '<tr>' + 13 '<td>' + val.CustomerID + '</td>' + 14 '<td><input type="text" value="' + val.CompanyName + '"/></td>' + 15 '<td><input type="text" value="' + val.ContactName + '"/></td>' + 16 '<td><input type="text" value="' + val.Country + '"/></td>' + 17 '<td><input type="button" name="btnUpdate" value="Update" /> 18 <input type="button" name="btnDelete" value="Delete" /></td>' + 19 '</tr>'; 20 $('#customerTable').append(tableRow); 21 }); 22 23 $("input[name='btnInsert']").click(OnInsert); 24 $("input[name='btnUpdate']").click(OnUpdate); 25 $("input[name='btnDelete']").click(OnDelete); 26 }
实例二 中我们可以拼接html,给某个按钮注册事件,如同操作普通html一样。
总结:研究的时候,需要耐心去查询文献,必须耐心,当没有线索的时候,再坚持一下,也许奇迹就出现了。