只能写在open()和send()之间
<script>
window.onload = function(e){
var oBtn = document.querySelector("button");
oBtn.onclick = function(ev1){
// 1.创建一个异步对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
xmlhttp.open("POST","ajax-post.php",true);
// 注意点
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 3.发送请求
xmlhttp.send("userName=123&userPwd=aaa");
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
// 判断是否响应就绪
if(xmlhttp.readyState === 4){
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
// 5.处理返回的结果
console.log("接收到服务器返回的数据");
alert(xmlhttp.responseText);
} else{
// 5.处理返回的结果
console.log("没有接收到服务器返回的数据");
}
}
}
}
}
</script>
封装
function objToStr(obj){
obj.t = new Date().getTime();
var res = [];
for(var key in obj){
// 在url中是不可以出现中文的,如果出现了中文需要转码
// url中只能出现数字/字母/下划线/ASCLL码
res.push(encodeURIComponent(key) + "=" +encodeURIComponent(obj[key]));
}
return res.join("&");
}
function ajax(option) {
// 0. 将对象转换成字符串
var str = objToStr(option.obj);
// 1.创建一个异步对象
var xmlhttp,timer;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if(option.type.toLowerCase() === 'get'){
// 2.设置请求方式和请求地址
xmlhttp.open(option.type,option.url+"?"+str, true);
// 3.发送请求
xmlhttp.send();
} else{
xmlhttp.open(option.type,option.url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(str);
}
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
// 判断是否响应就绪
if (xmlhttp.readyState === 4) {
// 判断是否请求成功
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
// 5.处理返回的结果
option.success(xmlhttp);
} else {
// 5.处理返回的结果
option.error(xmlhttp);
}
}
}
// 判读外界是否传入了超时时间
if(option.timeout){
timer = setInterval(function(){
// console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}
<script>
window.onload = function(e){
var oBtn = document.querySelector("button");
oBtn.onclick = function(ev1){
ajax("POST","ajax-post.php",{
"userName":"123",
"userPwd":"abc"
},3000,function(xhr){
alert(xhr.responseText);
},function(xhr){
alert("请求失败");
});
}
}
</script>