<!-- 客户端代码实现 -->
<!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+"不存在，能够注册"; }}