Ajax technology GET submission and POST submission small exercises
- Ajax technology is mainly used to improve the user experience, Ajax is used in many places, such as: barrage, map, etc. Ajax introduction small exercises to deepen understanding
Ajax get submission test
The current time pops up when the button is clicked
- Prepare a Controller layer class
@Controller//管理对象
public class AjaxGetController {
@RequestMapping("/getTimer")
@ResponseBody//返回一个json数据不经过视图解析器
public String getTimer(){
System.out.println(new Date().toLocaleString());
return new Date().toLocaleString();
}
}
2. Prepare an html page
Step: Obtain the Ajax core object
Prepare to send work
Prepare the listener function to monitor the change of ajax send request status and response status code
Send request
/* 创建ajax的核心对象 */
function createXhr(){
try{
return new XMLHttpRequest();//主流浏览器是支持的
}catch(e){
return new ActiveXObject("Microsoft.XMLHTTP"); //针对低版本的IE浏览器支持创建的 核心对象
}
}
function getTimer(){
//创建ajax的核心对象
var xhr = createXhr();
/*
发送请求的准备工作
1.第一个参数：使用GET提交还是POST提交
2.第二个参数：请求的url地址
3.第三个参数：请求是同步还是异步
true:异步
false:同步
*/
xhr.open("GET","/getTimer",true);
//准备监听函数，监听ajax发送请求状态的改变和响应状态码
xhr.onreadystatechange = function(){
//当readyState=4的时候，就代表后台数据已经响应完成
if(xhr.readyState==4 && xhr.status==200){
var text = xhr.responseText;
alert(text);
}
}
//发送请求
xhr.send();
}
Ajax post submission test
- Prepare a User entity class
public class User {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
- Prepare Controller class
@Controller//管理对象
public class LoginController {
@RequestMapping("/login")
@ResponseBody//响应式一个json数据
public String login(User user){
//判断用户名和密码
if("root".equals(user.getUsername())&&
"123".equals(user.getPassword())){
return "true";
}else{
return "false";
}
}
}
- Prepare an html page
Steps: Obtain the Ajax core object
Prepare to send work
Prepare the monitoring function to monitor the change of the status of the ajax sending request and the response status code
Set the request header information
Send the request
<script type="text/javascript">
function login(){
//获取用户名的值
var username = document.getElementById("username").value;
//获取密码的值
var password = document.getElementById("password").value;
//创建ajax的核心对象
var xhr = new XMLHttpRequest();
//发送请求的准备工作
xhr.open("POST","/login",true);
//准备监听函数，监听请求状态的改变和状态码的值
xhr.onreadystatechange = function(){
//4代表后台响应完毕，200代表响应码成功
if(xhr.readyState==4&&xhr.status==200){
//返回后台相应的数据
var text = xhr.responseText;
if("true"==text){
alert("成功");
}else{
alert("登陆失败!!用户名或者密码错误!!");
}
}
}
//使用ajax的post提交，你要让后台传递参数，你还得设置请求头信息
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//传递的参数是以普通文本传输的
//准备参数
var param = "username="+username+"&password="+password;
//发送请求
xhr.send(param);
//send的语法格式： xhr.send([param]); 注意：只有post提交传递参数才放到send方法内部
}
<form>
username:<input type="text" id="username" name="username"><br/>
password:<input type="text" id="password" name="password"><br/>
<input type="button" onclick="login()" value="登陆">
</form>
