一、Ajax的基本用法
先写一个基本的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-juqery</title></script>
</head>
<body>
<div id="app">
I am div
</div>
<button id="btn">获取数据</button>
<script>
// 稍后在写写AJAX
</script>
</body>
</html>
Ajax就四个步骤
1. 创建 XMLHttpRequest 对象
2. 使用 open("GET","数据地址")方法
3. 使用 send() 方法 是GET就发送空的数据
4. 对readstate、status状态进行判断进行操作数据
JS部分
<script>
let app = document.getElementById('app');
let btn = document.getElementById('btn');
btn.onclick = function () {
const ajax = new XMLHttpRequest();
ajax.open("Get", 'static/db.json', true);
ajax.send(); // 因为是get请求所以不需要发送任何数据
/**
* readystate是ajax对象的属性
* 0 表示未初始化
* 1 表示 open 调用完成
* 2 表示 send 调用完成
* 3 表示 服务端返回部分数据 一般在这判断就可以了
* 4 表示 返回了完全的数据
*/
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status >= 200 && ajax.status < 300) {
console.log(ajax.response);
}
}
}
}
</script>
二、记得用LiveServer插件启动，这样可以避免跨域的问题，（至于跨域你可以学深了再去了解）
三、结尾所有的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax</title>
</head>
<body>
<div id="app">
I am div
</div>
<button id="btn">获取数据</button>
<script>
let app = document.getElementById('app');
let btn = document.getElementById('btn');
btn.onclick = function () {
const ajax = new XMLHttpRequest();
ajax.open("Get", 'static/db.json', true);
ajax.send();
/**
* readystate是ajax对象的属性
* 0 表示未初始化
* 1 表示 open 调用完成
* 2 表示 send 调用完成
* 3 表示 服务端返回部分数据 一般在这判断就可以了
* 4 表示 返回了完全的数据
*/
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status >= 200 && ajax.status < 300) {
console.log(ajax.response);
}
}
}
}
</script>
</body>
</html>
完整代码
标签：status,web,ajax,send,Ajax,btn,open From： https://www.cnblogs.com/DnmyCourage/p/17036775.html