大家好，又见面了，我是你们的朋友全栈君。
什么是Ajax以及ajax请求的步骤
1.Ajax是什么?
Asynchronous JavaScript & XML。Ajax是web开发的一种技术。
2.Ajax请求的步骤
(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象；
(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方式、`URL`及验证信息；
(3)设置响应`HTTP`请求状态变化的函数；
(4)发送`HTTP`请求；
(5)获取异步调用返回的数据；
(6)使用JavaScript和DOM实现局部刷新。
3.XMLHttpRequest对象
(1)对象类型的API;
(2)在浏览器环境使用;
(3)用于客户端和服务端数据的传递和接收;
(4)用于请求XML数据（JSON/TEXT）。
4.readyState状态码
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
5.http状态码（status）
200：（成功）
403：（禁止）服务器拒绝请求
404：（未找到）服务器找不到请求的页面
408：（请求超时）服务器等候请求发生超时
500：（服务器内部错误）服务器遇到错误，无法完成请求
6.onload和onreadystatechange
当onload执行时readyState只可能为4
代码语言：javascript复制<!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>ajax</title>
</head>
<style>
html {
font-family: Arial, Helvetica, sans-serif;
padding: 10px 20px;
}
</style>
<body>
<h3>Ajax是什么?</h3>
<p>Asynchronous JavaScript & XML。Ajax是web开发的一种技术。</p>
<h3>Ajax请求的步骤</h3>
<p>
(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象；
<br /> (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方式、`URL`及验证信息；
<br /> (3)设置响应`HTTP`请求状态变化的函数；
<br /> (4)发送`HTTP`请求；
<br /> (5)获取异步调用返回的数据；
<br /> (6)使用JavaScript和DOM实现局部刷新。
</p>
<h3>XMLHttpRequest对象</h3>
<p>
(1)对象类型的API;
<br />(2)在浏览器环境使用;
<br />(3)用于客户端和服务端数据的传递和接收;
<br />(4)用于请求XML数据（JSON/TEXT）。
</p>
<h3>readyState状态码</h3>
<p>
0：请求未初始化
<br /> 1：服务器连接已建立
<br /> 2：请求已接收
<br /> 3：请求处理中
<br /> 4：请求已完成，且响应已就绪
</p>
<h3>http状态码（status）</h3>
<p>
200：（成功）
<br /> 403：（禁止）服务器拒绝请求
<br /> 404：（未找到）服务器找不到请求的页面
<br /> 408：（请求超时）服务器等候请求发生超时
<br /> 500：（服务器内部错误）服务器遇到错误，无法完成请求
</p>
<button>ajax请求</button>
<h2></h2>
<script>
document.querySelector("button").addEventListener("click", getAjax);
function getAjax() {
//1.创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//open(type,url,async)
xhr.open("GET", "http://jsonplaceholder.typicode.com/posts/1", true);
console.log(xhr.readyState); //1
//进程
xhr.onprogress = function() {
console.log(xhr.readyState); //3
}
//两种请求方式onload/onreadystatechange
//onload
// xhr.onload = function() {
// console.log(xhr.readyState); //4
// document.querySelector("h2").innerHTML = JSON.parse(this.responseText).body;
// };
//onreadystatechange
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
console.log(xhr.status);
if (xhr.readyState == 4 && xhr.status == 200) {//修改dom
document.querySelector("h2").innerHTML = JSON.parse(this.responseText).title;
} else if (xhr.status = 404) {
document.querySelector("h2").innerHTML = xhr.statusText;
}
};
//发送请求
xhr.send();
}
</script>
</body>
</html>发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145404.html原文链接：https://javaforall.cn
