基于jQuery的ajax对WebApi和OData的封装我们还是先来看看要求在看看目标:思路封装方式

基于jQuery的ajax对WebApi和OData的封装

  WebApi 的使用带来了一个显著的特点,对type有一定的要求。一般ajax的type无非就是两种,GET和POST。如果用JSONP来跨域的话,就只能用GET。但是现在WebApi来了,type的类型增加了一倍还要多。这个虽说问题不大,就是多个put、delete,看看要求掌握一下就可以了。但是我觉得,这个总是要有个过程,另外写代码的时候还要想想是put还是post,万一写错了,就会带来不必要的麻烦。那么能不能封装一下呢?

  jQuery的ajax使用其实已经很简单了,但是还是需要设置几个参数,那么能不能在简洁一点呢?或者说有没有必要在封装一下?

  这个就是仁者见仁智者见智的问题了,另外还要看环境,看需求。简单的需求确实没有必要再次封装,直接用就好了。如果需求复杂了一点,那么封装一下也是有必要的。

我们还是先来看看要求

1、  WebApi对type有要求。

2、    OData有自己的使用方式和语法格式。

在看看目标:

1、  使用简单。

2、  便于更改。

3、  便于更换。

  WebApi 刚才说过了,OData呢,确实很强大也很灵活,只是太灵活了,导致增加了学习成本和时间,那么能不能也封装一下,变成大家熟悉的方式呢?

思路

  可能有人看到这个图后回想:我k,用得着这么复杂吗?过度设计吧。其实这个看个人的经历了,经历过的就很容易理解,没经历过的就会很奇怪。最近在看清培兄的大作,就觉得挺奇怪,为啥要这么设计呢?其实是我没有那样的经历,也许以后就理解了吧。

封装方式

  公用属性的封装,就要看实际需求了,比如我的项目里需要对租户ID进行处理,对head里的Authorization的处理(存储token)、cors跨域的处理,访问成功后的统一处理,失败后的统一处理等。

  查询的封装,这个就比较复杂一点,因为有OData,要对他的语法有一个通用的“翻译”,让不会OData的人也能够快速掌握。最后达到,让人感觉不到有OData的存在。这样做便于切换,OData是很强大,但是并不意味着一定会一直使用OData,哪天不用了,客户端的调用代码总不能也跟着大变脸。由于刚刚接触OData,所以封装也是刚刚开始尝试,肯定很多不完善的地方,感觉大家的多多指教!谢过了先。

  添加和修改的封装就比较简单了,设置好type也就没啥事情了,然后可以根据自己的实际情况加点辅助功能,比如设置ID,设置租户ID等。

  删除呢,看着简单,但是实际上是相当的复杂。简单的说,提交一个请求就完事了;复杂的说呢,是物理删除还是逻辑删除,删除前要不要做数据完整性的判断,要不要做级联删除。目前呢只是简单的封装了一下。

