Practical Training Ajax-原生
作者：互联网
本篇内容为：原生Ajax的含义、解析、课上代码和创建的Ajax、以及效果图.
首先是对Ajax进行的解析：
(1) 含义
ajax 的全称：Asynchronous Javascript And XML。异步传输+js+xml。所谓异步，在这里
简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等
到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户
体验。
(2) 创建步骤
1) 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
2) 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
3) 设置响应 HTTP 请求状态变化的函数
4) 发送 HTTP 请求
5) 获取异步调用返回的数据
6) 使用 JavaScript 和 DOM 实现局部刷新
课堂原生Ajax.html代码：（整页代码内容）
<!-- 整理代码:shift+alt+f -->
<script>
window.onload = function () {
// 1)创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
var request = new XMLHttpRequest();
// 2) 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
request.open("get", "./00 data.json");
// 3) 设置响应 HTTP 请求状态变化的函数
request.onreadystatechange = function (res) {
// 第五步和第六步都在函数里
// 5) 获取异步调用返回的数据
// console.log(res);
// request.status
if (request.status === 200 && request.readyState === 4) {
// console.log(request.responseText);
// console.log(request.responseXML);
// parse 对语法进行解析 responseText 回复信息
var data = JSON.parse(request.responseText);
// console.log(data);
// 6) 使用 JavaScript 和 DOM 实现局部刷新
if (data.status===200) {
var cls = data.data;
document.querySelector("h1").innerText = cls.name;
}else{
console.log(data.msg);
}
}
}
// 4) 发送 HTTP 请求
request.send();
}
</script>
</head>
<body>
<h1></h1>
</body>
onreadystatechange什么意思？
onreadyStateChange事件是在readyState属性发生改变时触发的，readyState的值表示了当前请求的状态，在事件处理程序中可以根据这个值来进行不同的处理。
readyState有五种可取值0：尚未初始化，1：正在加载，2：加载完毕，3：正在处理；4：处理完毕。
request.readyState === 4 是代表的这个事件的第4步
00 data.json:（json内容可以理解为文本。）：
Ajax-json：
// 这个是错误为0
// "error":0,
// 先判断状态 在返回数据
"status":200,状态码
"status":200,
"data":{
},
"msg":"错误信息"
效果为：
标签：异步,Training,HTTP,请求,request,Practical,Ajax,data 来源： https://www.cnblogs.com/zky1012/p/15587978.html