web前端开发——AJAX入门
什么是AJAX
AJAX: A New Approach to Web Applications XML
AJAX是老技术新思想。
它所包括的内容我们之前都接触过。例如以下:
(1)使用XHTML和CSS的基于标准的表示技术
(2)使用DOM进行动态显示和交互
(3)使用XML和XSLT进行数据交换和处理
(4)使用XMLHttpRequest进行异步数据检索
(5)使用Javascript将以上技术融合在一起
就像将几种酒混合成鸡尾酒一样,AJAX让老的技术换发出新的生命力。
AJAX的作用
(1)改善表单验证方式,不再须要打开新页面。也不再须要将整个页面数据提交
(2)不需刷新页面就可改变页面内容。降低用户等待时间
(3)按需获取数据,每次仅仅从server端获取须要的数据
(4)读取外部数据,进行数据处理整合
(5)异步与server进行交互,在交互过程中用户无需等待。仍可继续操作
AJAX应用模式的流程与传统Web应用模式相比
AJAX应用的流程是:在浏览器中输入数据->点击button提交请求->用户能够继续做其它事情;Servlet在处理数
据,并发回数据->浏览器收到响应->浏览器中的当前页面显示响应结果。这当中仍然有些过程因为时间短暂使你忽略
了它的所在。但实际上这些过程都是存在的。
传统Web开发思维模式的一个特点是通过form表单提交请求信息,然后转向一个新的页面处理请求,并显示服务
器端返回的信息。
以下看幅图
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmd6aWppZWppYXlvdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
ajax缺点
(1)AJAX没有Back和History功能,即对浏览器机制的破坏
(2)AJAX的安全问题。
(3)对搜索引擎支持较弱。
(4)client过肥,太多client代码造成开发上的成本。
(5)破坏程序的异常处理机制,违背URL和资源定位的初衷。
AJAX适用场景
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmd6aWppZWppYXlvdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
小结
因为能够在页面内与server通信,不必总体刷新页面,降低了传输数据量。提高了Web应用的响应速度,给用户
带来全新的感受。
能够觉得AJAX就是Web标准和Web应用的可用性理论的集大成者。它极大地改善了Web应用的可用性
和用户的交互体验。终于得到了用户和市场的广泛认可。所以能够说,AJAX就是用户和市场的选择。
web前端开发——AJAX入门的更多相关文章
- web前端开发-Ajax(1)
1.简单简绍Ajax的功能 Ajax是处于前端和后端之间的这么一个东西,他可以拿到你前端form的内容,并且在你触发Ajax的时候,先将某些数据发送到服务器端,等接受到服务器 返回的数据时,执行某个函 ...
- web前端开发-Ajax(2)
前面的一篇博文简单的简绍了Ajax基于jQuery的用法,接下来要对Ajax做进一步的介绍,Ajax请求大致可以通过三种方式发送:原生Ajax,jQuery,伪Ajax.1.原生Ajax: 由于Aja ...
- Web 前端开发学习之路(入门篇)
字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== ...
- 前端基础入门第一阶段-Web前端开发基础环境配置
Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...
- 小白入门Web前端开发学习一周小结
说之前还是先说点其他的,简单介绍下自己为何选择web前端开发: 本人之前在一家国企单位从事质检工作,干了3年,工资和待遇还算不错,但由于其工作的流动性导致知识的脱轨以及精神上的空缺,最后还是打算在25 ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
- Web前端开发高手进阶
Web前端开发高手进阶 js框架+Ajax技术01.初识javascript及其语言基础(一)02.初识javascript及其语言基础(二)03.初识javascript及其语言基础(三)及js原 ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- Web前端开发十日谈
=========================================================================== 原文章: http://kb.cnblogs.c ...
随机推荐
- LaTex的几种数学符号字体以及相关说明
\mathrm is the normal upright Roman font \mathnormal is the normal math italic font: $\mathnormal{a} ...
- PHP中使用DOM读取解析XML属性值一例
先看XML文件结构,与常见的文件略有不同,数据并不是用闭合标签保存的,而是直接保存在属性值中. <?xml version="1.0" encoding="utf- ...
- mysql 临时表和内存表
查看内存表的最大值: show variables like '%heap%'; mysql> show variables like '%heap%'; +------------------ ...
- 关于python 中的偏函数转载
Python的functools模块提供了很多有用的功能,其中一个就是偏函数(Partial function).要注意,这里的偏函数和数学意义上的偏函数不一样. 在介绍函数参数的时候,我们讲到,通过 ...
- mycat详细
MyCAT的优势基于阿里开源的Cobar产品而研发,Cobar的稳定性.可靠性.优秀的架构和性能以及众多成熟的使用案例使得MYCAT一开始就拥有一个很好的起点,站在巨人的肩膀上,我们能看到更远.业界优 ...
- * ? 【a-z】【0-9】通配符 学习
通配符顾名思义就是通用的匹配信息的符号,比如星号(*)就是代表匹配零个或多个字符,问号(?)是代表匹配单个字符,中括号内加上数字[0-9]代表匹配单个阿拉伯数字的字符,而中括号内加上字母[abc]则是 ...
- 改造vue-quill-editor: 结合element-ui上传图片到服务器
前排提示:现在可以直接使用封装好的插件vue-quill-editor-upload 需求概述 vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时 ...
- idea 包的显示方式
idea 可以通过点击Project的导航栏里的小齿轮里面有一个 Flatten packages 选项,将其勾上.就可以得到跟eclipse一样的包的显示方式. 没有设置默认是这样的 2018-06 ...
- jeesite 简介
jeesite 简介 https://github.com/thinkgem/jeesite http://jeesite.com/
- [Webpack + React] Import CSS Modules with TypeScript and webpack
If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webp ...