zoukankan      html  css  js  c++  java
  • 分布式技术 webapi

         webapi可以返回json、xml类型的数据,对于数据的增、删、改、成,提供对应的资源操作,按照请求的类型进行相应的处理,主要包括 Get(查)、Post(增)、Put(改)、Delete(删),这些都是HTTP协议支持的请求方式。     

         webapi 的请求方式:根据路由规则请求。

         webservice和webapi两种web服务的比较:

         webservice :基于SOAP风格的网络服务,使用方法进行请求。

         webapi:基于REST 风格的网络服务、使用资源进行请求。

         webapi中5个方法分别是查单个、查所有、增加、修改、删除。

         微软有了webservice和wcf,为什么还要有webapi?

         用过wcf的人应该都知道,面对一大堆复杂的配置文件,万一出了问题,真的会叫人抓狂,而且提供不同的客户端调用也不是很方便。不得不承认wcf的功能确实非常强大,可是有时候我们通常不需要那么多复杂的功能,只需要简单的仅通过使用HTTP或HTTPS来调用的增、删、改、查功能。webapi诞生...那么什么时候考虑使用webapi?

        1.需要webservice但不需要SOAP。

        2.需要在已有的wcf服务基础上建立non-soap-based http 服务。

        3.只想发布一些简单的HTTP服务,不想使用相对复杂的wcf配置。      

        4.发布服务可能会被带宽受限的设备访问

        5.希望使用开源框架,关键时候可以自己调试或自定义一下框架

        webapi 使用

        一、创建webapi 

            (1)新建项目->web->ASP.NET MVC Web 应用程序->命名为WebApiApp,在项目模板中选中“WebApi”。

              

           (2)在Models目录中新建类UsersInfo。

            

    namespace WebApiApp.Models
    {
        public class UsersInfo
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public int Age { get; set; }
            public string Email { get; set; }
            public string Adress { get; set; }           
        }
    }

          (3)新建API控制器UsersInfoController,右击目录Controllers,选择“添加->控制器”。和普通控制器不一样的地方是这里要继承ApiController,而不是Controller.

    namespace WebApiApp.Controllers
    {
        public class UsersInfoController : ApiController
        {
    
            UsersInfo[] usersInfos = new UsersInfo[]
            {
                new UsersInfo{Id=1,Name="张三", Age=100, Email="abcd@126.com", Adress="北京"},
                new UsersInfo{Id=2,Name="李四", Age=222, Email="abcd@126.com", Adress="北京"},
                new UsersInfo{Id=3,Name="王五", Age=333, Email="abcd@126.com", Adress="北京"},
                new UsersInfo{Id=4,Name="侯六", Age=444, Email="abcd@126.com", Adress="北京"}
            };
    
            /// <summary>
            /// 获取全部数据
            /// </summary>
            /// <returns></returns>
            public IEnumerable<UsersInfo> GetAllUsersInfo()
            {
                return usersInfos;
            }
    
            /// <summary>
            /// 根据Id 获取数据
            /// </summary>
            /// <param name="Id"></param>
            /// <returns></returns>
            public UsersInfo GetUsersInfoById(int Id)
            {
                var usersInfo = usersInfos.FirstOrDefault((u) => u.Id == Id);
                return usersInfo;
            }
    
        }
    }

    二、调用WebAPI

          WebAPI有两种调用方式。

          1、调用方式1:jQuery的Ajax

           指定请求的数据类型(contentType):“application/json:charset=utf-8”。

           主要属性如下:

           a、type:请求方式,包括get、post、put、delete

           b、url:请求资源,根据路由规则编写

           c、data:请求数据,为json格式

           d、contentType:请求数据的类型及编码

           e、dataType:返回的数据类型,可以是text、json

           f、success:成功处理的回调函数

           g、error:失败处理的回调函数

           h、async:true同步,false异步

           提示:使用js的异步操作不支持跨域访问,也就是说js异步调用操作必须和webapi在同一个站点上。

          (1) 新增一个UsersInfo.html来测试WebAPI的调用,代码如下:

            

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="Scripts/jquery-1.8.3.min.js"></script>
    </head>
    
    <body>
        <div>
            <h3>所有用户</h3>
            <ul id="usersinfos"></ul>
    
        </div>
        <div>
            <h3>查询</h3>
            <input type="text" id="Id" size="15" />
            <input type="button" value="查询" onclick="GetUsersInfoById() " />
            <ul id="usersinfo"></ul>
        </div>
    
        <script type="text/javascript">
            var url_api = 'api/UsersInfo/';
    
            $(function () {
                GetAllUsersInfo();
    
            })
    
            function GetAllUsersInfo() {
                var strli = "";
                $.ajax({
                    type: 'GET',
                    url: url_api,
                    async: false,//同步
                    dataType: 'json',
                    success: function (json) {
    
                        $.each(json, function (i, n) {
                            strli += "<li>";
                            strli += 'Id:' + n.Id + ',' + 'Name:' + n.Name + ',' + 'Age:' + n.Age + ',' + 'Email:' + n.Email + ',' + 'Adress:' + n.Adress + '';
                            strli += '</li>';
                        })
    
                        $("#usersinfos").html(strli);
    
                    },
                    error: function (xhr, status, error) {
                        alert("操作失败");
                    }
                });
            }
    
            function GetUsersInfoById() {
                var strli_ById = "";
                var Id = $('#Id').val();
                $.ajax({
                    type: 'GET',
                    url: url_api,
                    async: false,//同步
                    dataType: 'json',
                    data: { 'Id': Id },
                    success: function (json) {
    
                        strli_ById += "<li>";
                        strli_ById += 'Id:' + json.Id + ',' + 'Name:' + json.Name + ',' + 'Age:' + json.Age + ',' + 'Email:' + json.Email + ',' + 'Adress:' + json.Adress + '';
                        strli_ById += '</li>';
    
                        $("#usersinfo").html(strli_ById);
    
                    },
                    error: function (xhr, status, error) {
                        alert("操作失败");
                    }
                });
            }
    
    
        </script>
    </body>
    </html>

          (2) 先运行WebApiApp项目,然后浏览UsersInfo.html,结果如下:

       

        

      

                                                                                                                                                              

  • 相关阅读:
    转:验证日期的正则表达式比较全面地验证
    IIS应用地址池监控
    Net预编译 真的好用与否
    关键字检索,找到所有数据
    vue 文件上传自定义实现
    docker 基础(一)
    input表单中嵌入百度地图
    linux系统光盘开机自动挂载-配置本地yum源
    linux学习笔记基础篇(一)
    构建apache web 服务器
  • 原文地址:https://www.cnblogs.com/foreverfendou/p/7479629.html
Copyright © 2011-2022 走看看