场景描述:

在我们平时的开发过程中,经常会遇到这样的情况。在搜索功能中进行模糊搜索或者联想关联。

这就要我们每次对输入框中的数据进行改动时,都要发送一次请求。当在短时间内多次操作改动时,问题就出现了。

每次操作的请求都会返回数据,有时,返回的数据需要时间长,有时返回的数据需要时间短。大家都知道,ajax请求默认的是异步请求,每次请求和请求后进行的操作,都是独立进行的。当同一个请求多次发生时,他在页面上最终执行的效果是,以最晚返回的数据进行相应的展示操作,而不是绝对以最后一次请求所返回的数据进行展示(注:最后一次请求不一定是最晚返回的。)。

我们想要的当然是最后一次请求的数据进行的展示操作了啊。那我们就要求,绝对最后一次执行的是最后一次请求后所要进行的操作。解决方法有两种:

一、使用定时器,限制请求次数。

  保证在一定的时间间隔内,对输入框进行多次改动操作,发送的只有最后一次改动操作的请求。

  这种方法有很大优点,首先在一定程度上,解决了上面所描述的问题。其次,他减少了请求次数,减少了服务器和浏览器的工作量。

  但是他还是有缺点的。

    1、那就是时间间隔的把控。你不知道每次请求究竟会用多长时间,你不清楚设置多少合适,长了牺牲了客户的体验,短了还是会遇到上面的问题。

    2、你不知道你面对的究竟是一群什么样的客户。就算你满足1中的条件设置好,你的客户进行反人类操作,按照你设置的时间间隔进行字母输入,那你的工作还是白费了。

  基于上面两点,我并不喜欢采用这种方法解决这个问题,所以代码也不上了,大家知道思路,逻辑自己梳理吧。(绝对不是小编自己没有整理,才不发代码的。)

二、基于ajax自身的终止函数

  将没有进行完而重复进行的请求,终止掉,而且是只终止前一个ajax请求,新的请求在下一个请求发送前,不会终止。

  在这个方法中,一定要注意,每一个ajax都有一个自己的函数名,不同的函数名定义的ajax就是不同的ajax请求了。要只能终止自己的ajax请求。

  这个方法也是有优缺点的。

  优点:无论客户多么反人类,无论数据请求多么耗时,他都能保证返回和操作的是最有一次请求的数据。

  缺点:每次输入框中的数据改动都会发送请求,即他不能减少请求次数。而且终止的话,也只是不再执行ajax前端部分接下来的操作,后台工作量还在。

好了两种方法大概这样,如果有人想两个方法结合,可以自己整理下啊。接下来,小编就只把第二种方法的代码上传上去,仅供参考。不足之处还望指正。各位大神在上,望多多交流。

var AllAjax={
commonAjax =function (interface,params,callback,flag) {
var data={};
$.each(params,function(i,v){
data[i]=v;
});
        //AllAjax.closeError这个对象元素用于标识,以便于在ajax的报错函数中输出想要的值。
if(AllAjax[interface]){
AllAjax[interface].abort();
AllAjax.closeError=false;
}
AllAjax[interface]=$.ajax({
type: "post",
url: interface,
data: params,
dataType: "json",
success: function(data){
if(data.code == '200'){
callback(data);
}else{ if(AllAjax.closeError){
AllAjax.closeError=true;
}else{
AllAjax.closeError=true;
}
alert('数据有误!'+data.code);
}
},
error:function (err) {
if(AllAjax.closeError||AllAjax.closeError===undefined){
alert('Network is error');
}else{
AllAjax.closeError=true;
}
}
});
};
}
//这个方法中使用对象的形式进行封装。使用方法 AllAjax.commonAjax (url,params,callback,flag);
//四个参数意义,
//url:请求的url,另外还用来作为这个url请求的ajax函数名。
//params:接口调用时传入的参数。
//callback:请求成功后调用的函数。
//flag:传入的另外要使用的参数。会作为callback的参数传入callback中。如果需要,可以在定义回调函数时接受两个参数。此参数可以不传。



  

基于jquery,ajax请求及自我终止的函数封装。的更多相关文章

  1. jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示

    1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...

  2. jQuery ajax 请求php遍历json数组到table中

    html代码(test.html),js在html底部 <!DOCTYPE html> <html lang="en"> <head> < ...

  3. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  4. jquery Ajax请求示例,jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  5. jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

    1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...

  6. 原生js,jquery ajax请求以及jsonp的调用

    ajax    是用来处理前后端交互的技术,可以改善用户体验,其本质是    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容  ...

  7. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

  8. 统一处理jquery ajax请求过程中的异常错误信息的机制

    当jQuery ajax向服务器发送请求,服务器发生异常,比如:400.403.404.500等异常,服务器将异常响应给客户端,此时的ajax可以获取异常信息并进行处理,但此时我们一般是跳转到与异常编 ...

  9. jquery Ajax请求中显示Loading...

    jquery Ajax请求中显示Loading... $('#btnTest').click(function(){      $.ajax({           url ---- ,根据你需要设置 ...

随机推荐

  1. Codeforces Round #414 A. Bank Robbery

    A. Bank Robbery time limit per test 2 seconds memory limit per test   256 megabytes   A robber has a ...

  2. sharePoint查看与更改用户登录账号

    PS D:\deployScript> $user=(Get-SPUser -IDENTITY "i:0e.t|xmssts|zhangshan" -Web http://t ...

  3. MySQL MHA搭建

    MHA算是业内比较成熟的MySQL高可用解决方案,在MySQL故障切换过程中,MHA能做到自动完成数据库的故障切换操作,并且在进行故障切换的过程中,MHA能在最大程度上保证数据的一致性,以达到真正意义 ...

  4. SVN常用功能介绍(一)

    简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. 互联网上很多版本控制服务已从CVS迁移到Subver ...

  5. Python初学者第八天 元组和字典

    8day 1.数据类型:元组 元组:有序的,不可变地数据的集合.但若包含其他可变元素,这些元素可变.显示的告诉别人,此处不可修改: a = (1,2,3,4,5,['1','a']) 2.数据类型:字 ...

  6. Python学习---重点模块之re

    正则表达式是用来操作字符串,但是字符串提供的正则是完全匹配,有时候我们需要进行模糊匹配,这个时候就需要正则表达式了.通过re模块来实现,由C语言来执行底层的匹配 字符匹配(普通字符,元字符): 1 普 ...

  7. Struts学习-Hibernate

    Hibernate (开放源代码的对象关系映射框架) http://www.cnblogs.com/wenwen123/p/5658625.html 一. 1.新建 2.配置 <!-- hibe ...

  8. 设计模式:解释器(Interpreter)模式

    设计模式:解释器(Interpreter)模式 一.前言 这是我们23个设计模式中最后一个设计模式了,大家或许也没想到吧,竟然是编译原理上的编译器,这样说可能不对,因为编译器分为几个部分组成呢,比如词 ...

  9. yii2.0 Activeform表单部分组件使用方法 [ 2.0 版本 ]

    文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dr ...

  10. 基于SAP Kyma的订单编排增强介绍

    尽管有一万个舍不得,2018年还是无可挽回地离我们远去了. 唯有SAP成都研究院的同事和我去年在网络上留下的这些痕迹,能证明2018年我们曾经很认真地去度过每一天: SAP成都研究院2018年总共87 ...