依旧AJAX异步更新
要讲的
讲0,1,2,3,4
demo五步 从debugger开始
debugger分析
debugger调试入口
如上图 设置了断点
增加功能 同步请求
html页面
对应增加的日期
放好一点
先彻底了解同步
新内容 Ajax 表单请求
在span实现
如果没有存在,则返回空值
controller层
@Controller
@RequestMapping("/")
public class AjaxController {
//====================Ajax-02====================================
private List<String> names=new ArrayList<String>();//假设这时存储数据的表
@RequestMapping("doAjax02UI")
public String doAjax02UI() {
return "ajax-02";
}
/**通过此方法校验名字是否存在*/
@RequestMapping("doCheck")
@ResponseBody
public String doCheck(String name) {
if(names.contains(name))
return "名字"+name+"已经存在,请选择其它名字";
return "名字"+name+"不存在,可以注册";
}
//===================Ajax-01=======================================
@RequestMapping("doAjax01UI")
public String doAjax01UI() {
return "ajax-01";
}
//处理传统请求的服务端设计
@RequestMapping("doGet")
public String doGet(Model model) {
model.addAttribute("message", "Get request result");
return "ajax-01";
}
//处理ajax请求的服务端设计
@RequestMapping("doAjaxGet")
@ResponseBody //将方法返回值以字符串形式进行输出
public String doAjaxGet() throws Exception{
System.out.println("==doGet()==");
//Thread.sleep(3000);//模拟耗时操作
return "Ajax Get request result";
}
}
html 客户端层 ajax-02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 02 Page</h1>
<fieldset>
<legend>Ajax 表单请求</legend>
<form>
<input type="text" name="name" id="nameId" onblur="doCheck()">
<input type="button" value="Save">
</form>
<span id="result"></span>
</fieldset>
<script type="text/javascript">
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//......
}
</script>
</body>
</html>
配置文件
server.port=80
spring.thymeleaf.cache=false
最终效果
再继续拓展
实现按钮操作
分析
全面代码与总结 自己看
@Controller
@RequestMapping("/")
public class AjaxController {
//====================Ajax-03====================================
@RequestMapping("doAjax03UI")
public String doAjax03UI() {
return "ajax-03";
}
//====================Ajax-02====================================
private List<String> names=new ArrayList<String>();//假设这是存储数据的表
@RequestMapping("doAjax02UI")
public String doAjax02UI() {
return "ajax-02";
}
/**通过此方法校验名字是否存在*/
@RequestMapping("doCheck")
@ResponseBody
public String doCheck(String name) {
if(names.contains(name))
return "名字"+name+"已经存在,请选择其它名字";
return "名字"+name+"不存在,可以注册";
}
/**将客户端请求数据写入到names对应的集合*/
@RequestMapping("doSave")
@ResponseBody
public String doSave(String name) {
System.out.println("name="+name);
names.add(name);
return "save ok";
}
//===================Ajax-01=======================================
@RequestMapping("doAjax01UI")
public String doAjax01UI() {
return "ajax-01";
}
//处理传统请求的服务端设计
@RequestMapping("doGet")
public String doGet(Model model) {
model.addAttribute("message", "Get request result");
return "ajax-01";
}
//处理ajax请求的服务端设计
@RequestMapping("doAjaxGet")
@ResponseBody //将方法返回值以字符串形式进行输出
public String doAjaxGet() throws Exception{
System.out.println("==doGet()==");
//Thread.sleep(3000);//模拟耗时操作
return "Ajax Get request result";
}
}
Ajax 01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 01 Page <strong id="timeId"></strong></h1>
<div>
<!-- 传统方式的同步请求测试 -->
<fieldset> <!-- 分组设置 -->
<legend>传统方式的同步请求</legend> <!-- 设置分组名称 -->
<button onclick="doGet()">Get Request</button>
<span id="resultId">[[${message}]]</span>
</fieldset>
<script type="text/javascript">
//scirpt只要被加载就会执行
document.getElementById("timeId").innerHTML=new Date().toLocaleString()
function doGet(){
location.href="http://localhost/doGet";
}
</script>
</div>
</body>
</html>
Ajax 02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 02 Page</h1>
<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>
<script type="text/javascript">
function doClear(){
document.getElementById("result").innerHTML="";
}
function doSave(){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
xhr.open("POST","/doSave",true);
//post请求要设置请求头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send("name="+name);//Post请求send方法传值
}
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
console.log("name",name);
xhr.open("GET","/doCheck?name="+name,true);
//4.发送请求
xhr.send(null);//Get请求send方法传值
}
</script>
</body>
</html>
Ajax 03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 03 Page</h1>
<fieldset>
<legend>Ajax 表单请求(对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>
<script type="text/javascript">
function doClear(){
document.getElementById("result").innerHTML="";
}
function doSave(){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
xhr.open("POST","/doSave",true);
//post请求要设置请求头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send("name="+name);//Post请求send方法传值
}
//定义一个函数这个函数主要用于发送Ajax GET请求,目的封装共性,提取特性,以实现代码的可重用性
function doAjaxGet(url,params,callback){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);//处理服务端响应的结果数据
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
xhr.open("GET",url+"?"+params,true);
//4.发送请求
xhr.send(null);//Get请求send方法传值
}
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
console.log("name",name);
xhr.open("GET","/doCheck?name="+name,true);
//4.发送请求
xhr.send(null);//Get请求send方法传值
}
</script>
</body>
</html>
下午
函数的调用
自调用
callback函数的回调
第一步
第二步
03页面拓展
controller层
@Controller
@RequestMapping("/")
public class AjaxController {
//====================Ajax-03====================================
@RequestMapping("doAjax03UI")
public String doAjax03UI() {
return "ajax-03";//03页面在02页面的基础之上做了一个封装
}
//====================Ajax-02====================================
private List<String> names=new ArrayList<String>();//假设这是存储数据的表
@RequestMapping("doAjax02UI")
public String doAjax02UI() {
return "ajax-02";
}
/**通过此方法校验名字是否存在*/
@RequestMapping("doCheck")
@ResponseBody
public String doCheck(String name) {
if(names.contains(name))
return "名字"+name+"已经存在,请选择其它名字";
return "名字"+name+"不存在,可以注册";
}
/**将客户端请求数据写入到names对应的集合*/
@RequestMapping("doSave")
@ResponseBody
public String doSave(String name) {
System.out.println("name="+name);
names.add(name);
return "save ok";
}
//===================Ajax-01=======================================
@RequestMapping("doAjax01UI")
public String doAjax01UI() {
return "ajax-01";
}
//处理传统请求的服务端设计
@RequestMapping("doGet")
public String doGet(Model model) {
model.addAttribute("message", "Get request result");
return "ajax-01";
}
//处理ajax请求的服务端设计
@RequestMapping("doAjaxGet")
@ResponseBody //将方法返回值以字符串形式进行输出
public String doAjaxGet() throws Exception{
System.out.println("==doGet()==");
//Thread.sleep(3000);//模拟耗时操作
return "Ajax Get request result";
}
}
html 客户端层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 03 Page</h1>
<fieldset>
<legend>Ajax 表单请求(对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>
<script type="text/javascript" src="/ajax/ajax.js"></script>
<script type="text/javascript">
function doClear(){
document.getElementById("result").innerHTML="";
}
//保存业务的实现
function doSave(){
//1.定义请求url
var url="doSave";
//2.定义请求参数
var params="name="+document.forms[0].name.value;
//3.发送异步的post请求
doAjaxPost(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
//检查名字是否存在的业务代码
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//1.定义请求url
var url="doCheck";
//2.定义请求参数
var name=document.forms[0].name.value;
var params="name="+name;
//3.发送异步Get请求
doAjaxGet(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
</script>
</body>
</html>
js 封装的代码
//Ajax Post请求的封装
function doAjaxPost(url,params,callback){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
xhr.open("POST",url,true);
//post请求要设置请求头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params);//Post请求send方法传值
}
//定义一个函数这个函数主要用于发送Ajax GET请求,目的封装共性,提取特性,以实现代码的可重用性
function doAjaxGet(url,params,callback){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);//处理服务端响应的结果数据
}
};
//3.打开链接
xhr.open("GET",url+"?"+params,true);
//4.发送请求
xhr.send(null);//Get请求send方法传值
}
jquery
没有监听 发送请求 ajax被封装了 都在前面
设置新链接 整合到一起
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
