手搭手入门Ajax
环境介绍
技术栈 |
springboot+mybatis+mysql |
软件 |
版本 |
8 |
|
IDEA |
IntelliJ IDEA 2022.2.1 |
JDK |
1.8 |
Spring Boot |
2.7.13 |
mybatis |
2.3.1 |
Xmlhttprequest对象是AJAX的核心对象,发送请求以及接收服务器数据的返回。
Xmlhttprequest对象,现代浏览器都是支持的,都内置了该对象。直接用即可。
XmlHttpRequest对象基本方法：
abort():停止发送当前请求
getAllResponseHeader():获取服务器的全部响应头
getResponseHeader("headerLabel”):根据响应头的名字，获取对应的响应头
open(“method”,”URL”,”[,asycFlag[,”userName”[,password]]]”):建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务需要用户名、密 码，则 提供对应的信息。
send(content):发送请求。其中content是请求参数
setRequestHeader(“label”,”value”):在发送请求之前，先设置请求头
XMLHttpRequest对象的简单的属性：
onreadystatechange:该属性用于指定XMLHttpRequest对象状态改变时的事件处理函数。
readyState：该属性用于获取XMLHttpRequest对象处理状态
responseText:该属性用于获取服务器响应的XML文档对象
status：该属性是服务器返回的状态码，只有当服务器的响应已经完成时，才会有该状态码
statusText:该属性是服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息。
XMLHttpRequest对象的readyState属性对应的状态值
0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4：请求已完成且响应已就绪
@Controller
public class Demo1 {
@RequestMapping("/test01")
@ResponseBody
public String demo1(){
return "test";
}
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="mydiv"></div>
<input type="button" value="hello ajax" id="helloAjax">
<script type="text/javascript">
window.onload = function (){
document.getElementById("helloAjax").onclick =function (){
// console.log("发送ajax请求")
//1、创建ajax黑心对象XMLHttpRequest
var xhr =new XMLHttpRequest();
//2、注册回调函数
//该函数在XMLHttpRequestState状态值发生改变时被调用
xhr.onreadystatechange = function () {
//readyState是Ajax状态码
/**
* XMLHttpRequest对象的readyState属性对应的状态值
* 0：请求未初始化
* 1：服务器连接已建立
* 2：请求已收到
* 3：正在处理请求
* 4：请求已完成且响应已就绪
*/
console.log(xhr.readyState)
// if (this.readyState == 4){
// console.log("响应结束")
// }
//status是http协议状态码
console.log("http响应状态码"+this.status)
if (this.status==404){
alert("访问资源不存在")
}
if (this.status ==200){
//将响应信息放到div图层中,渲染
//innerHTML是javascript的元素属性，和ajax的XMLHttpRequest对象无关，innerText也是javascript的元素属性
//innerHTML可以设置元素内部的HTML代码。
document.getElementById("mydiv").innerHTML =this.responseText;
document.getElementById("mydiv").innerText =this.responseText;
}
}
//3、开启通道
//open(method,url,async,user,psw)
//method:请求方式，get，post
//url:请求路径
//async:true或false，true表示异步请求，false表示同步请求
//user用户名
//psw密码
xhr.open("GET","/test01",true)
//4、
xhr.send()
}
}
</script>
</body>
</html>
- 点赞
- 收藏
- 关注作者
评论（0）