大家好,又见面了,我是你们的朋友全栈君。
什么是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复制
html {
font-family: Arial, Helvetica, sans-serif;
padding: 10px 20px;
}
Ajax是什么?
Asynchronous JavaScript & XML。Ajax是web开发的一种技术。
Ajax请求的步骤
(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象;
(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方式、`URL`及验证信息;
(3)设置响应`HTTP`请求状态变化的函数;
(4)发送`HTTP`请求;
(5)获取异步调用返回的数据;
(6)使用JavaScript和DOM实现局部刷新。
XMLHttpRequest对象
(1)对象类型的API;
(2)在浏览器环境使用;
(3)用于客户端和服务端数据的传递和接收;
(4)用于请求XML数据(JSON/TEXT)。
readyState状态码
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
http状态码(status)
200:(成功)
403:(禁止)服务器拒绝请求
404:(未找到)服务器找不到请求的页面
408:(请求超时)服务器等候请求发生超时
500:(服务器内部错误)服务器遇到错误,无法完成请求
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();
}
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/145404.html原文链接:https://javaforall.cn