一个正在自学路上的的小菜鸟,今天看了一些资料然后写了demo,然后分享一下。
*readystate状态码
* 0:请求未初始化
* 1:服务器连接已建立
* 2:请求已接收
* 3:请求处理中
* 4:请求已完成
*
* http状态码
* 200---服务器成功返回网页
* 404---请求的网页不存在
* 503---服务器暂时不可用
先要了解以上的内容,可以使用console.log()在控制台查看。使用以下代码时候在项目文件内新建一个simple.txt文本文件,里面内容可以自己编辑。
*请求方式:onload
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
<button id="btn">请求文本</button>
<p id="text"></p>
<script>
document.getElementById('btn').addEventListener("click",loadText);
function loadText(){
//创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
xhr.open('GET','simple.txt',true);
//console.log("READYSTATE:",xhr.readyState);//请求状态码1 服务器连接已建立1
//onprogress
//xhr.οnprοgress=function(){
// console.log("测试READYSTATE:",xhr.readyState);
//} 测试状态码3 请求处理中
//两种方式请求 onload /onreadystattechange
xhr.οnlοad=function(){
// console.log("READYSTATE:",xhr.readyState);
//console.log(this.responseText);控制台显示文本信息
document.getElementById('text').innerHTML=this.responseText;
}
xhr.send();//发送请求
}
</script>
</body>
</html>
请求方式:onreadystattechange
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
<button id="btn">请求文本</button>
<script>
document.getElementById('btn').addEventListener("click",loadText);//点击事件
function loadText(){
//创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
xhr.open('GET','simple.txt',true);
//console.log("READYSTATE:",xhr.readyState);//1:服务器连接已建立
//两种方式请求 onload /onreadystattechange
xhr.onreadystatechange=function(){
//console.log("READYSTATE:",xhr.readyState);
if(this.status==200&&this.readyState==4){
console.log(this.responseText);
}else if(this.status==404){
console.log("请求的网页不存在");
}
}
xhr.send();//发送请求
}
</script>
</body>
</html>
...............................................................................................................................
ajax获取json数据,自己在本地项目文件中新建user.json users.json,先理解上面的demo这个例子还是很好理解的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1">请求单个用户</button>
<button id="btn2">请求多个用户</button>
<h1>单个用户</h1>
<div id="user"></div>
<h1>所有用户</h1>
<div id="users"></div>
<script>
document.getElementById('btn1').addEventListener('click',loadUser);
document.getElementById('btn2').addEventListener('click',loadUsers);
function loadUser(){
var xhr=new XMLHttpRequest();
xhr.open("GET","user.json",true);
xhr.οnlοad=function(){
if(this.status==200){
var user =JSON.parse(this.responseText);
var output='';
output +=`
<ul>
<li>${user.id}</li>
<li>${user.name}</li>
<li>${user.email}</li>
</ul>
`;
document.getElementById('user').innerHTML=output;
}
}
xhr.send();
}
function loadUsers(){
var xhr=new XMLHttpRequest();
xhr.open("GET","users.json",true);
xhr.οnlοad=function(){
if(this.status==200){
var users =JSON.parse(this.responseText);
var output='';
//遍历数组
for(var i in users){
output +=`
<ul>
<li>${users[i].id}</li>
<li>${users[i].name}</li>
<li>${users[i].email}</li>
</ul>
`;//注意``这个不是单引号,这里写法我没有采用拼接写法,感兴趣可以自己百度
document.getElementById('users').innerHTML=output;
}
}
}
xhr.send();
}
</script>
</body>
</html>
以前稍微有点懒了,其实还是比较好理解的,在学习的过程中多写多思考,把前端的知识融会贯通。