ajax技术图解相关知识
-
Ajax 技术学习 (原生的 ajax 基于 Java EE 实现)Ajax 技术学习 手动目录 ? 一、Ajax 基础 1.1 什么是 Ajax? 1.2 在哪里我们会用到 ajax 1.3 ajax 的工作原理 1.4 XMLHttpRequest 对象 1.4.1 XMLHttpRequest 常用方法 1.4.2 XMLHttpRequest 常用属性 二、让我们来试一试吧 2.1 简单的使用 ajax ,验证用户名是否合法 2.1.1 前端 demo (index.jsp) 2.1.2 JavaScript demo 2.1.3 2.1.4 后端 servlet 代码 2.2 运行截图 三、学习补充 3.1 问题记录 3.2 学习参考 一、Ajax 基础 1.1 什么是
-
《热点技术推荐》 之 浅谈Ajax的优缺点AJAX (Asynchronous JavaScript and XML) 是一种交互式动态web应用开发技术,该技术能提供富用户体验。 完全的AJAX应用给人以桌面应用的感觉。正如其他任何技术,AJAX有它自己的优缺点。下面我列出了一些重要的场景,你在基于web的应用的开发中使用 时一定要注意。 AJAX的优点 改善的用户体验- AJAX提供的更丰富
-
使用AJAX的几种理由公开标准让我们从第一条开始,AJAX技术是基于被各大浏览器和平台都支持的公开标准的技术。这意味着该技术不怕技术提供商的技术封锁。组成AJAX技术的大多数技术都能放心的使用很多年,而那些不是热点的、最新的和未经考验的技术只能使用一段时间。现在,对于绝大多数的用户和企业来说,浏览器是一个可信任的应用平台,这在五年前就不是个问题了。对于AJAX来说,FIREFOX浏览器的基础Mozilla 1.0的发布并且支持XML HTTP Request对象是一个转折点。这种允许异步数据交换的技术好多年前就被IE浏览器支持了。这种支持和FIREFOX浏览器的大量被采用真正的使人们理解了跨浏览器的富Internet应用成为了可能。可用性开发人员和设计人员开始认识到不仅大型的用户体验在市场上是成功的,而且也认识到这样体验是怎么来影响用户的开销的。基于AJAX技术的google地图比传统的选择MapQuest更成功,证明了提供更好的用户体验的产品的成功。AJAX技术是使网络应用有更好的可用性的一个领导性的技术。它允许从服务器端请求
-
Tab页界面,用jQuery及Ajax技术实现 从桌面开发的时代开始,Tab页就是一个优异的界面布局形式,兼有菜单的样式和充分复用有限的界面的优点。 到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式。 网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用。实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据)。 自己的开发的代码自己最清楚,用起来也应该最顺手,要扩展的话脑子也不犯晕。代码如下,还在不断修改中。 代码特点: 1,完全实现Tab逻辑功能,Tab
ajax技术图解相关课程
ajax技术图解相关教程
- 2. 视图技术 最初的 WEB 应用程序,数据直接绑定在 HTML 页面中,页面中的数据不能动态更新。如果要修改页面中的数据,需要手工修改 HTML 页面中的数据,这种页面叫静态页面。所谓的动态网页指页面中的数据能自动更新,页面中可以存在不同类型的变量,随时根据数据库中数据的变化自动变化。HTML 如同一面广告墙,上面贴的什么广告内容,它是不知道的,如果要换广告内容,需要工作人员自己动手。这就是静态网页,现在有很多电子广告牌,广告内容可以自动切换,相当于动态网页。HTML 并不支持变量,所以需要一种视图技术,让 HTML 中支持变量。也可以说是模板技术,在 HTML 中通过嵌入类似于 JAVA 的强逻辑性语言达到数据自动更新的目的。继续讲解之前,深入理解一下视图技术的概念。视图技术: 这是一个抽象概念,或者说是一个概括性概念。任何一款视图技术产品,都应该包括:模板;模板解析引擎。
- AJAX Asynchronous JavaScript + XML(异步JavaScript和XML), 其本身不是一种新技术,而是一个在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法。(MDN)AJAX 是2005年提出的一种术语,并不代表某个特定的技术。其译名 异步JavaScript和XML 描述出了核心,就是使用 JavaScript 发送异步 HTTP 请求,这样就摆脱了想要和服务端交互,必须刷新页面的痛点。学习 AJAX 相关内容前,建议有一些简单的 HTTP 相关知识的储备,否则很难理解其工作流程。
- 3. 主流视图技术 Spring MVC 可使用的视图技术较多,本课程主要聊聊 3 大主流视图技术。Jsp: 这个很老牌,相信大家一定知道。Jsp 模板是 J2EE 官方指定的,所以其模板引擎可由遵循 J2EE 规范的服务器实现,如 tomcat ;Freemarker: Freemarker 曾经因为 Struts MVC 风靡一时,当然,现在也很受欢迎。其模板需要自己提供的模板引擎解析;Thymeleaf: Thymeleaf 应该算是后起之秀,因为是后起之秀,会改善前辈的诸多不足,更适应现代化开发理念和习惯。Tips: 在 Servlet 的开发环境中,除了 JSP 外,其它的视图技术都有自己的模板引擎,可以说它们都是轻量级的视图解析器,可以在需要地方独立运行。既然有 3 种主流视图技术,绕不过去的当然要比较一下。首先要表态的是它们各有千秋,比较不是分输赢,而是让大家更好理解后在不同的场景下做出最合理的选择。最好的比较方式就是用起来。WEB 应用程序中,动态页面模板中的数据主要来自于不同的作用域,作用域中的数据如何来,就不需要动态模板操心。所以,对页面模板的要求就是要简洁、方便。Jsp 的模板很有天然优势,但其页面元素较多,且有些功能的实现需要借助于 JSTL (标准标签库)实现。且依赖于服务器容器,并不是很灵活。相信大家对 JSP 了解的也较多,这里就不再多说。Spring MVC 默认提供的 InternalResourceViewResolver 视图解析器,就是针对 JSP 的。因为 JSP 的解析是由服务器完成的,在 Spring MVC 中配置时,只需要指定视图位置即可。但是对于其它的视图技术而言,除了要指定视图的位置,还需要提供视图解析引擎的实现。
- 2. 技术选型 本篇我们通过商品浏览项目实例,展现前后端分离项目的开发、测试全流程。技术选型方面,后端毫无疑问选择 Spring Boot ,接口风格采用 RESTful 标准。前端则使用简单的 HTML + Bootstrap + jQuery ,并通过 jQuery 的 $.ajax 方法访问后端接口。
- 1.jQuery Ajax 这个技术在前面章节有独立章节进行讲解。事实上,$.ajax 是基于原生 XMLHttpRequest 进行了封装,并且提供了一套高度统一的设计和编程接口。在我们的代码中,我们一般都这样写:$.ajax({ method: 'POST', url: url, data: data, success: function () {}, error: function () {}});或者结合 deferred 的写法:$.ajax({ url: url, method: 'GET', data : data}).done(data => { // code}).fail(err => { // code})不吹不黑,jQuery 提供的这一套 Ajax 工具方法真的非常优秀,并且经历了这么多年的打磨,其稳定性、成熟度自然不必多言。关于 jQuery 的 Ajax 工具方法的优点,在前面章节已经讲过。至少从使用体验上来讲,简单易用,功能齐全,以至于我身边至今依然有很多开发者在使用这一套工具函数。然而,随着技术的发展,jQuery 也逐步走向一个衰弱的过程。越来越多的前端开发者开始使用诸如 Angular、React 和 Vue 这样的新型框架。想像一下,如果我们在一个基本用不到 jQuery 的技术中进行前端开发,为了要使用 jQuery 的 Ajax 相关方法而强行引入整个 jQuery,这显然是不现实也不可取的。在更新的技术中,我们将寻求体积更小,更为先进的类库。
- 3.1. Freemarker 视图技术 本小节和大家一起聊聊在 Spring MVC 中如何使用 Freemarker 视图技术 。打开 pom.xml 文件,添加 Freemarker 依赖包;<dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version></dependency><dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>5.1.13.RELEASE</version></dependency>新建 spring-freemarker.xml 文件,放在 src/main/resources 目录中。新建 freemarker.properties 文件放在 src/main/resources /conf 目录中;Tips: Spring MVC 支持 JAVA 、XML 配置,也支持两者混合使用。Freemarker 的相关配置这里使用 XML 方法。打开 WebConfig 文件,在类名前加上 @ImportResource(value = {“classpath:spring-freemarker.xml”}) 这样配置类和 XML 文件就可以混合使用;@Configuration@EnableWebMvc@ComponentScan(basePackages = { "com.mk.web.action" })@ImportResource(value = {"classpath:spring-freemarker.xml"})public class WebConfig implements WebMvcConfigurer { //……}在 spring-freemarker.xml 中配置 3 个 Bean。<bean id="freemarkerConfiguration" class="org.springframework.beans.factory.config.PropertiesFactoryBean"> <property name="location" value="classpath:conf/freemarker.properties" /></bean><!-- freeMarker 的模板路径 --><bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> <property name="freemarkerSettings" ref="freemarkerConfiguration" /> <property name="templateLoaderPath"> <value>/WEB-INF/ftl/</value> </property></bean><!-- freeMarker 视图解析器 --><bean id="viewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.freemarker.FreeMarkerView" /> <property name="contentType" value="text/html; charset=utf-8" /> <property name="cache" value="true" /></bean> freemarker.properties 文件内容。用来设置 Freemarker 的工作环境;#设置标签类型tag_syntax=auto_detect#模版缓存时间,单位:秒template_update_delay=0default_encoding=UTF-8output_encoding=UTF-8locale=zh_CN#设置数字格式 ,防止出现 000.00number_format=\##变量为空时,不会报错classic_compatible=true在项目的 WEB-INF 目录下新建用来存放 freemarker 模板文件的 ftl 目录;编写 FreemarkerAction 控制器;@Controllerpublic class FreemarkerAction { @RequestMapping("/fm") public String sayHello(ModelMap map){ map.put("name", "mk"); return "mk.ftl"; } }在 WEB-INF/ftl 下创建一个名为 mk.ftl 的模板文件;<pre name="code" class="java"> <html> <body> <h1>holle world ${name}</h1><br/> </body> </html> </pre> Tips: 每一种视图技术都会提供自己的模板语法。FreeMarker 更多的语法元素大家可查阅 FreeMarker 官方网站 http://freemarker.foofun.cn/toc.html 。本文仅介绍在 Spring MVC 中如何使用 FreeMarker 。打开浏览器,地址栏中输入 http://localhost:8888/sm-demo/fm 。浏览器中将显示;
ajax技术图解相关搜索
-
ajax
android
a href
abap
abap开发
abort
absolutelayout
abstractmethoderror
abstracttablemodel
accept
access
access教程
accordion
accumulate
acess
action
actionform
actionlistener
activity
addeventlistener