资讯专栏INFORMATION COLUMN

再也不学AJAX了!(一)AJAX概述

neu / 3317人阅读

摘要:需要注意的是,并不是的替代品,两者各自有其适应的场景。但为了方便交流,我们通常将获取资源的一方称为客户端主要的工具是浏览器,而将派发资源的一方称为服务端又称为服务器。它可以帮助我们为之后概念细节的学习打下良好基础。

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

AJAX概述:主要回答“AJAX是什么”这个问题;

使用AJAX:介绍如何通过JavaScript发送AJAX请求;

跨域获取数据:介绍了与“跨域发送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!喜欢这篇文章吗?别忘了在下方? 点赞让我知道。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90063.html

相关文章

  • 再也不学AJAX!(三)跨域获取资源 ① - 同源策略

    摘要:浏览器的同源策略浏览器所遵守的同源策略是指限制不同源之间执行特定操作。这正是同源策略想要规避的安全隐患。目前为止,你已经充分了解同源策略这个主题。 我们之前提到过,AJAX技术使开发者能够专注于互联网中数据的传输,而不再拘泥于数据传输的载体。通过AJAX技术,我们获取数据的方式变得更加灵活,可控和优雅。 但是AJAX技术并不是一把万能钥匙,互联网中的数据隐私和数据安全(例如你的银行账号...

    godlong_X 评论0 收藏0
  • 再也不学AJAX!(三)跨域获取资源 ③ - WebSocket & postMessag

    摘要:一基于维基百科的定义,是一种在单个连接上进行全双工通讯的协议。让我们看看这个模型的具体实现下面是客户端告知服务端要升级为协议的报头下面是服务端向客户端返回的响应报头想知道这些报头中的字段中代表什么可以参考维基百科下的说明。 让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术。而基于浏览器的同源策略,不同域之间不可以发送AJAX请求。但是在某些情境下,...

    liangzai_cool 评论0 收藏0
  • 再也不学AJAX!(二)使用AJAX

    摘要:随着对象被广泛的接收,也开始着手制定相应的标准来规范其行为。四设置请求头每个请求和响应都会带有相应的头部信息,包含一些与数据,收发者网络环境与状态等相关信息。该方法会令对象实例停止触发事件,并且不再允许访问任何和响应有关的对象属性。 在上一篇文章中我们知道,AJAX是一系列技术的统称。在本篇中我们将更进一步,详细解释如何使用Ajax技术在项目中获取数据。而为了解释清楚,我们首先要搞清楚...

    nemo 评论0 收藏0
  • 再也不学AJAX!(三)跨域获取资源 ② - JSONP & CORS

    摘要:浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全,但是如果当我们需要使用跨域请求资源时,同源策略又会成为开发者的阻碍。我们之前提到过,如果想要绕过浏览器同源策略,实现使用技术跨域获取资源,需要服务端和客户端的协同合作。 浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全,但是如果当我们需要使用AJAX跨域请求资源时,同源策略又会成为开发者的阻碍。在本文中,我们会简单介绍需...

    enda 评论0 收藏0
  • Ajax原理篇就够

    摘要:请求数据流程与领导想找小李汇报一下工作类似。表示从客户端发来的请求在服务器端被正常处理了。表示永久性重定向。该状态码表示请求的资源已被分配了新的,以后应使用资源现在所指的。表示服务器端在执行请求时发生了错误。 前言 AJAX即Asynchronous Javascript And XML,是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发...

    hiYoHoo 评论0 收藏0

发表评论

0条评论

neu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<