原生JS实现ajax异步获取数据
程序员文章站
2022-07-12 19:29:32
...
【简述】Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
什么叫异步呢?
简而言之,就是在在不用刷新整个网页的前提下局部更新
如,在某些网站中登陆是输入账号密码后直接显示登陆状态,用户并没有感觉到网页刷新了,但是确实完成了登陆验证.这就可以通过ajax技术
【实现思路】给登陆按钮添加监听,当点击登陆按钮后,获取用户输入的用户名和密码,通过ajax发送到服务器进行验证,在将验证结果返回前端,(比如返回用户信息的json字符串),在通过js加以控制,实现登陆功能
ajax五步骤
- 构建XMLHttpRequest对象
- 打开连接,传入url,method
- 发送数据(真正访问网络)
- 注册事件
- 在注册事件中获取返回的数据并做针对性处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajaxDemo</title>
</head>
<body>
<button id="btn">获取user信息</button>
<p id="content"></p>
</body>
<script>
document.getElementById("btn").onclick = function () {
//创建ajax对象
var ajaxObj = new XMLHttpRequest();
//打开连接
ajaxObj.open("GET", "user");
//发送数据,此处get请求,因此没有发送数据
ajaxObj.send();
//根据ajax状态码监听事件
ajaxObj.onreadystatechange = function () {
//表示后台处理成功,返回数据
if (ajaxObj.readyState==4 &&ajaxObj.status==200) {
document.getElementById("content").innerText=ajaxObj.responseText;
}
}
};
</script>
</html>
服务端;
@RestController
public class HelloController {
@RequestMapping("/user")
public List<User> hello(){
User user1 = new User("rambler","12300");
User user2 = new User("mary","22222");
List<User> list = new LinkedList<User>();
list.add(user1);
list.add(user2);
return list;
}
}
缺点:
- 它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的(静态页面)。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。(比如提交了表单以后,点击后退能回到提交之前的状态,而ajax却不能回退)
- 网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。如果长时间没有给用户反馈,用户体验比较差
下一篇： handler 异步通信