jquery ajax 请求小技巧实例分析

本文实例讲述了jquery ajax 请求小技巧。分享给大家供大家参考,具体如下:

jquery   是一个非常好用的js框架,它为我们提供了很多工具。启动异步请求就是很好用的一个工具

官方推荐的ajax 请求格式

$.ajax({
   url:"http://xxxxxxxxxxxxxxxxx/",//你的域名
   dataType:"json",        //对服务器返回的结果进行该数据格式处理 我这里写了json 也可以红xml、text、html 等格式
   type:"get',           //请求到服务器的方式 我这里是get 也可以用其它形式 如post
   beforeSend:function(res){},   //在请求之前会调用这个方法  其中的res 就是XMLHttpRequest 对象
   success:function(result){}   //服务器返回的数据进行dataTyoe 设置的格式 处理后返回的结果
})

在这其中,$.ajax()  方法中传入的数据是一个json   这不难发现吧。  那我们完全可以这样去调用

var ajaxJson = {
   url:"http://xxxxxxxxxxxxxxxxx/",
  dataType:"json",
   type:"get',
   beforeSend:function(res){},  //在请求之前会调用这个方法  其中的res 就是XMLHttpRequest 对象
   success:function(result){}
}
$.ajax(ajaxJson);      //这样去使用。

如果我们想用户在某一个时刻只进行一个请求,而不会产生多余的请求怎么办呢?

在ajax 前面添加一个判定。

var ajax_oper = {
   ajax_status : true,             //当前ajax执行状态
   ajax_json : function(ajaxJson){
       if(!this.ajax_status) return false; // 当这个条件成立的时候,就认为当前有一个正在执行的ajax操作
       $.ajax(ajaxJson);
    }
}

然后 我们在ajaxJson变量中添加如下配置

var ajaxJson={
   url:"http://xxxxxxxxxxxxxxxxx/",
   dataType:"json",
   type:"get',
   beforeSend:function(res){
       ajax_oper.ajax_status = false;
   },
   success:function(result){
        ajax_oper.ajax_status = true;
   }
}
$.ajax(ajaxJson);

这样就可以在每次请求的时候判定一下 当前是否有正在执行的ajax请求 如果有就返回,不去执行。如果没有就执行。当一个ajax执行完毕后我们将ajax_oper的状态调整回来等待下一次请求的进行更改。

当然在移动web开发当中touch事件 有点违背原理,我们在测试的时候发现,在同一时间。touch事件被触发了多次,并且产生了多个ajax请求。更改ajax_status并没有起到作用,分析的方案是 touch事件灵敏到了,连ajax_oper的状态还没更改就已经被触发了多次,也就是在统一时间多个ajax请求都在执行$.ajax方法。这种解决方案,第一就是更改touch事件为click事件,第二就是添加多个ajax_oper 状态,层层判定(也有点不保险哈),第三就是更改后台逻辑处理,如在数据库处理的时候添加触发器,每次在更改的时候触发器会先处理一次,然后根据触发器的处理执行相应的处理。  对了,提示一下,在mysql innodb 表 事务处理过程中    也是会触发触发器的。根据结果进行commit 和 rollback。

更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

(0)

相关推荐

  • jQuery Ajax请求后台数据并在前台接收

    1.前台使用jQuery ajax请求 $.ajax({ url: "r_getRolePer.action", dataType:'json', data: {userId:"1"}, //请求的附加参数,用json对象 method:'POST', success: function(data){ $.messager.alert('消息',data.add,''); //这里使用的时easyui的格式 }, }); 2.在action里面使用response.

  • 浅析jQuery Ajax请求参数和返回数据的处理

    刚接触学会用jQuery ajax的时候,觉得真东西好神奇,这样就可以把数据取回来了啊.然后我可以把取回来的数据渲染到页面上,一颗赛艇. 之前很早接触到项目,并不知道怎么优雅的去用jquery ajax(现在也不优雅): 那个时候看别人写的代码 有 $.post("","",...) 也有 $.get("","",...) 还有 $.ajax() 当然现在知道点,这些写法都是一个意思,还是习惯用 $.ajax() 写写吧. 之

  • Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来分析一下失败的原因 一.失败的原因 那是因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png.文件下载等,然而ajax请求只是个"字符型"的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白

  • jQuery.ajax 跨域请求webapi设置headers的解决方案

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 1.第一步 服务端设置响应头,在webapi的web.config做如下设置 <system.webServer> <httpProtocol> <!--跨域配置开始--> <customHeaders> <add name="Access-Control-All

  • JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • 教你如何终止JQUERY的$.AJAX请求

    最近遇到,如果用户频繁点击ajax请求,有两个问题: 1,如果连续点击了5个ajax请求,前4个其实是无效的,趁早结束节省资源. 2,更严重的问题是:最后一个发送的请求,响应未必是最后一个,有可能造成混乱.还需要一个队列来维护发送的请求和响应. 我其实已经设计好了该队列的实现方式,后来发现jQuery直接通过abort方法,这样就不需要那么复杂的实现了,毕竟还有其他事情等着完成. 用jquery发送ajax请求的确是太方便了,$.get.$.post.$.ajax等等,但我们有时候需要中途中止a

  • 跨域请求之jQuery的ajax jsonp的使用解惑

    直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

  • jquery+ajax实现跨域请求的方法

    本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为  "jsonp"  :type 只能为 GET 前台请求代码如下: 复制代码 代码如下: $.ajax({  type: "GET",  url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin",  dataType: "j

  • js与jQuery终止正在发送的ajax请求的方法

    本文实例讲述了js与jQuery终止正在发送的ajax请求的方法.分享给大家供大家参考,具体如下: 核心:调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'b.php', data:'', timeout:5000, success:function(){ } }) 同时 1. $.get返回的数据类型是XMLHttpRequest,请参考手册.($.post.$.ajax.$.get

随机推荐