如何创建一个 Ajax
<script>
window.onload=function(){
1)创建一个异步调用对象
var request=new XMLHttpRequest();
2)创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
request.open("get","./00 data.json");
3) 设置响应 HTTP 请求状态变化的函数
request.onreadystatechange=function(){
if(request.status===200 && request.readyState===4){
console.log(request.responseText);
5) 获取异步调用返回的数据
var data=JSON.parse(request.responseText);
console.log(data);
6) 使用 JavaScript 和 DOM 实现局部刷新
if(data.status===200){
注：声明一个名字，在JSON中找到data里面的内容也就是data.data
var cls=data.data;
innerText：获取标签中的文本内容
querySelector：获取文档中h1的元素
document.querySelector("h1").innerText=cls.name;
}else{
console.log(data.msg);
}
}
}
4)发送 HTTP 请求
request.send();
}
</script>
HTML内容：
<h1></h1>
JSON内容：
{
"status": 200,
"data": {
"name": "web211001",
"student": [
{
"id": 1001,
"name": "小明"
},
{
"id": 1002,
"name": "小红"
},
{
"id": 1003,
"name": "小蓝"
}
]
},
"msg": "错误信息"
}
使用jQuery方式：在浏览器上显示table形式
<script src="/jq/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$.ajax({
type:"get",（请求方式）
url:"./00 data.json",（请求地址）
data:{},//请求参数 JSON格式
data:"1d=10001&name=xiaoming", application/x-www-form-urlencoded （表单格式）
contentType:"json", (请求格式 参数的格式)
dataType:"json",(服务器返回数据格式)
成功请求JSON中data数据
success:function(data){
打印
console.log(data);
if(data.status===200){
var cls=data.data;
$("legend").text(cls.name);
var students=cls.student;
for (let index = 0; index < students.length; index++) {
const stu = students[index];
stu声明出JSON中内容
$(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");
}
}else{
console.log(data.msg);
}
},
不成功 err返回的是错误信息
error:function(res,err){
console.log(err);
}或
error:function(res){
console.log(res);
}
})
第二种方式 jquery ajax请求
url [data] succes [datatype]
$.get("./00 data.json",function(data){
if(data.status===200){
var cls=data.data;
$("legend").text(cls.name);
var students=cls.student;
for (let index = 0; index < students.length; index++) {
const stu = students[index];
stu声明出JSON中内容
$(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");
}
}else{
console.log(data.msg);
}
}
)
})
</script>
HTML内容：
<legend></legend>
<table class="data">
<thead>
<th>ID</th>
<th>name</th>
</thead>
<tbody>
<!-- <tr></tr> -->
</tbody>
</table>
