Ajax,防止重复请求,跨域,本地存贮
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>A</title> <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+"<br />"); //过500毫秒设置为真 setTimeout(function(){ a=true; },500); }); } }); }) </script> </head> <body> <a href="b.php" onclick="return false;">example</a> <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>Local</title> </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+"<br>"); }); </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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>xxx</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$.getJSON("server.php?call=?",
function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,
}
});
});
});
</script>
</head>
<body>
<a href="javascript:void(0)">example</a>
</body>
</html>
