Ajax,防止重复请求,跨域,本地存贮
原帖地址：http://www.cnblogs.com/bgcolor/archive/2013/05/31/Ajax_localStorage_jsonp.html
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>