1 Ajax概念
- ajax是异步的JavaScript与XML,HTML,JSON技术的集合，是用来做局部刷新的一种技术。
2 同步与异步区别
- 同步：不同的事情按照先后顺序执行,后一件事情必须等前一件事件执行完才执行,否则处于等待状态。
- 异步：不同的事件同时执行,没有先后顺序。
3 运行顺序
- 创建异步对象时：new XMLHttpRequest();
- 初始异步请求对象：xmlHttp.open()；
- 发送请求：xm1Http.send()；
- 从服务器端获取了数据，此时3，注意3是异步对象内部使用，获取了原始的数据；
- 异步对象把接收的数据处理完成后。此时开发人员在4的时候处理数据.（更新当前页面）
4 运行代码例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//https://api.apiopen.top/getJoke?page=${index}&count=10&type=video
var index;
function AJAX(index=1){
var req=new XMLHttpRequest();
req.open("GET",`https://api.apiopen.top/getJoke?page=${index}&count=10&type=video`,true);
req.onreadystatechange=function(e){
if (req.status==200&&req.readyState==4) {
let temp = JSON.parse(req.response);
for(let i of temp.result){
for(let j in i){
if ( j=="video") {
console.log(i[j]);
var video=document.createElement("video");
video.src=i[j];
video.controls=true;
video.width=300;
var p =document.createElement("p");
p.appendChild(video);
document.body.appendChild(p)
}
}
}
}
}
req.send();
}
AJAX(index)
</script>
</body>
</html>