素材巴巴 > 程序开发 >

ajax封装成独立模块,编写独立的Ajax / XHR JavaScript微库

程序开发 2023-09-24 06:47:42

04bc264751bc0a15d4189eaead835afc.png

无论您是使用网站还是应用程序,您都必须面对处理Ajax请求的任务,无论是获取新文档的内容还是获取更新的JSON数据。您一定会使用某种形式的库来掩盖XHR实现的混乱。

有一吨库,还有一些不错的XHR模块可以让你制作简单的XHR。每天使用AngularJS我喜欢使用XHR的语法,而不是他们的$http方法:

3ea71b84796f1fe4f8f128b474e3a83d.png

Angular使它非常简单,美观可读,请注意速记.get()方法。它还附带其他方法,例如.post(),.put()并且

.delete()可以完成您需要的大部分操作。

我想采用这种糖语法方法并编写最简单的跨浏览器XHR模块,所以我将带您通过Atomic.js,这就是结果。

XMLHttpRequest和ActiveXObject

当他们第一次提出通过ActiveXObject实现的Ajax技术时,这一切都开始了(有趣的是)。然后通过XMLHttpRequest(XHR)形成了标准化方法,该方法在几年后形成,现在是我们使用Ajax技术与服务器通信的方式。

在网络上,您可以找到这样的脚本,用于“跨浏览器”的Ajax(源代码):

a6cbfc6fa6dd55f600e22ef88fd3ff83.png

首先,如果你从未见过我称之为“原始Ajax”的东西,在所有的库和包装器下面,你可能想知道到底发生了什么。这确实是一个丑陋的景象。

因此,除用于浏览简单的解决方案,我偶然发现了一个GitHub的要点从杰德·施密特,其中一个惊人的谈话慢慢地在一个非常简洁的支持XHR实例重构杰德的初始刺伤。

什么开始(注释版本):

e927b7b59c6402fbbf6d54d2dd5ce12d.png

结束了一个非常小的版本:

790c76d48d240d84c8ccaad325095185.png

我不了解你,但这很神奇 - 我喜欢它。它根据浏览器中可用的Object进行构造函数内的条件调用。显然你不需要上面实现的循环Jed,你可以只使用上面的参数,它适用于IE5.5 +。太棒了。

所以我想我会从这个伟大的实现开始作为atomic.js的基础。

以上所有内容都为我提供了一个受支持的实例,但是没有与服务器进行实际通信,XHR还有更多的信息。以下是使用GET方法并在此示例中简化后续步骤的方法:

9a77b5b666c31e9da495487a71b1e18d.png

在内部onreadystatechange,我们需要注意readyState我们需要的东西。这是readyStates列表及其含义:

0:请求未初始化1:服务器连接已建立2:请求已收到3:处理请求4:请求已完成且响应已准备就绪所以,我们需要检查它是否正常,我们寻找4:

171b4ee05d99f1ef2acc5d42254dac59.png

我们希望接下来获得200状态代码,这意味着一切都没问题。任何其他东西可能是错误的,或从服务器中丢失或未经过身份验证。但为简单起见,我们都很好:

2def7203bd00c9069326a54c010badde.png

那么什么时候失败呢?我们可以放一个else函数:

460897630a0ceb219171ef4fec7ad037.png

现在都在一起了:

8f5bdebb103e341efb2aa03a84b20ca1.png

这几乎是使用XHR的基础知识!

保持重写非常复杂,这就是为什么我想把它包装在一个模块中以便简单重用。喜欢Angular语法,我想过做这样的事情:

befe7b6cc83103c06aaac435d2038f99.png

看起来熟悉?;)

因此,根据我们已经获得的内容,我为模块创建了一些链式方法,在可用时添加一些自动JSON解析,最后得到以下内容(即atomic.js v1.0.0):

2a04ba77e9136b218d9f2989696657a1.png

使用atomic.js就像任何其他库一样简单,除了它有一个非常易读的语法,它不到1KB,并且在功能上远远超过它的重量。

举报/反馈


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。