请求纯文本
请求存文本
请求json单个用户
请求json单个用户
请求json多个用户
请求json多个用户
//ajax请求存文本数据
var d=document.getElementById("button");//获取到按钮
d.addEventListener("click",afun);//添加点击事件
function afun(){//要执行的函数
//console.log("dd");
var xhr=new XMLHttpRequest();//获取方法
//console.log(xhr);
xhr.open("GET","xh.html",true);//ajax请求的类型,地址,是否异步
//共两种请求方式 onl oad和onreadystatechange
xhr.οnlοad=function(){//第一种请求方式onload,它的状态码只有1、4
console.log("第一种请求方式onload"+xhr.responseText);//打印xhr的返回的数据responseText获得字符串形式的响应数据。
}
xhr.onreadystatechange=function(){//第二种请求方式onreadystatechange,
if(this.status==200&&this.readyState==4){//这样会让它在4的状态下打印,默认状态3、4都会打印
console.log("第二种请求方式onreadystatechange"+xhr.responseText);//打印xhr的返回的数据responseText获得字符串形式的响应数据,默认它会直接打印两次。
}
document.getElementById("h1").innerHTML=this.responseText;//将文本添加到h1标签里面
}
xhr.send();//将请求发送到服务器上
}
//readyState状态码
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成,且响应已就绪
// 可以在xhr.readyState中查看
// HTTP状态码(status)
// 200: "OK"
// 404: 未找到页面
// 503:服务器暂时不可用
//ajax请求json格式的数据
//先在外部创建两个json格式的数据
//第一个是单个json数据user.json,如:{"id":12,"name":"zhb","email":"123@qq.com"}
//第二个是个数组users.json,如:[{"id":2,"mane":"zhb2"},{"id":3,"name":"zhb3"}]
document.getElementById("button2").addEventListener("click",json1);//获得button2这个按钮
function json1(){
var xhr2=new XMLHttpRequest();
xhr2.open("GET","user.json",true);
xhr2.onreadystatechange=function(){
if(this.status==200){
//console.log(this.responseText);//打印出来的是一个json,我们需要解析成对象
var user=JSON.parse(this.responseText);
console.log(user.name);
var output="";
output+=`
- ${user.id}
- ${user.name}
- ${user.email}
document.getElementById("h2").innerHTML=output;
}
}
xhr2.send();
}
//当需要用users数组里的json数据时
// var output2="";
// for(var i in users){
// output2+=`
//
//
${users[i].id}//
${users[i].name}//
${users[i].email}//
`;// }
//
// document.getElementById("h3").innerHTML=output2;
标签:异步,responseText,请求,json,xhr,ajax,user,var,加载
来源: https://blog.csdn.net/qq_41442781/article/details/89636144