一窥 AJAX

本文写于 2020 年 6 月 7 日

AJAX 这个词非常常见,如果使初学者,说不定还会非常害怕这个名字看起来非常高端、非常难的技术。

AJAX,全称 Async JavaScript And XML。它不是 JavaScript 的规范,它只是一个哥们“发明”的缩写,意思就是用 JavaScript 执行异步网络请求

就算是在当年它刚刚出现的时候,也不是一个新技术,而是一个新名字。

技术领域其实经常这样 —— 大家都在用某一个方法去写代码,突然有一天有个哥们儿觉得,要不咱给这个技术做个规范、起个名字吧!然后就有了一个新的技术名词,但其实并不是一个新的技术。

那么我们来思考一下:AJAX 为什么需要存在呢?

我最早自学前端的时候,听人家说:”JavaScript 有个技术叫做 AJAX 非常牛逼!“

我就去学了。

可我那个时候还是一个”小白菜“(很菜的小白),怎么可能看两篇教程就能懂呢?于是很自然的放弃了。

但等我一直学到了 Vue, React 我都没有遇到过 AJAX 。

难道……AJAX 已死?

那肯定是扯淡。

这就是之前说的,AJAX 不是个什么牛逼的新技术,他只是对已有技术的总结,我们已经在 coding 中不知不觉用到了类 AJAX 的代码。

对 Web 来说,运作的原理就是一次 HTTP 请求对应一个页面。

但如果我非要让用户再不刷新的情况下体验新内容呢?我可不可以用 JS 和服务器后端交换数据,但是并不去发送 HTTP 请求,而是用 JS 将新的数据动态写到 HTML 中

这样就完成了不刷新的页面和数据更新。

最早大规模使用 AJAX 的就是大名鼎鼎的 Gmail。Gmail 的页面在首次加载后,剩下的所有数据都依赖于 AJAX 进行更新。

如何使用 AJAX?

用 JavaScript 写 AJAX 并不复杂,唯一需要注意的就是 AJAX 是异步执行的,也就是说需要通过回调函数获得响应。

我们可以通过 XMLHttpRequest 构造函数来创建 XMLHttpRequest 对象来完成 AJAX。

什么?你问我什么是这个 XML...bla.. 对象?在 JS 中,Object() 可以构造对象、String() 可以构造字符串、Array() 可以构造数组。XMLHttpRequest 也只是一个构造某种对象的构造函数罢了。

看代码:

function success(text) {
console.log(`成功啦,${text}`);
} function fail(code) {
console.log(`失败啦,${code}`);
} const request = new XMLHttpRequest(); request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
return success(request.responseText);
} else {
return fail(request.status);
}
}
}; request.open('GET', '/index.html');
request.send();

接下来我们来一点点剖析代码。

首先我们看最后,request.open() 是规定了请求的方式与 URL 参数;最后一行的 request.send() 是真正发出请求;request.onreadystatechange 其实是对请求进行监听。

前两个肯定没有问题,问题就在于第三个,监听什么呢?

监听的是当前的状态。

官方解答:XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。

完美看不懂。

其实本质上就是说,当前你进行到哪一个阶段了。

如果你 new XMLHttpRequest() ,那么这个时候你的 request.readyState 就会变成 0,并且 onreadystatechange 事件还会被触发,

当我们调用了 request.open() 之后, request.readyState 就会变成 1,同时触发 onreadystatechange

以此类推。

状态 描述
0 UNSENT 代理被创建,但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用。
2 HEADERS_RECEIVED send() 方法已经被调用,并且头部和状态已经可获得。
3 LOADING 下载中; responseText 属性已经包含部分数据。
4 DONE 下载操作已完成。

此时,我们就能看懂这段代码了。

我们首先准备一个请求的包包,然后往包包里塞东西,并且每一个动作都有一个对应的数值、切换状态会自动触发一个事件。

也就是说,我们只需要:

  1. 发出请求;
  2. 接受请求;
  3. 判断请求;
  4. 处理请求结果;
  5. 请求结束。

就完成了一个完美的 AJAX。

(完)

一窥 AJAX的更多相关文章

  1. Ajax初窥

    Ajax四个步骤 1. 创建Ajax对象2. 连接到服务器3. 发送请求4. 接收返回值 0x01 创建AJAX对象 方法1(非IE6.0) Var oAjax = new XMLHttpReques ...

  2. ajax学习之post请求步骤

    ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...

  3. jquery ajax 跨域请求【原】

    前台 function sending(){ $.ajax({ type : "get",//jsonp只能get async:true, url : "/webcont ...

  4. JavaScript中一个方法同时发送两个ajax请求问题

    今天在做项目中遇到一个问题,大概是在一个jsp页面同时有一个select下拉搜索条件框和一个Bootstrap表格展示列表.这两个都要通过ajax向后台拿数据,而且要在页面加载时完成.当时的做法是: ...

  5. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  6. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  7. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  8. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  9. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

随机推荐

  1. centos 7环境下安装部署zookeeper

    近一直在看zookeeper的知识,有所收获,打算写些一些关于zookeeper的博客,也当做是自己的复习和笔记. 在上一篇 博客中简单地介绍了centos 7 下如何安装jdk,这一篇将介绍如何在c ...

  2. 解决IDEA包重叠在一起的问题

    问题显现: 解决方法:

  3. func-spring-boot-starter 匿名函数托管

    func-spring-boot-starter 匿名函数托管 GitHub项目路径: https://github.com/yiurhub/func-spring-boot-starter Gite ...

  4. apollo规划控制视频-12basic motion planning and overview

  5. C++ | 虚函数产生条件

    虚函数产生的条件 能否成为虚函数主要有以下两种判断依据,如果以下两种条件均满足,则具有成为虚函数的条件. 1.虚函数机制为动多态提供支持,而虚函数表中存放着虚函数的地址.因此虚函数必须是可以取地址的函 ...

  6. Azure DevOps 中 Dapr项目自动部署流程实践

    注:本文中主要讨论 .NET6.0项目在 k8s 中运行的 Dapr 的持续集成流程, 但实际上不是Dapr的项目部署到K8s也是相同流程,只是k8s的yaml配置文件有所不同 流程选择 基于 Dap ...

  7. 基于canvas和web audio实现低配版MikuTap

    导言 最近发掘了一个特别happy的网页小游戏--MikuTap.打开之后沉迷了一下午,导致开发工作没做完差点就要删库跑路了,还好boss瞥了我一眼就没下文了.于是第二天我就继续沉迷,随着一阵抽搐,这 ...

  8. 认识 Function.prototype.bind()

    欢迎前端爱好者加入QQ群:112916679 答疑解惑,且可获取更多前端资料! bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个 ...

  9. java中将科学技术发转为正常数据

    import java.text.NumberFormat; public class test { public static void main(String[] args) { double d ...

  10. CCS基础样式表

    一.css样式表 1.样式表分类 1.内联式 <p >This is an apple</p> 2.内嵌样式表 作为一个独立的区域 内嵌在网页里面,必须写在head标签里面 & ...