Ajax
Ajax
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行
发送请求的方式/标签
方式一:浏览器输入地址,回车
方式二:在html中,使用script/link/img请求外部资源时,会自动发送请求
方式三:a标签,form表单标签,需要手动控制提交产生请求,往往需要在新的页面上获得响应信息
方式四:运行js代码产生请求
我们通过事件触发JS代码运行发送请求,响应后我们可以通过JS代码动态处理是否要跳转页面,还是将要响应的信息通过DOM编程显示在dom树中
Ajax的实现方式
原生JS的实现方式,代码繁琐,涉及到回调函数问题
使用第三方封装好的工具 jquery
使用框架 VUE axios
使用原生JS的实现方式
借助于XMLHttpRequest类实异步请求(xhr)
其对象有以下方法:
- readState 返回xhr的状态,其中4为正常响应
- status 返回xhr的响应状态码,其中200为正常响应
- responseText 返回后端响应体中的数据,可选择使用Dom编程直接显示或使用Bom编程跳转页面
- open 设置请求的发送方式和请求资源的路径和参数
- send 发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getMessage() {
//实例化一个xmlHttpRequest
var xhr = new XMLHttpRequest();
//设置XMLHttpRequest对象的回调函数
//xhr.readState 1 2 3 4
//xhr.status 响应状态码 响应行状态码
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//xhr.responseText 后端响应回来的响应体中的数据
//使用Dom编程在页面中显示信息
var inputEle = document.getElementById("message")
inputEle.value = xhr.responseText
//使用Bom编程的window对象跳转指定位置
// window.location.href="http://www.baidu.com"
}
}
//设置请求的发送方式和请求资源的路径及参数
xhr.open("GET", "/hello?username=zhangshan")
//发送请求
xhr.send()
}
</script>
</head>
<body>
<button onclick="getMessage()">按钮</button>
<input type="text" name="" id="message">
</body>
</html>