Ajax及封装Ajax详解参考传送门：https://blog.csdn.net/c__dreamer/article/details/80456565
ajax是什么
-Asynchronous JavaScript & XML
-web开发的一种技术
-异步发送 & 请求数据
-不需要重新刷新页面
-目前JSON数据格式已经占据市场
XmlHttpRequest对象
-对象类型的API
-在浏览器环境下使用
-用于客户端和服务端数据的传递和接收
-用于请求XML数据（JOSN，纯文本text）
其他类似技术/库
-jQuery
-Axios
-Superagent
-Fetch API
-Prototype
-Node HTTP
集成环境XAMPP安装
HTTP请求
HTTP请求有两种方式
GET：用于获取数据，GET是在URL上传递数据（网址后面的东西），存储量较少，安全系数比较低。
POST：用于上传数据，POST安全性一般比（GET好一些），容量几乎是无限（多用于表单）。
Ajax使用
四个步骤：
-创建Ajax
-连接服务器
-发送请求
-接收返回值
请求纯文本数据
<body>
<button id="button">请求纯文本</button>
<br>
<div id="text"></div>
<script>
document.getElementById("button").addEventListener('click',loadText);
function loadText(){
//1、创建xmlhttprequest对象
var xhr = new XMLHttpRequest();
//2、.open(type,url/file,async)
xhr.open('GET','sample.txt',true);
//3、两种请求方式onload/onreadystatechange
// xhr.onload = function(){
// console.log(this.responseText);
// }
xhr.onreadystatechange = function(){
if(this.status == 200 && this.readyState == 4){
document.getElementById('text').innerHTML = this.responseText;
}else if(this.status == 404){
console.log("请求的页面不存在");
}
}
//4、发送请求
xhr.send();
}
</script>
</body>
请求json数据
1、创建user.json和users.json文件
2、创建ajax2.html文件
{
"id":1,
"name":"袁",
"email":"123@163.com"
}
{
"id":1,
"name":"袁",
"email":"123@163.com"
}
<body>
<button id="button1">请求单个用户</button>
<button id="button2">请求多个用户</button>
<br><br>
<h1>单个用户</h1>
<div id="user"></div>
<h1>所有用户</h1>
<div id="users"></div>
<script>
document.getElementById('button1').addEventListener('click',loaduser);
document.getElementById('button2').addEventListener('click',loadusers);
function loaduser(){
var xhr = new XMLHttpRequest();
xhr.open('GET',"user.json",true);
xhr.onreadystatechange = function (){
if(this.status == 200){
var user = JSON.parse(this.responseText);
// console.log(user.name);
var output = '';
output += `
<ul>
<li>id:${user.id}</li>
<li>name:${user.name}</li>
<li>email:${user.email}</li>
</ul>
`;
document.getElementById('user').innerHTML = output;
}else if(this.status == 404){
console.log("请求的页面不存在");
}
}
xhr.send();
}
function loadusers(){
var xhr = new XMLHttpRequest();
xhr.open('GET',"users.json",true);
xhr.onreadystatechange = function (){
if(this.status == 200){
var users = JSON.parse(this.responseText);
var output = '';
//遍历数组
for(var i in users){
output += `
<ul>
<li>id:${users[i].id}</li>
<li>name:${users[i].name}</li>
<li>email:${users[i].email}</li>
</ul>
`;
}
document.getElementById('users').innerHTML = output;
}else if(this.status == 404){
console.log("请求的页面不存在");
}
}
xhr.send();
}
</script>
</body>
请求Github用户api
类似于上面请求所有用户的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>请求Github接口</title>
<style>
.user{
display: flex;
background: #f4f4f4;
padding:10px;
margin-bottom: 10px;
}
.user ul{
list-style: none;
}
</style>
</head>
<body>
<button id="button">请求Github接口</button>
<br><br>
<h1>所有的Github用户信息</h1>
<div id="users"></div>
<script>
document.getElementById('button').addEventListener('click',loaders);
function loaders(){
var xhr = new XMLHttpRequest();
xhr.open('GET','https://api.github.com/users',true);
xhr.onreadystatechange = function (){
if(this.status == 200){
var users = JSON.parse(this.responseText);
var output = '';
for(var i in users){
output += `
<div class = "user">
<img src = "${users[i].avatar_url}" width="70" height="70" />
<ul>
<li>id:${users[i].id}</li>
<li>login:${users[i].login}</li>
</ul>
</div>
`;
}
document.getElementById('users').innerHTML = output;
}else if(this.status == 404){
console.log("请求的页面不存在");
}
}
xhr.send();
}
</script>
</body>
</html>
网友评论