这次封装,时间比较紧迫,另外对新项目的理解还不够,比如api的路由规律还没有掌握,本来还想封装一下URL,但是只能暂时放弃了。

  1 //对ajax的封装 //最基础的一层封装
  2 Nature.Ajax = function(ajaxInfo) {
  3      
  4     //定义默认值
  5     //type: "GET",                        //访问方式。
  6     //dataType: Nature.AjaxConfig.ajaxDataType,      //数据类型:JSON、JSONP、text
  7     //cache: true,                        //是否缓存,默认缓存
  8     //urlPara: {},//url后面的参数。一定会加在url后面,不会加到form里。
  9     //formData: {},//表单里的参数。如果dataType是JSON,一定加在form里,不会加在url后面;如果dataType是JSONP的话,只能加在url后面。
 10     //url:  //依靠上层指定
 11 
 12     //补全ajaxInfo
 13     //cache
 14     if (typeof ajaxInfo.cache == "undefined") ajaxInfo.cache = false;
 15 
 16     //type
 17     if (typeof ajaxInfo.formData == "undefined") {
 18         //ajaxInfo.type = "GET";
 19     } else {
 20         //ajaxInfo.type = "POST";
 21         ajaxInfo.data = ajaxInfo.formData;
 22     }
 23    
 24     //处理URL和参数
 25     if (typeof ajaxInfo.url != "undefined") {
 26         //var tmpUrlPara = "";
 27         //var para = ajaxInfo.urlPara;
 28         //for (var key in para) { 
 29         //    tmpUrlPara += "&" + key + "=" + para[key];
 30         //}
 31 
 32         //if (ajaxInfo.url.indexOf('?') >= 0) {
 33         //    //原地址有参数,直接加
 34         //    ajaxInfo.url += tmpUrlPara;
 35         //} else {
 36         //    //原地址没有参数,变成?再加
 37         //    ajaxInfo.url += tmpUrlPara.replace('&', '?');
 38         //}
 39 
 40         ajaxInfo.url = top.apiUrl + ajaxInfo.url.replace(/{TenantId}/g, top.tenantId);
 41 
 42     }
 43      
 44     //处理 beforeSend
 45     var beforeSend = ajaxInfo.beforeSend;
 46    
 47     ajaxInfo.beforeSend = function (XMLHttpRequest) {
 48         if (typeof beforeSend == "function")
 49             beforeSend(token);
 50 
 51         XMLHttpRequest.setRequestHeader("Authorization", "Bearer " + top.token);
 52     }
 53 
 54     //处理xhrFields
 55     if (typeof ajaxInfo.xhrFields == "undefined") {
 56         ajaxInfo.xhrFields = {
 57             //允许cors跨域访问时添加cookie
 58             withCredentials: true
 59         };
 60     } else {
 61         if (typeof ajaxInfo.xhrFields.withCredentials == "undefined") {
 62             ajaxInfo.xhrFields.withCredentials = true;
 63         }
 64     }
 65     //使用cors的方式实现跨域
 66     jQuery.support.cors = true;
 67     
 68     //处理error
 69     var error = ajaxInfo.error;
 70     ajaxInfo.error = function(request, textStatus, errorThrown) {
 71         //访问失败,自动停止加载动画,并且给出提示
 72         //获取返回的错误提示
 73 
 74         var errMsg = request.responseText;
 75         if (typeof errMsg != "undefined") {
 76             errMsg = eval("(" + errMsg + ")");
 77             errMsg = errMsg.message;
 78         }
 79         alert("提交" + ajaxInfo.title + "的时候发生错误!\r\n<br>" + errMsg);
 80         if (typeof top.spinStop == "function")
 81             top.spinStop();
 82         if (typeof error == "function") error();
 83     };
 84 
 85     //处理success
 86     var success = ajaxInfo.success;
 87     ajaxInfo.success = function(data) {
 88         //显示调试信息
 89         //if (typeof parent.DebugSet != "undefined")
 90         //    parent.DebugSet(data.debug);
 91 
 92         if (typeof success == "function")
 93             success(data);
 94         
 95     };
 96 
 97     //开始执行ajax
 98     $.ajax(ajaxInfo);
 99 
100    
101 };
 1 //查询数据
 2 Nature.Ajax.find = function (ajaxInfo) {
 3     ajaxInfo.type = "GET";
 4     var info = ajaxInfo.pagerInfo ;
 5     //处理url,分页和查询
 6     if (typeof info != "undefined") {
 7         if (typeof ajaxInfo.data == "undefined") ajaxInfo.data = {};
 8 
 9         if (typeof info.pageSize != "undefined")
10             ajaxInfo.data["$top"] = info.pageSize;
11 
12         if (typeof info.pageIndex != "undefined")
13             ajaxInfo.data["$skip"] = (info.pageIndex - 1) * info.pageSize;
14 
15         if (typeof info.orderby != "undefined" && info.orderby != "")
16             ajaxInfo.data["$orderby"] = info.orderby;
17 
18     }
19 
20     //处理查询条件
21    
22    
23 
24     //处理返回事件 $orderby
25     var success = ajaxInfo.success;
26 
27     ajaxInfo.success = function (data) {
28         // 
29         //判断返回信息
30         if (typeof data.message != "undefined") {
31             alert(data.message);
32         } else {
33             if (typeof success == "function")
34                 success(data);
35         }
36     };
37 
38     Nature.Ajax(ajaxInfo);
39 
40 };
//添加数据
Nature.Ajax.add = function(ajaxInfo) {
    ajaxInfo.type = "POST";

    //判断data 。添加 id 和tenantId。
    if(typeof ajaxInfo.data != "undefined"){
        if(typeof ajaxInfo.data.id != "undefined"){
            ajaxInfo.data.id = '00000000000000000000000000000000';
        }
        if(typeof ajaxInfo.data.tenantId != "undefined"){
            ajaxInfo.data.tenantId = top.tenantId;
        }
    }

    Nature.Ajax(ajaxInfo);

};

