Ajax请求,一般都在点击事件下发生的
问题:如果用户点击频率过快,一瞬间点个n次,那就会向服务器要发送n次请求,如何解决!
从前端方面来看,既然是点击发送Ajax请求,那就设置个等待时间,进行第二次请求发送,即setTimeout(),方法,还需要有个标致位,可以是全局变量,隐藏欲表单值,禁用Button按钮,解除绑定点击事件,(这几个方法个其实是一样)
后端脚本b.php
php
$arr=array('title'=>'1','content'=>'内容');
echo json_encode($arr);
前端脚本a.html
DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Atitle>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">script>
<script type="text/javascript" charset="utf-8">
$(function(){
//设置全局变量
var a=true;
$('a').click(function(){
if(a==true){//判断是否为真,为真就继续执行
a=false;//点击后,设置为假
$.getJSON('b.php',function(d){
$("#name").append(d.title+"
");
//过500毫秒设置为真
setTimeout(function(){
a=true;
},500);
});
}
});
})
script>
head>
<body>
<a href="b.php" onclick="return false;">examplea>
<br>
<br>
<br>
<br>
<br>
<div id="name" style="width:100px;height:50px;border:1px solid gray;">div>
body>
html>
通过禁用按钮来控制提交频率
<input type="button" id="bt" value="提交"> <div id="name" style="width:200px;height:500px;border:1px solid gray;">div> <script type="text/javascript" charset="utf-8"> $('#bt').click(function(){ //点击后就设置按钮为禁止状态 $('#bt').attr('disabled','disabled'); $('#bt').val('提交中...'); $.getJSON('b.php',function(d){ $('#name').append(d.content); //设置500毫秒,将按钮恢复 setTimeout(function(){ $('#bt').removeAttr('disabled'); },500); }); }); script> 通过隐藏域值来控制提交频率 <input type="hidden" id='hid' value=1 /> <a href="javascript:void(0);">点击a> <div id="name" style="width:200px;height:500px;border:1px solid gray;">div> <script type="text/javascript" charset="utf-8"> $('a').click(function(){ if($('#hid').val()==1){ $('#hid').val(0); $.getJSON('b.php',function(d){ $('#name').append(d.content); //设置500毫秒,将将隐藏域值改为1 setTimeout(function(){ $('#hid').val(1); },1000); }); } }); script>
网上看了JQuery的abort()方法,虽然取消中断了,但还是会去访问服务器,
还有就是把Ajax异步改成同步$.ajaxSettings.async = false;
后端方面考虑过cookie,session,MySQL,比较两次时间差,来控制请求频率,但没弄出来,网上看了,大多是在Apache/Nginx等Web服务器修改配置文件即可
HTML5有本地存贮功能,主流浏览器都支持,可以将服务器返回的数据,存在本地,下去请求直接在本地找,和后台Memcache,操作一样
DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Localtitle>
head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">script>
<body>
<p><input type="button" name="some_name" id="bt" value="点击">p>
<div id="name" style="width:200px;height:320px;border:1px solid gray">div>
<script type="text/javascript" charset="utf-8">
$('#bt').click(function(){
var local=window.localStorage;//初始化本地存储
var key='t9';//设置键
var url='data.php';//请求数据地址
var val=local.getItem(key);//得到数据
if (!val) {
$.ajaxSettings.async = false;//必须Ajax设置同步,因为异步回调函数返回值无法return
$.get(url,function(d){
val=d;
local.setItem(key,val);
});
}
j=eval("("+val+")");//解析json字串
$("#name").append(j.title+"|"+j.content+"
");
});
script>
body>
html>
data.php
php
echo json_encode(array('title'=>'标题','content'=>'内容'));
打开Chrome,F12查看
一:页面初始状态
二:第一次点击,页面请求了data.php
三:本地存贮
四:已经不请求data.php了
Ajax跨域,能不能跨域还得看服务器是否把数据返回在回调函数内
server.php
php $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); $result=json_encode($arr); //动态执行回调函数 $callback=$_GET['call']; //将结果放在?( )返回 echo $callback."($result)";
f.html
xxx
example
|
评论加载中...
|
Copyright@ 2011-2017 版权所有：大连仟亿科技有限公司 辽ICP备11013762-1号 google网站地图 百度网站地图 网站地图
公司地址：大连市沙河口区中山路692号辰熙星海国际2215 客服电话：0411-39943997 QQ：2088827823 42286563
法律声明：未经许可，任何模仿本站模板、转载本站内容等行为者，本站保留追究其法律责任的权利！ 隐私权政策声明
