1.在static目录下新建一个js目录，在js目录中增加一个名为ajax.js的文件。
将get办法和post办法的ajax共性提取到ajax.js文件，具体代码如下：
//封装共性,提取个性
//Get办法的共性如下：
function doAjaxGet(url,params,callback){
//1.基于dom事件创立XHR对象
const xhr=new XMLHttpRequest();
//2.设置XHR对象监听状态
xhr.onreadystatechange=function(){//onreadystatechange存储函数，每当readyState属性扭转时，就会调用该函数
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);
}
}
//3.创立与服务端的连贯
xhr.open("GET",`${url}?${params}`,true);
//4.发送异步申请实现与服务端的通信
xhr.send(null);//get申请send办法传值
}
//Post办法的共性如下：
function doAjaxPost(url,params,callback){
const xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);
}
}
xhr.open("POST",url,true);
//应用post申请要设置申请头（规定）
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送异步申请实现与服务端的通信
xhr.send(params);//Post申请send办法传值
}2.在html中引入改js文件,通过增加<script></script>标签引入js文件,具体代码如下：
<script type="text/javascript" src="/js/ajax.js"></script>客户端代码：
<!-- 客户端代码实现 -->
<!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" src="/js/ajax.js"></script>
<script type="text/javascript">
//检测名字是否曾经存在
function doClear(){
//示意能向id为result的对象插入“”内容
document.getElementById("result").innerHTML="";
}
//Get办法的个性
function doCheck(){
//1.定义申请的url
const url="/doCheck";
//2.定义申请参数
let name=document.forms[0].name.value;
let params=`name=${name}`;
//3.发送ajax-get申请
doAjaxGet(url,params,function(result1){ document.getElementById("result").innerHTML=`${result1}`;
});
}
//保留表单中名字的值
function doSave(){
//1.定义申请的url
const url="/doSave";
//2.定义申请参数
let name=document.forms[0].name.value;
let params=`name=${name}`;
//3.发送ajax-get申请
doAjaxPost(url,params,function(result1){
alert(result1);//响应后果不同的解决形式
});
}
</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+"不存在，能够注册";
}
}浏览器成果:
发表回复