【Ajax】创建并封装

创建

<!DOCTYPE html>
<html>
<head><title></title><style>#button1{background:skyblue;border-radius:20px;width:100px;}</style>
</head>
<body>
<button id="button1">按钮</button>
<input id="input1">
</body>
<script type="text/javascript">
document.getElementById("button1").onclick=function(){/*1、创建对象2、设置请求方式和请求地址3、发送请求4、监听请求的变化5、处理返回的结果
*/var xhr=new XMLHttpRequest();xhr.open("GET","xxx.txt",true);//true代表的是否发布异步请求xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState==4){alert(xhr.responseText);document.getElementById('input1').value=xhr.responseText;}}
};</script>
</html>

xxx.text中填入

 Hello World

点击则会有相应文本生成
在这里插入图片描述

封装

function ajax(url, success, error){/*1、创建对象2、设置请求方式和请求地址3、发送请求4、监听请求的变化5、处理返回的结果
*/var xhr=new XMLHttpRequest();xhr.open("GET",url,true);//true代表的是否发布异步请求xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status >=200&& xhr.status<300||xhr.status==304){//5、处理返回的结果//console.log("accept success");success(xhr);}else{//console.log("accept false");error(xhr);}			}	}
}