Ajax使用
1.实例化一个XMLHttpRequest对象
2.设置open()参数
3.设置状态改变函数响应 onload() or onreadystatechange()
4.发送请求 send()
下面是一个典型的get请求
<button id="button"> 请求纯文本</button>
<script>
document.getElementById('button').addEventListener('click',loadtext);
function loadtext(){
//创建XMLHttpRequset对象
var xhr = new XMLHttpRequest();
xhr.open('GET','sample.txt',true);
console.log(xhr.readyState);
//两种方式设置响应操作 onload / onreadystatechange
// onload只有在状态值为4才执行
//onreadystatechange在状态码改变的时候就触发
xhr.onreadystatechange = function(){
console.log(this.status+" or "+this.readyState);
if(this.status=200 && this.readyState ==4)
console.log(this.responseText);
}
//发送请求
xhr.send();
}
</script>
请求多个JSON
<!DOCTYPE html>
<html>
<head>
<title>请求JSON数据</title>
</head>
<body>
<button id="button1">请求单个JSON数据</button>
<button id="button2">请求多个JSON数据</button>
<br><br>
<h1>单个用户</h1>
<div id="user"></div>
<h1>所有用户</h1>
<div id="users"></div>
<script>
document.getElementById("button1").addEventListener('click',getuser);
document.getElementById("button2").addEventListener('click',getusers);
function getuser(){
var xhr = new XMLHttpRequest();
xhr.open('GET','user.json',true);
xhr.onload= 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 getusers(){
var xhr = new XMLHttpRequest();
xhr.open('GET','users.json',true);
xhr.onload=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>
AJAX替代表单提交 包括POST请求例子
<!DOCTYPE html>
<html>
<head>
<title>AJAX提交</title>
</head>
<body>
<button id="button">提交ajax</button>
<form id="getform">
<input type="text" id="formtext">
<input type="submit" name="提交">
</form>
<script>
document.getElementById('button').addEventListener('click',getname);
document.getElementById('getform').addEventListener('submit',postname);
function getname(){
var xhr = new XMLHttpRequest();
xhr.open('GET','http://localhost/Interface/index/name/yaomianfa',true);
xhr.onload=function(){
if(this.status==200){
console.log(this.responseText);
}
}
xhr.send();
}
function postname(a){
a.preventDefault();
var name=document.getElementById('formtext').value;
var parma='name='+name;
var xhr = new XMLHttpRequest();
xhr.open('POST','http://localhost/Interface/index',true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.onload=function(){
if(this.status==200){
console.log(this.responseText);
}
}
xhr.send(parma);
}
</script>
</body>
</html>