初窥Ajax
程序员文章站
2022-05-23 10:12:58
...
由于本人最近对后端感觉迷茫,所以今天初步了解了Ajax(js和xml的合体)的技术。
下面有技术的简介,就不说明了,直接带来几个小案例吧。
1. 使用Ajax方式发送Get请求
这里是前端的代码
XMLHttpRequest:用于向网页发送请求的对象
当单击超链接时,会执行此函数 路径后面我们传了两个参数(name和age)
2. 后端代码
由于dopost调用deget()方法所以这里我们只截取了doget方法
- 发布项目,访问我们会惊奇的发现后端代码接收到了请求。
使用Ajax方式发送Post请求**
- 前端代码
因为post和get请求不同我们传参的话必须要加上请求头
使用Ajax做了一个用户名校验工作
1.前端代码块
function checkusername() {
// 获取输入框的值
var name = document.getElementById("name").value;
// 1.创建对象,发送请求
var request = ajaxFunction();
// 2.发送请求
request.open("POST", "/Demo01Servlet", true);
// 注册状态改变监听,获取服务器传来的数据
request.onreadystatechange = function(){
if(request.readyState ==4 && request.status ==200){
var data = request.responseText;
if(data===1){
document.getElementById("span01").innerHTML = "<font color="red">用户名存在</font>";
}else{
document.getElementById("span01").innerHTML = "<font color="red">用户名可用</font>";
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}
onreadystatechange:如果想获取后端传来的数据的话,就使用这个
request.readyState ==4 : 网页加载完成
上一篇: SpringBoot之过滤器
下一篇: JVM初窥:Java对象的内存结构