SSM- 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)

 
posted @ 2023-01-12 22:27  月丫湾  阅读(25)  评论(0)    收藏  举报