Ajax技术应用

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行代码,看看是不是丢失了小括号“)”


在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值