“再也不学AJAX了”是一个与AJAX主题相关的文章系列,包含以下三个部分的内容:

  1. AJAX概述:主要回答“AJAX是什么”这个问题;
  2. 使用AJAX:介绍如何通过JavaScript发送AJAX请求;
  3. 跨域获取数据:介绍了与“跨域发送AJAX请求”相关的一些内容:比如“浏览器同源策略”与四种跨域请求资源的方式:JSONP,CORS,postMessage和webSocket;

希望通过阅读该系列三个部分的内容,你能够彻底理解并掌握AJAX技术,从此再也不用专门学习AJAX。

让我们开始吧 ?。

一、什么是AJAX?

AJAX是“Asynchronous JavaScript And XML”的缩写(即:异步的JavaScript和XML),是一种实现无页面刷新获取服务器数据的混合技术

让我们停下来好好思考一下这个定义,注意那些醒目的蓝色文字,它们出现在那里不是没有理由的。

好的,相信你已经对这个定义有些印象,现在让我对那些蓝色的文字做些说明:

(一)XML是什么?

XML是“Extensible Markup Language”的缩写(即:可拓展标记语言),是一种特征类似HTML,用来描述数据是什么,并承载数据的标记语言,你可以在中文的维基百科中看到更完整的解释,但我们现在只要知道它是一种用来承载数据的语言就足够了。

而JSON仅仅是一种数据格式,在JSON发明之前,人们大量使用XML作为数据传输的载体,也正因如此,AJAX技术的最后一个字母为“X”。而如今情况则发生了些变化,JSON这种类似于字符串对象的轻量级的数据格式越来越受到开发者青睐,几乎变成了AJAX技术的标准数据格式,因此好像AJAX技术如今应该换个名字,叫做“AJAJ”,呃,还是算了吧。

需要注意的是,JSON并不是XML的替代品,两者各自有其适应的场景。如果你对这两种数据格式的差异感兴趣,可以查看以下链接:

  • 为什么XML这么笨重的数据结构仍在广泛应用?
  • 为什么都反对XML而支持使用JSON
  • Stop Comparing JSON and XML
  • JSON and XML comparison

(二)无页面刷新?

我们知道,互联网最主要的功能在于“资源交换”,当初发明互联网的科学家们也是基于这个动机。虽然在互联网中“资源交换”的主体都是计算机。但为了方便交流,我们通常将获取资源的一方称为客户端(主要的工具是浏览器),而将派发资源的一方称为服务端(又称为“服务器”)。

在AJAX技术出现之前,如果浏览器需要从服务器请求资源,其交互模式为“客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新,客户端加载新的HTML文档”。确实,这种交互模式十分简洁明了,而且非常符合人的直觉,对于那时游走于互联网中的极客而言,也确实够用了。但是随着时代的进步,互联网渐渐不只是极客们的娱乐场,越来越多商业化网站的出现,使互联网不再局限于满足人们“资源交换”的需求,人们开始期待能够在互联网中获得更好的“使用体验”,而随着用户点击不断刷新页面的交互方式显然很难讨人喜欢。

再试想这样一种情景,当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数据发生了变化,而此时服务器却要将重绘的整个页面再返回给浏览器加载,这显然有悖于程序员的“DRY”原则,而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档,这本身也会给网络带宽带来不必要的开销。

有没有办法在页面数据变动时,只向服务器请求新的数据,并且在阻止页面刷新的情况下,动态的替换页面中展示的数据呢? -- 答案正是“AJAX”。

AJAX技术的问世,不仅通过阻止浏览器接受响应时刷新页面提升了互联网用户的使用体验,还使开发者能够以更加微观的视角重新思考互联网应用的构建,从此,开发者将在“数据”层面而不是“资源”层面以更高的自由度构建网站和Web应用。

(三)混合技术?

是的,AJAX技术并不只是操作XMLHttpRequest对象发起异步请求,而是为了实现“无页面刷新的资源获取”的一些列技术的统称,这些技术包括了:

  • JavaScript:用来在获取数据后,通过操作DOM或其他方式达成目标;
  • 客户端(即浏览器)提供的实现异步服务器通信的XMLHttpRequest对象;
  • 服务器端允许浏览器向其发起AJAX请求的相关设置;

明白AJAX并不只是操作XMLHttpRequest对象,对于初学者而言是十分必要的。


二、AJAX的意义

相信你已经明白了,AJAX技术的意义在于:它能够使浏览器在不刷新页面的情况下获取服务器响应,这将大大提升互联网用户的使用体验,同时,由于AJAX请求获取的是数据而不是HTML文档,因此它也节省了网络带宽,让互联网用户的网络冲浪体验变得更加顺畅。

同时,我们也应该注意到,由于AJAX技术可以令开发者只向服务器获取数据(而不是图片,HTML文档等资源),互联网资源的传输变得前所未有的轻量级和纯粹,这激发了广大开发者的创造力,使各式各样功能强大的网络站点,和互联网应用如雨后春笋一般冒出,不断带给人惊喜。


三、小结

