Ajax——get方法

72 阅读 0 评论 48 点赞

我是靠谱客的博主美好摩托，最近开发中收集的这篇文章主要介绍Ajax——get方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Ajax适用于页面与服务器相互传递数据，并且可以在页面不重新加载的情况下与服务器交换数据
Ajax的实现需要以下5个步骤：
1. 创建异步对象；
2. 设置请求的方式和请求地址；
3. 发送请求；
4. 监听状态的变化；
5. 处理返回结果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax-get</title>
</head>
<script>
window.onload = function (ev) {
var btn = document.querySelector("button");
btn.onclick = function (ev1) {
// 1.创建异步对象
var xmlhttp = new XMLHttpRequest()
// 2.设置请求方式和请求地址
/*
method: 请求的类型，GET或者POST
url: 文件在服务器上的位置
async: true(异步) 与 false(同步)
*/
xmlhttp.open("GET", "04-ajax-get.php", true)
// 3.发送请求
xmlhttp.send()
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
/*
readyState的值与相应含义：
0：请求未初始化
1：服务器连接已建立
2：请求以接收
3：请求处理中
4：请求已完成，且相应已建立
*/
if (xmlhttp.readyState === 4) {
// 判断请求是否成功
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
// 5.处理返回结果
console.log("服务器返回的结果")
} else {
console.log("服务器没有返回的结果")
}
}
}
};
};
</script>
<body>
<button>发送请求</button>
</body>
</html>