实现无缝兼容ajax/websocket网页应用和服务

栏目: Html5 · 发布时间: 6年前

内容简介:为了让用户体验更好,页面前端往往是通过ajax来进行数据处理;由于浏览器的设计原因每个域名下的连接有限,这样导致了同时进行ajax数据请求效率无法得到有效地提升,为了提高效率和传统HTTP协议上的限制,因此websocket的应运而生。由于websocket是后期提供的升级协议,所以现有很多WEB服务逻辑无法同时兼容两种协议处理;导致了页面前端就无法更有效地利用websocket优势,更多的是在这两者间做一种选择。为了更好地利用websocket的优势和传统性兼容,FastHttpApi实现无缝兼容Aja

为了让用户体验更好,页面前端往往是通过ajax来进行数据处理;由于浏览器的设计原因每个域名下的连接有限,这样导致了同时进行ajax数据请求效率无法得到有效地提升,为了提高效率和传统HTTP协议上的限制,因此websocket的应运而生。由于websocket是后期提供的升级协议,所以现有很多WEB服务逻辑无法同时兼容两种协议处理;导致了页面前端就无法更有效地利用websocket优势,更多的是在这两者间做一种选择。

FastHttpApi

为了更好地利用websocket的优势和传统性兼容,FastHttpApi实现无缝兼容Ajax和Websocket数据请求,开发者只需要写一分服务端代码!更重要的是FastHttpApi可以让开发者完全不用写Javascript调用的API脚本!在新版本的FastHttpApi中实现了一个自定义工具,只要设置好这个自定义 工具 开发者在VS编写逻辑控制器的情况下就自动生成对应调用的API脚本文件。 插件安装说明

脚本调用机制

当编写完成逻辑控制器后,就可以把对应的脚本引用到网页上(生成脚本还支持 await 调用),直接调用相关方法即可。

 var result = await $ListEmployees();
        var empsBlock = new Vue({
            el: '#lstbody',
            data: result
        });

组件脚本默认是隐藏了调用方式,使用者并不用去关心其中细节(具本可以看FastHttpApi代码了解);当组件探测到有可用的websocket连接的时候就会自动使用websocket进行数据请求,这样对于有多个数据块同时加载的时候比传统的ajax有着更高效的通讯优势。如果websocket不可用或还没初始化完成时,那组件就会自动使用传统的ajax模式进行处理。

示例实现

为了更好地体现FastHttpApi在这方面的功能,以下针对Northwind的订单业务进行一个分页查询。

控制器代码

        /// <summary>
        /// 订单查询
        /// </summary>
        /// <param name="employeeid">雇员ID</param>
        /// <param name="customerid">客户ID</param>
        /// <param name="index">分页索引</param>
        /// <returns>{Index:0,Pages:0,Items:[order],Count:0}</returns>
        public object ListOrders(int employeeid, string customerid, int index, IHttpContext context)
        {
            Func<Order, bool> exp = o => (employeeid == 0 || o.EmployeeID == employeeid)
             && (string.IsNullOrEmpty(customerid) || o.CustomerID == customerid);
            int count = mOrders.Count(exp);
            int size = 20;
            int pages = count / size;
            if (count % size > 0)
                pages++;
            var items = mOrders.Where(exp).Skip(index * size).Take(size);
            return new { Index = index, Pages = pages, Items = items, Count = count };
        }

以上是针对一个订单分析查询的逻辑方法,在编写完成逻辑控制器后在相应代码文件属性->自定义工具输入'JASPI'即可生成对应的javascript脚本:

var $ListOrders$url='/listorders';
///<summary>
/// 订单查询
/// </summary>
/// <param name="employeeid">雇员ID</param>
/// <param name="customerid">客户ID</param>
/// <param name="index">分页索引</param>
/// <returns>{Index:0,Pages:0,Items:[order],Count:0}</returns>
function $ListOrders(employeeid,customerid,index,useHttp)
{
    return api($ListOrders$url,{employeeid:employeeid,customerid:customerid,index:index},useHttp).sync();
}
function $ListOrders$async(employeeid,customerid,index,useHttp)
{
    return api($ListOrders$url,{employeeid:employeeid,customerid:customerid,index:index},useHttp);
}