本文我们讲解了“什么是AJAX”以及“AJAX的意义”,你可能会觉得技术博客的一篇文章完全没有代码实在令人难受,但我觉得都某个概念建立一个相对完整的心智模型不仅重要而且可以为技术细节的学习打下很好的基础,别着急,在下一篇文章中,我们会花费大量篇幅去讨论如何使用AJAX技术,希望你保持耐心,Keep Learning,加油!?

? Hey!喜欢这篇文章吗?别忘了在下方? 点赞让我知道。

再也不学AJAX了!(一)AJAX概述相关推荐

  1. 1.Ajax局部刷新技术概述,底层原理,全局刷新的例子

    文章目录 Ajax 0.第四阶段概述 本阶段课程内容: 哪些感觉比较难? 1.全局刷新 和局部刷新 2.异步对象 3.Ajax 4.Ajax中使用异步对象 (1)创建异步对象 (2)给异步对象绑定事件 ...

  2. 不同浏览器 ajax,完整的 AJAX 写法(支持多浏览器)

    代码如下: var xmlhttp; function Submit() { //1.创建 XMLHttpRequest 对象 if (window.XMLHttpRequest) { //IE7,I ...

  3. 利用ajax.dll进行Ajax的开发2007-07-15 15:38

    利用ajax.dll进行Ajax的开发 2007-07-15 15:38 Asynchronous JavaScript and XML(AJAX)最近掀起的高潮,要完全归功于Google在Googl ...

  4. ajax资料收集-Ajax文章(教程和实例)---Ajax资源下载(源码和教程)---Ajax规范标准

    CSDN Blog Ajax文章搜索: http://search.csdn.net/search/ajax/1/blog/ 专题:Ajax技术应用开发 http://www.51cto.com/ht ...

  5. ajax换头像,ajax切换明星头像!

    html部分: Document .showBox{ width: 200px; height: 200px; margin: 100px auto; border: 1px solid gray; ...

  6. Ajax基础,JSON,Ajax进阶

    Ajax 一.Ajax基础 (一)Ajax简介 概念:Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指 ...

  7. ajax通讯原理,ajax通讯原理以及自己封装一个ajax函数

    ajax通讯原理 要解释ajax的原理,需要从旧的交互方式开始,当用户触发一个http请求到服务器,服务器对其进行处理之后,再返回一个新的html页到客户端,每当服务器处理客户端提交的请求时,客户都只 ...

  8. ajax入门实例代码,AJAX、AJAX实例及AJAX源代码

    AJAX.AJAX实例及AJAX源代码 作者:佚名 来源:CNZZ 2008-1-4 AJAX介绍 AJAX 关键词: JavaScript脚本和可扩展标记语言(XML) WEB浏览器技术 开放式WE ...

  9. 【AJAX】反向Ajax第1部分:Comet介绍

    英文原文:Reverse Ajax, Part 1: Introduction to Comet 在过去的几年中,web开发已经发生了很大的变化.现如今,我们期望的是能够通过web快速.动态地访问应用 ...

  10. $.ajax data怎么处理_不会吧,不会吧,不愧是Ajax,jQuery Ajax啊

    Ajax and jQuery Ajax 我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互.不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春 ...

最新文章

  1. 二维码Data Matrix的解码实现(zxing-cpp)
  2. ubuntu 14.10 使用fcitx输入法
  3. java B2B2C springmvc mybatis多租户电子商城系统(五):熔断监控Hystrix Dashboard和Turbine...
  4. 面向过程的软件设计方法
  5. (转) Java多线程同步与异步
  6. C# 使用公共字段进行窗体传值实例
  7. 【机器视觉】 measure_thresh算子
  8. cadence 旋转快捷键_cadence原理图快捷键
  9. 在数学中10!代表10的阶乘。既代表1*2*3*4....*10; * 现在要求编程求出8!。
  10. 高效大规模图像搜索开源实现
  11. python---windows中的文件路径书写的错误
  12. 音频文件如何转换成文字?
  13. bug引发的惨案,拼多多100元话费只需4毛钱,损失上千亿……
  14. 开关电源设计实例之Boost 篇
  15. 阿里云Centos8 yum报错Failed to synchronize cache for repo ‘BaseOS‘解决方案,通过换文件的方式来解决。
  16. 【Devc++】战斗1.0.2
  17. KingbaseES V8R6 ksql 关闭自动提交
  18. 单片机控制数码管自动显示1-99
  19. 【部分翻译】NSBezierPath的基础知识
  20. Google 搜素技巧分享

热门文章

  1. 4种方案,帮你解决Maven创建项目过慢问题
  2. 程序员,30岁前最好都找大厂,好好做技术
  3. 北漂程序员,何以露宿街头?
  4. 直播技术总结(二)ijkplayer的编译到Android平台并测试解码库
  5. mysql 存储过程 树结构_mysql 树形存储过程
  6. 定时器和promise_如何讲清楚Promise?
  7. getdistance mysql_mysql 自定义函数获取两点间距离
  8. linux-soft-yum源
  9. informix设置数据库默认插入时间_informix常用时间运算和操作方式
  10. edger多组差异性分析_edgeR基因表达差异分析