Ajax是什么
Ajax(Asynchronous JavaScript and XML) 是一种web应用技术,可以借助客户端脚本(javascript)于服务端应用进行异步通信,获取服务器端数据以后,进行局部刷新,进而提高数据的响应和渲染速度。
传统的Web应用中简易的同步模型分析如下图
基于Ajax技术的异步请求响应模型分析。如下图
传统Web应用中的,同步请求应用时序模型分析
客户端向服务端向服务端发送请求需要等待服务端的响应结果,服务端返回数据以后,客户端可以继续发送请求。
基于Ajax技术的Web异步请求响应模型
客户端可以向服务端发送异步请求,客户端无需等待服务端的响应结果,可以不断向服务端发送请求。
Ajax应用
AJAX可以仅向服务器发送并取回必要的数据,并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少,服务器响应的速度就更快了。但Ajax技术也有劣势,最大劣势是不能直接进行跨域访问。
Ajax快速入门
Ajax请求响应过程分析
Ajax关键代码的封装
所有的Ajax 请求都会基于DOM(HTML元素)事件,通过XHR(XMLHttpRequest)对象实现与服务端异步通讯局部更新
口语描述:
当页面加载完成后一个dom事件 可以基于XHR这个对象向服务端发起请求,但是服务器的数据响应回来后,我们要去更新,所以我需要使用XHR这个对象在发请求之前,要先注册一个处理函数 callback 在服务器的数据返回了我会调用这个函数处理数据 在这个函数内部 拿到服务器响应的数据 然后在更新页面
具体步骤描述:
,Ajax应用的编程步骤如下:
第一步:基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步:注册XHR对象状态监听,通过回调函数(callback)处理状态信息。
第三步:创建与服务端的连接
第四步:发送异步请求实现与服务端的通讯
代码实现
页面描述
构建ajax-02页面,首先,在文本框中注册焦点事件,基于焦点事件判断输入内容是否存在.其次点击save按钮时,将用户内容异步提交到服务器端。
第一步:服务器代码设计
创建AjaxController类,用于处理客户端请求
package com.cy.ajax.controller;
@Controller
@RequestMapping("/")
public class AjaxController {
private List<String> names=new ArrayList<String>();//假设这是存储数据的表
//处理ajax请求的服务端设计
@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页面 添加关键元素
第二步 html关键表单元素设计
<h1>The Ajax 02 Page</h1>
<fieldset>
<legend>Ajax 表单请求</legend>
<form>
<!--
Onblur 失去焦点时触发
Onfocus 得到焦点时触发
-->
<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 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);
//pos请求传参需要设置请求头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 如果不使用请求头 则数据传不到服务器端 可以在form表单里面输入 enctype 自动生成上面的类型 复制即可
//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方法传值
}
post请求传参数
1表示:没有调用open之前
2表示:调用open之后执行send之前
3表示:服务端正在响应数据但是数据还没有传输完成
4表示:数据完全响应到客户端 客户端已经拿到数据了
如上图写 显示回来的数据笔记格式会是json 如下图
Ajax技术进阶
js原生方式获取表单数据的三种方式
字符串拼接升级版 老版 新版 区别
// 一种新的写法,这种写法称之为模板字符串,所有字符串所有字符串拼接都可以以这种方式进行实现
Var params = `name=${name}`
模板字符串 代替换字符串的拼接 :
尽量不要使用字符串拼接 :1 性能差 2 可能会传入一些非法数字
${}为模板字符串中的EL表达式,可以提取变量的值
js中的关键字 var const let
var
使用var关键字修饰的变量 是全局的可以被修改
const
使用const关键字修饰的变量 复制后不能被修改
let
使用let关键字修饰的变量 是局部的
Js箭头函数简单运用
回调函数
js 代码排错方法
如何使用Debug
然后在页面上点击相应的位置,并打开控制台 如图所示 就会跳转到debugger的位置
运行时加断点 可以在控制台加入断点如下图所示
readyState的值 是1 表示:open方法结束
是 2 表示:send方法执行了 发送了请求 表示send方法一调用
是 3 表示:服务端的数据正在向客户端传输 也就是服务器端开始相应数据了
是 4 表示:相应结束
Js中代码调试技巧如下图
注意:Debugger 只有在打开控制台窗口以后才有效
相关文档
Bug分析
一:报错内容
2021-04-02 15:18:17.261 ERROR 11708 --- [nio-8080-exec-4] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateInputException: Error resolving template [名字pyhton不存在,可以注册], template might not exist or might not be accessible by any of the configured Template Resolvers] with root cause
org.thymeleaf.exceptions.TemplateInputException: Error resolving template [名字pyhton不存在,可以注册], template might not exist or might not be accessible by any of the configured Template Resolvers
at org.thymeleaf.engine.TemplateManager.resolveTemplate(TemplateManager.java:869) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.engine.TemplateManager.parseAndProcess(TemplateManager.java:607) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1098) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1072) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.spring5.view.ThymeleafView.renderFragment(ThymeleafView.java:362) ~[thymeleaf-spring5-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.thymeleaf.spring5.view.ThymeleafView.render(ThymeleafView.java:189) ~[thymeleaf-spring5-3.0.11.RELEASE.jar:3.0.11.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1373) ~[spring-webmvc-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1118) ~[spring-webmvc-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1057) ~[spring-webmvc-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:943) ~[spring-webmvc-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006) ~[spring-webmvc-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:898) ~[spring-webmvc-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at javax.servlet.http.HttpServlet.service(HttpServlet.java:634) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:883) ~[spring-webmvc-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) ~[tomcat-embed-websocket-9.0.35.jar:9.0.35]
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:100) ~[spring-web-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119) ~[spring-web-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:93) ~[spring-web-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119) ~[spring-web-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:201) ~[spring-web-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119) ~[spring-web-5.2.6.RELEASE.jar:5.2.6.RELEASE]
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:202) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:541) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:373) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:868) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1590) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1130) ~[na:na]
at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:630) ~[na:na]
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) ~[tomcat-embed-core-9.0.35.jar:9.0.35]
at java.base/java.lang.Thread.run(Thread.java:832) ~[na:na]
报错 主要内容
2021-04-02 15:18:17.261 ERROR 11708 --- [nio-8080-exec-4] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateInputException: Error resolving template [名字pyhton不存在,可以注册], template might not exist or might not be accessible by any of the configured Template Resolvers] with root cause
org.thymeleaf.exceptions.TemplateInputException: Error resolving template [名字pyhton不存在,可以注册], template might not exist or might not be accessible by any of the configured Template Resolvers
经过debug 分析发现 客户端可以给服务器端传输数据 且 服务器端能够接收数据 但是返回时出错 在结合错误原因 可能不存在相关的模板配置 得到 原因时 没有给方法加 @ResponseBody
注解导致 返回的时一个链接 而不是字符串
二:单词拼写错误,如图所示:
问题分析:点击错误提示中的54行代码,看看是不单词拼写错误,检查param单词在哪定义了。
三:2. 丢失括号,如图所示
问题分析:点击错误提示中的59行代码,看看是不是丢失了小括号“)”
四