以上代码都是插件自动生成,如果控制器方法有注释同样也会生成到JS中,开发完全只需要把脚本文件引用到页面即可。插件针对控制生成了两个方法,一个同步一个异步;同步方法是支持await调用,异步方法则在调用过程中指定 Callback 函数;其中 useHttp 参数是强行指定使用ajax请求。

页面集成

FastHttpApi是不支持服务端视图引擎,所以只能使用前端框架来整合页面,在这里选择了VueJS(这个框架的确不错,功能丰富入门简单即看即用)。在VueJS的支撑下页面代码就变得比较简单

 <form class="form-inline">
                            <div class="form-group">
                                <label for="exampleInputName2">Employee:</label>
                                <select id="lstEmployees" style="margin:5px;">
                                    <option value=""></option>
                                    <option v-for="item in Data" v-bind:value="item.ID">{{item.Name}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail2">Customer:</label>
                                <select id="lstCustomers" style="margin:5px;">
                                    <option value=""></option>
                                    <option v-for="item in Data" v-bind:value="item.ID">{{item.Name}}</option>
                                </select>
                            </div>
                            <br />
                            <button type="button" onclick="searchOrder(0)" class="btn btn-default">Search</button>
                        </form>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>OrderID</th>
                                    <th>ShipName</th>
                                    <th>ShipAddress</th>
                                    <th>City</th>
                                    <th>OrderDate</th>
                                </tr>
                            </thead>
                            <tbody id="lstbody">
                                <tr v-for="item in Data.Items">
                                    <td></td>
                                    <td>{{item.OrderID}}</td>
                                    <td>{{item.ShipName}}</td>
                                    <td>{{item.ShipAddress}}</td>
                                    <td>{{item.City}}</td>
                                    <td>{{item.OrderDate}}</td>
                                </tr>
                            </tbody>
                        </table>
  <nav aria-label="Page navigation">
                            <ul id="pagination" class="pagination">

                            </ul>
                        </nav>

页面功能整合了雇佣员、客户两个下选择条件,订单信息显示和分页。接下来整全的javascrip脚就更简单了:

 var app6;
    $(document).ready(function () {
        app6 = new Vue({
            el: '#lstbody',
            data: { Data: [] }
        });
        init();
    });

    async function init() {
        var result = await $GetEmployeesName();
        var app4 = new Vue({
            el: '#lstEmployees',
            data: result
        });

        result = await $GetCustomersName();
        var app5 = new Vue({
            el: '#lstCustomers',
            data: result
        });
        searchOrder(0);
    }

    async function searchOrder(index) {
        var result = await $ListOrders($('#lstEmployees').val(), $('#lstCustomers').val(), index);
        app6.Data = result.Data;
        pagination(index, result.Data.Pages);
    }

实际处理效果

这个页面一开始就分别加载3项数据,如果按传统的ajax加载来看一般都串行加载,后前等前才完成后才能请求加载。当在FastHttpApi的支撑下结果又怎样呢,我们看一下整个页面的加载情况: 实现无缝兼容ajax/websocket网页应用和服务

实现无缝兼容ajax/websocket网页应用和服务

从图上我们可以看到,由于websocket没有初始化完成,所以获取雇员的数据是直接ajax了,后面的客户和默认订单查询走了websocket通讯。如果页面有大量数据块整合的情况,那使用FastHttpApi会有很大的加载效率优势。

了解更多FastHttpApi

项目地址: https://github.com/IKende/FastHttpApi

完全基于FastHttpApi实现的官方网站: http://www.ikende.com


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Software Design 中文版 01

Software Design 中文版 01

[日] 技术评论社 / 人民邮电出版社 / 2014-3 / 39.00

《Software Design》是日本主流的计算机技术读物,旨在帮助程序员更实时、深入地了解前沿技术,扩大视野,提升技能。内容涵盖多平台软件开发技巧、云技术应用、大数据分析、网络通信技术、深度互联时代下的移动开发、虚拟化、人工智能等最前沿实践性讲解。以人脑思维模式,激发计算机操控的无限可能;以软件开发技巧,挖掘系统与硬件的最大价值。 《Software Design 中文版 01》的主题为......一起来看看 《Software Design 中文版 01》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具