zepto的ajax方式和jq一样
node.js服务器设置:
/**
* Created by 10853 on 2020/2/1.
*/
//引入模块
var express=require('express');
//创建服务器
var app=express();
//开启服务器并监听端口
app.listen(3000,function(){
console.log('this express server is running at http://127.0.0.1:3000 ');
})
app.get('/',function(req,res){
var arr=[1,2,3,4,5];
//跨域设置
res.set('Access-Control-Allow-Origin','*');
setTimeout(function(){
res.send(arr);
},3000);
})
app.post('/register',function(req,res){
var list=req.body.name;
console.log(list);
})
页面设置:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>ajax容易忽视的重点</title>
<style type="text/css">
#btn{
width: 200px;
height: 200px;
background: red;
border-radius: 20px;
text-align: center;
line-height: 200px;
font-size: 30px;
}
</style>
</head>
<body>
<!--
* 如何废除一个ajax请求 ----abort()方法
需求：点击获取验证码的按钮，用户十秒时候可以再次获取，当十秒过后第一次请求没有返回，用户再次点击获取
然后因为网速好或者其他原因，两次请求同时返回，该怎么解决
* disabled属性 设置表单项或者按钮不可再点击或者操作；但是只是针对click事件，而并没有针对touch事件作出处理。
-->
<button id="btn">按钮</button>
<script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//标识用户是否可以点击,当颜色变回来才可以点击
var isSend=false;
var xhr=null;
$('#btn').on('touchstart',function(){
if(isSend)
{
return;
}
isSend=true;
$('#btn').css('background-color','gray');
setTimeout(function(){
$('#btn').css('background-color','red');
isSend=false;
},2000);
//判断用户是否发送请求
if(!xhr) {
xhr = sendXml();
}else{
//如果每次点击代表发送一次请求,每次点击取消上一次的ajx请求
//取消上一次的ajax请求
xhr.abort();
xhr=sendXml();
}
});
function sendXml()
{
var xhr= $.ajax({
...
});
return xhr;
}
})
</script>
</body>
</html>
