Ajax,防止重复请求,跨域,本地存贮

wyqj

浏览: 83362 次

最近访客更多访客>>

贫僧稽首了

likunran521

wxn_yxm

yangyi336

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS/JQ

资料收集

原帖地址：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>