<!-- 定时器
<script>
setTimeout(function() {
console.log("123");
}, 2000);
</script> -->
<!-- <script>
function timer1(){
console.log("123456") ;
}
setTimeout(timer1,3000);
// 页面可能有多个定时器,需要加标识符
// window可以省略
// 回调函数
// 需要等待时间 等时间到了才调用
</script>
<div class="ad" style="display: block ;width: 500px;height: 100px;background-color: antiquewhite;">
123456789
</div>
<button>点击停止定时器</button>
<script>
var ad =document.querySelector('.ad');
var timer2=setTimeout(function() {ad.style.display='none';
}, 5000);
// 停止定时器
var btn =document.querySelector('button');
btn.addEventListener('click',function(){
clearTimeout(timer2);
})
</script> -->
<!-- setInterval -->
<!-- setTimeout 时间到了只调用一次函数就停止
setInterval 每隔一定时间就调用一次-->
<!-- <button class="start"> 开始</button>
<button class="stop"> 停止</button>
<script>
var i = 1;
var timer3 = null;
var begin = document.querySelector('.start');
var stop = document.querySelector('.stop');
begin.addEventListener('click', function () {
timer3=setInterval(function () {
console.log(i);
i++;
}, 1000);
stop.addEventListener('click', function () {
clearInterval(timer3);
})
})
</script> -->
<!-- 练习
手机号码:<input type="number"> <button>发送</button>
<script>
var i = 5;
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
btn.disabled = true;
timer4 = setInterval(function () {
if (i == 0) {
clearInterval(timer4);
btn.disabled = false;
btn.innerHTML = "发送";
i = 5;
} else {
btn.innerHTML = "请等待" + i + "秒";
i--;
}
}, 1000);
}) -->
<!-- </script> -->
ajax
<!-- ajax可以实现不刷新更新数据,提高用户浏览网站的体验 -->
<!-- 1 xml
xml用来存储数据
没有预定义标签 自己定义
服务器现在返回的是json 曾经是用xml
优点 1可以无需刷新页面与服务器进行通信
2允许你根据用户事件更新部分页面内容
缺点 1 没有浏览历史
2 存在跨域问题
3搜索引擎优化不好
http 协议
请求报文
1 行 GET /url 、http/1.1
2 头 host : atguiu.com
cookie : neme=guigu
content-type: application/
3 空行
4 体 username=admin&
响应报文
行 http版本1.1 200(表示ok 404 表示找不到)
头 content-type: text/html;charset=utf-8
content-length: 2048
content-encoding: gzip
空行
体<html>
<head></head>
<body></body>
</html>