什么是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入门的更多相关文章

  1. web前端开发-Ajax(1)

    1.简单简绍Ajax的功能 Ajax是处于前端和后端之间的这么一个东西,他可以拿到你前端form的内容,并且在你触发Ajax的时候,先将某些数据发送到服务器端,等接受到服务器 返回的数据时,执行某个函 ...

  2. web前端开发-Ajax(2)

    前面的一篇博文简单的简绍了Ajax基于jQuery的用法,接下来要对Ajax做进一步的介绍,Ajax请求大致可以通过三种方式发送:原生Ajax,jQuery,伪Ajax.1.原生Ajax: 由于Aja ...

  3. Web 前端开发学习之路(入门篇)

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== ...

  4. 前端基础入门第一阶段-Web前端开发基础环境配置

    Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...

  5. 小白入门Web前端开发学习一周小结

    说之前还是先说点其他的,简单介绍下自己为何选择web前端开发: 本人之前在一家国企单位从事质检工作,干了3年,工资和待遇还算不错,但由于其工作的流动性导致知识的脱轨以及精神上的空缺,最后还是打算在25 ...

  6. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  7. Web前端开发高手进阶

     Web前端开发高手进阶 js框架+Ajax技术01.初识javascript及其语言基础(一)02.初识javascript及其语言基础(二)03.初识javascript及其语言基础(三)及js原 ...

  8. 淘宝前端工程师:国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

  9. Web前端开发十日谈

    =========================================================================== 原文章: http://kb.cnblogs.c ...

随机推荐

  1. LaTex的几种数学符号字体以及相关说明

    \mathrm is the normal upright Roman font \mathnormal is the normal math italic font: $\mathnormal{a} ...

  2. PHP中使用DOM读取解析XML属性值一例

    先看XML文件结构,与常见的文件略有不同,数据并不是用闭合标签保存的,而是直接保存在属性值中. <?xml version="1.0" encoding="utf- ...

  3. mysql 临时表和内存表

    查看内存表的最大值: show variables like '%heap%'; mysql> show variables like '%heap%'; +------------------ ...

  4. 关于python 中的偏函数转载

    Python的functools模块提供了很多有用的功能,其中一个就是偏函数(Partial function).要注意,这里的偏函数和数学意义上的偏函数不一样. 在介绍函数参数的时候,我们讲到,通过 ...

  5. mycat详细

    MyCAT的优势基于阿里开源的Cobar产品而研发,Cobar的稳定性.可靠性.优秀的架构和性能以及众多成熟的使用案例使得MYCAT一开始就拥有一个很好的起点,站在巨人的肩膀上,我们能看到更远.业界优 ...

  6. * ? 【a-z】【0-9】通配符 学习

    通配符顾名思义就是通用的匹配信息的符号,比如星号(*)就是代表匹配零个或多个字符,问号(?)是代表匹配单个字符,中括号内加上数字[0-9]代表匹配单个阿拉伯数字的字符,而中括号内加上字母[abc]则是 ...

  7. 改造vue-quill-editor: 结合element-ui上传图片到服务器

    前排提示:现在可以直接使用封装好的插件vue-quill-editor-upload 需求概述 vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时 ...

  8. idea 包的显示方式

    idea 可以通过点击Project的导航栏里的小齿轮里面有一个 Flatten packages 选项,将其勾上.就可以得到跟eclipse一样的包的显示方式. 没有设置默认是这样的 2018-06 ...

  9. jeesite 简介

    jeesite 简介 https://github.com/thinkgem/jeesite http://jeesite.com/

  10. [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 ...