<!– 客户端代码实现 –>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- html 要害表单元素设计 -->
<h1>The Ajax 03 Page</h1>
<!-- 该标签的作用是把表单中的相干控件集中起来,造成一个控件组 -->
<fieldset>
<!-- 该标签用于定义 fieldset 标签控件组下的题目 -->
<legend>Ajax 表单申请 </legend>
<form>
<input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
<input type="button" onclick="doSave()" value="save">
</form>
<span id="result"></span>
</fieldset>
<!-- 增加 JS 要害业务代码 -->
<!-- script 标签用于定义客户端脚本 script 元素既能够蕴含脚本语句,也能够通过 src 属性指向内部脚本文件。-->
<script type="text/javascript">
function doClear(){document.getElementById("result").innerHTML="";
}
// 检测名字是否曾经存在
//Get 办法的个性
function doCheck(){
var url="/doCheck";
var name=document.forms[0].name.value;
var params="name="+name;
doAjaxGet(url.params,function(result){document.getEmlementById("result").innerHTML=result;
})
}
// 在业务办法中利用封装好的代码, 保留业务的要害客户端代码剖析及实现
function doSave(){
var url="/doSave";
var params="name="+document.forms[0].name.value;
// 发送申请
doAjaxGet(url,params,function(result){document.getElementById("result").innerHTML=result;
})
}
// 封装共性, 提取个性
// 提取 get 办法的共性进行封装:function doAjaxGet(url,params,callback){const xhr=new XMLHttpRequest();
xhr.onreadstatechange=function(){if(xhr.onreadyState==4&&xhr.status==200){callback(xhr.responseText);
}
}
xhr.open("GET",url+"?"+params,true);
xhr.send(null);
}
</script>
</body>
</html>
服务端代码实现:
package com.cy.ajaxcontroller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
// 这是一个服务端, 用来解决客户端的申请
@Controller
@RequestMapping("/")
public class AjaxController {private List<String> names=new ArrayList<String>();
// 如果这是存储数据的表
@RequestMapping("doSave")
@ResponseBody
// 将客户端申请的数据 name 写入到 names 对应的汇合
public String doSave(String name){System.out.println("name="+name);
names.add(name);
return name+"save ok";
}
@RequestMapping("doCheck")
@ResponseBody
// 通过此办法测验名字是否曾经存在
public String doCheck(String name) {if(names.contains(name))
return "名字:"+name+"曾经存在,请抉择其余名字";
return "名字:"+name+"不存在,能够注册";
}
}