首页 > 其他分享 >SSM- SpringMVC3

SSM- SpringMVC3

时间:2023-01-12 22:48:27浏览次数:43  
标签:异步 网页 AJAX SSM Ajax 服务器 XMLHttpRequest SpringMVC3

一.实验目的

  1. JSON的作用和常用分类?

2. 什么是Ajax技术,致力于解决什么场景?

3. SpringMVC如何优化Ajax技术?

4. 项目代码

二. 实验内容

1) json是一种数据格式,和数组作用一样,用于存储数据.简单的来说json就是一种数据交换格式。JSON 中支持的数据类型可以分为简单数据类型和复杂数据类型两种,其中简单数据类型包括:string(字符串)、number(数字)、boolean(布尔值)和 null(空);复杂数据类型包括:Array(数组)和 Object(对象)。

2) 

 

 

 

1.AJAX全称(Async Javascript and XML)

即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页

2.Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面

流程图如下:

 

 

 

3.实现过程

实现 Ajax异步交互需要服务器逻辑进行配合,需要完成以下步骤:创建 Ajax的核心对象 XMLHttpRequest对象通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接构建请求所需的数据内容,并通过XMLHttpRequest 对象的 send() 方法发送给服务器端通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态接受并处理服务端向客户端响应的数据结果将处理结果更新到 HTML页面中#创建XMLHttpRequest对象通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象

 

 

 

与服务器建立连接通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接

 

 

 

参数说明:method:表示当前的请求方式,常见的有GET、POST,url:服务端地址async:布尔值,表示是否异步执行操作,默认为true

user: 可选的用户名用于认证用途;默认为`null,password: 可选的密码用于认证用途,默认为`null

#给服务端发送数据

通过 XMLHttpRequest 对象的 send() 方法,将客户端页面的数据发送给服务端

 

 

 

body: 在 XHR 请求中要发送的数据体,如果不传递数据则为 null

如果使用GET请求发送数据的时候,需要注意如下:

将请求数据添加到open()方法中的url地址中发送请求数据中的send()方法中参数设置为null

绑定onreadystatechange事件onreadystatechange 事件用于监听服务器端的通信状态,主要监听的属性为XMLHttpRequest.readyState ,只要 readyState属性值一变化,就会触发一readystatechange 事件XMLHttpRequest.responseText属性用于接收服务器端的响应结果

  • 3)AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

  • AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

  • Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

  • 在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。

  • Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

  • 就和国内百度的搜索框一样:

  • 传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。

  • 使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。

  • 使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

伪造Ajax

我们可以使用前端的一个标签来伪造一个ajax的样子。 iframe标签新建一个module : sspringmvc-06-ajax , 导入web支持!编写一个 ajax-frame.html 使用 iframe 测试,感受下效果

 

  1. 使用IDEA开浏览器测试一下!

利用AJAX可以做:

  • 注册时,输入用户名自动检测用户是否已经存在。

  • 登陆时,提示用户名密码错误

  • 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。

  • ....等等

jQuery.ajax

  • 纯JS原生实现Ajax我们不去讲解这里,直接使用jquery提供的,方便学习和使用,避免重复造轮子,有兴趣的同学可以去了解下JS原生XMLHttpRequest !

  • Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

  • jQuery 提供多个与 AJAX 有关的方法。

  • 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。

  • jQuery 不是生产者,而是大自然搬运工。

  • jQuery Ajax本质就是 XMLHttpRequest,对他进行了封装,方便调用!

4)

 

标签:异步,网页,AJAX,SSM,Ajax,服务器,XMLHttpRequest,SpringMVC3
From: https://www.cnblogs.com/Lovew2/p/17048146.html

相关文章

  • SSM- Spring1
      一.实验目的Spring框架的作用? 2.什么是IOC/DI?3.DI的三种依赖注入方式和底层实现?4.项目代码二.实验内容1.①.Spring能帮我们根据配置文......
  • SSM-Spring2
      一.实验目的什么是Spring的AOP功能?2.谈谈编程思想的发展?3.AOP常用的几种增强方式,各自的特点(代码辅助)?4.AOP实例-日志记录的项目代码二.实验内......
  • SSM -Spring3
     一.实验目的配置文件里命名空间的作用? 2.SpringIOC如何集成MyBatis功能?3. SpringIOC控制的数据流向?4.框架的二次理解?5.项目代码二.实验内......
  • SpringMvc3
    SpringMVC-第三章JSONJavaScriptObjectNotation(JavaScript对象表示法)JSON是存储和交换文本信息的语法,类似XML,比XML更小、更快,更易解析将Java对象转换为特殊格......
  • 《Spring in action 4》(十一)SSM + Redis
    SSM+Redis文章目录​​SSM+Redis​​​​SpringDataRedis​​​​项目整合​​​​项目结构​​​​InitWebApplication​​​​RootConfig​​​​ServletCofig.xml​......
  • Grafana 安装及 Windows 应用程序服务配置工具 NSSM使用
    Windows中安装:Grafana安装步骤及下载页面: ​​http://docs.grafana.org/installation/windows/​​NSSM(Non-SuckingServiceManager)下载页面:​​https://nssm.cc/downlo......
  • SSM整合中无法找到其它层的依赖
    我今天写SSM整合中,简单的将Dao层(及其依赖),Service层还有Controller层分别独立写到不同模块,在运行时tomcat总是启动不了,说是Service无法找到Dao的包,在确定各方面没问题后,我觉......
  • SSM的详细整合(dao,service,controller及各种配置)
    配置确实挺多的,我这个也是只包含了部分常用配置(如果大家有需要可以后续更新所有配置):数据源的连接,自动创建Mapper代理对象归于容器,事务的使用AOP(切面编程)的基本配置视图......
  • java基于ssm空气质量检测系统源码网站空气质量监测源码
    简介Java基于ssm的空气质量检测系统,检测设备检测一定范围内的企业空气指数,如果有污染则地图显示红色标记。演示视频https://www.bilibili.com/video/BV1GK4y1W7JB/?shar......
  • 实验课程: SSM 实验名称: MyBatis1
    一.实验目的对比传统Servlet技术和SSM框架的优缺点?2.ORM思想个人理解?3.MyBatis框架的优点?4.Mapper文件里的标签组有几种反参方式?5.什么是SqlSessionFac......