<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
document.querySelector('#btnAjax).onclick = function(){
//发送ajax需要五步
//创建异步对象
var ajaxObj=new XMLHttpRequest();
//设置请求的URL
//如果需要动态提交数据到服务器
//'get','01.php?username='+document.querySelector('input').value;
ajaxObj.open('get','01.php');
//发送请求
ajaxObj.send();
//注册事件
//onreadystatechange 状态改变就会调用
//如果要在数据完美请求回来的时候在调用我们需要手动写判断逻辑
ajaxObj.onreadystatechange=function(){
//为了保证数据完整,我们一般会判断两个值
if(ajaxObj.readyState==4&&ajaxObj.status==200){
//如果能进到这里面数据才是完整的
//在注册的事件中获取返回的内容并修改页面的显示
console.log('调用了');
//数据是保存在异步对象中
console.log(ajaxObj.responseText);
//修改页面的值
document.querySelector('h1').innerHTML=ajaxObj.responseText;
}
}
}
</script>
<body>
<hi>发送get请求的Ajax</hi>
<input type="button" value="发送get_ajax请求" id="btnAjax" />
</body>
</html>
本文只用于学习,不做其他用途