//修改数据
Nature.Ajax.update = function(ajaxInfo) {
    ajaxInfo.type = "PUT";
     //判断data 。添加  tenantId。
    if(typeof ajaxInfo.data != "undefined"){
        
        if(typeof ajaxInfo.data.tenantId != "undefined"){
            ajaxInfo.data.tenantId = top.tenantId;
        }
    }
    
    Nature.Ajax(ajaxInfo);

};

//删除数据
Nature.Ajax.del = function(ajaxInfo) {
    ajaxInfo.type = "DELETE";

    Nature.Ajax(ajaxInfo);

};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏NetCore

转换程序的一些问题:设置为 OFF 时,不能为表 'Test' 中的标识列插入显式值。8cad0260

因为先前的转换程序备份都没了:( 现在又重新开始学2005,所以借此准备再次写一个转换程序(针对asp.net forums) 考虑到一个问题,先前我都是...

22950
来自专栏比原链

剥开比原看代码17:比原是如何显示交易的详细信息的?

Gitee地址:https://gitee.com/BytomBlockchain/bytom

9010
来自专栏Jerry的SAP技术分享

如何启用SAP C4C OData Event Notification

当我们在试图使用SAP C4C OData事件通知这个功能时,如果遇到下列提示消息,说明这个功能在business configuration里没有开启:

12640
来自专栏逸鹏说道

微软分布式云计算框架Orleans(1):Hello World

自从写了RabbitHub框架系列后的一段时间内一直在思索更加轻量简便,分布式高并发的框架(RabbitHub学习成本较高),无意间在网上级联看到了很多...

60590
来自专栏安富莱嵌入式技术分享

【二代示波器教程】第13章 RTX操作系统版本二代示波器实现

本章教程为大家讲解RTX操作系统版本的二代示波器实现。主要讲解RTOS设计框架,即各个任务实现的功能,任务间的通信方案选择,任务栈,系统栈以及全局变量共享问题。...

19520
来自专栏魏艾斯博客www.vpsss.net

建站新手错把“一女嫁二夫” NS解析错误导致网站或企业邮箱打不开

NS解析对于经常建站的老手来说已经驾轻就熟了,添加 A 记录、MX 记录、CNAME 记录都很熟练,几分钟就可以搞定。不过对于建站新手来说还是比较蒙圈,搞不清什...

26930
来自专栏云计算教程系列

如何使用腾讯云云硬盘API

腾讯云控制台允许您以类似于使用硬盘驱动器的方式管理腾讯云CVM的额外存储。只需点击腾讯云简化的GUI或图形用户界面,即可为我们的CVM添加云硬盘。但是,这不是一...

24120
来自专栏FreeBuf

“震网三代”(CVE-2017-8464)的几种利用方法与防范

早在6月13日,微软发布补丁修复编号为CVE-2017-8464的漏洞,本地用户或远程攻击者可以利用该漏洞生成特制的快捷方式,并通过可移动设备或者远程共享的方式...

43740
来自专栏walterlv - 吕毅的博客

深入了解 WPF Dispatcher 的工作原理(PushFrame 部分)

发布于 2017-09-25 19:49 更新于 2017-09...

14120
来自专栏程序员互动联盟

【计算机基本概念】如何理解内存?

内存是计算机中重要的部件之一,它是与CPU进行沟通的桥梁。计算机中所有程序的运行都是在内存中进行的,因此内存的性能对计算机的影响非常大。内存(Memory)也被...

33840

扫码关注云+社区

领取腾讯云代金券