1，调用纯文本文档
先创建一个点txt文件（名字随意），里面随便写点字就行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax_txt</title>
</head>
<body>
<button id="btn">Ajax</button>
<script>
document.getElementById("btn").addEventListener("click",name,false);
function name(){
var xhr = new XMLHttpRequest();
// console.log(xhr)
xhr.open("GET","name.txt",true);
console.log("readyState:"+xhr.readyState);
xhr.send();
// xhr.onload = function(){
// console.log(this.responseText)
// }
xhr.onprogress = function(){
console.log("readyState:"+xhr.readyState);
}
xhr.onreadystatechange = function(){
console.log("readyState:"+xhr.readyState);
console.log(this.responseText);
}
}
//readyState状态码
//0：请求未初始化
//1：服务器已建立连接
//2：请求已接收
//3：请求处理中
//4：请求已完成，且响应已就绪
//http状态码（status）详情百度
</script>
</body>
</html>2.调用单个，多个json文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax_json</title>
</head>
<body>
<button id="btn1">请求单个用户</button>
<button id="btn2">请求多个用户</button>
<br/><br/>
<h1>单个用户</h1>
<div id="user"></div>
<h1>多个用户</h1>
<div id="users"></div>
<script>
document.getElementById("btn1").addEventListener("click",loadUser,false);
document.getElementById("btn2").addEventListener("click",loadUsers,false);
function loadUser(){
var xhr = new XMLHttpRequest();
xhr.open("GET","user.json",true);
xhr.send();
xhr.onload = function(){
if(this.status == 200){
var user = JSON.parse(this.responseText)//string-->object
//json.stringify() object-->string
var output = "";
console.log(user);
output += "id: "+user.id+"\nname: "+user.name+"\nemail: "+user.email;
document.getElementById("user").innerText = output;
}
}
}
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open("GET","users.json",true);
xhr.send();
xhr.onload = function(){
if(this.status == 200){
var users = JSON.parse(this.responseText)//string-->object
//JSON.stringify() object-->string
var output = "";
console.log(users);
for (var i in users) {
for (var j in users[i]) {
output += "id: "+users[i][j].id+"\nname: "+users[i][j].name+"\nemail: "+users[i][j].email+"\n\n"
}
}
document.getElementById("users").innerText = output;
}
}
}
</script>
</body>
</html>3.调用真实的GITHUB接口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>请求Github接口</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#users{
width: 1050px;
margin: 0 auto;
}
.imgBox{
width: 200px;
height: 280px;
display: inline-block;
border: 1px solid gray;
box-sizing: border-box;
padding: 5px;
margin: 5px;
}
.imgBox img{
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<button id="btn">请求Github接口</button>
<br /><br />
<h1>所有Github的用户信息</h1>
<div id="users"></div>
<script>
document.getElementById("btn").addEventListener("click",loadUsers,false)
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open("GET","https://api.github.com/users",true);
xhr.send();
xhr.onload = function(){
if(this.status == 200){
var users = JSON.parse(this.responseText)//string-->object
//json.stringify() object-->string
var output = "";
console.log(users);
for (var i in users) {
output += '<div class="imgBox"><img src="'+users[i].avatar_url+'"/><br/><span>id: '+users[i].id+'<br/>login: '+users[i].login+'</span></div>'
}
document.getElementById("users").innerHTML = output;
}
}
}
</script>
</body>
</html>
4.调用php文件（需要搭建php环境，推荐XAMPP）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php_json</title>
</head>
<body>
<button id="btn">请求php接口</button>
<br /><br />
<h1>GET常规表单提交</h1>
<form action="api.php" method="get">
<input type="text" name="name" />
<input type="submit" value="提交" />
</form>
<h1>GET---ajax表单提交</h1>
<form id="formName">
<input type="text" name="name" />
<input type="submit" value="提交" />
</form>
<h1>POST常规表单提交</h1>
<form action="api.php" method="post">
<input type="text" name="name" />
<input type="submit" value="提交" />
</form>
<h1>POST---ajax表单提交</h1>
<form id="formName2">
<input type="text" name="name" />
<input type="submit" value="提交" />
</form>
<div id="user"></div>
<script>
document.getElementById("btn").addEventListener("click",loadUser,false);
document.getElementById("formName").addEventListener("submit",loadUser2,false);
document.getElementById("formName2").addEventListener("submit",loadUser3,false);
function loadUser(){
var xhr = new XMLHttpRequest();
xhr.open("GET","api.php",true);
xhr.send();
xhr.onload = function(){
if(this.status == 200){
var user = this.responseText//string-->object
//json.stringify() object-->string
console.log(user);
document.getElementById("user").innerText = user;
}
}
}
//get
function loadUser2(event){
event.preventDefault();
var name = document.getElementsByName("name")[1].value;
var xhr = new XMLHttpRequest();
xhr.open("GET","api.php?name="+name,true);
xhr.send();
xhr.onload = function(){
if(this.status == 200){
var user = this.responseText//string-->object
//json.stringify() object-->string
console.log(user);
document.getElementById("user").innerText = user;
}
}
}
//post
function loadUser3(event){
event.preventDefault();
var name = document.getElementsByName("name")[3].value;
var postname = "name="+name;
var xhr = new XMLHttpRequest();
xhr.open("POST","api.php",true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send(postname);
xhr.onload = function(){
if(this.status == 200){
var user = this.responseText//string-->object
//json.stringify() object-->string
console.log(user);
document.getElementById("user").innerText = user;
}
}
}
</script>
</body>
</html>