一窥 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. redis持久存储RDB和AOF的区别及优缺点

    1.前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能, ...

  2. 学习zabbix(九)

    一.Zabbix环境准备 [root@linux-node1 ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) [roo ...

  3. 《剑指offer》面试题4:替换空格

    面试题4:替换空格 题目:请实现一个函数,把字符串中的每个空格替换成"%20",例如输入"We are happy.",则输出"we%20are%20 ...

  4. git总是需要输入用户名密码问题解决

    解决办法: git bash进入你的项目目录,输入: git config --global credential.helper store 然后你会在你本地生成一个文本,上边记录你的账号和密码.当然 ...

  5. 使用 ssm 实现登录日志记录

    使用 ssm 实现登录日志记录 学习总结 一.基础准备 1. 实现效果 2. 数据表 2.1 登陆日志信息表 2.3 员工表 二.代码实现 1. SysLogLogin 实体类 2. LogAspec ...

  6. 小程序滚动事件之头部渐隐渐现demo

    效果图: ==>  代码: //test1.wxml <view class='header' style="opacity:{{opacityStyle}}" hid ...

  7. js获取url查询字符串参数

    最近看js高级程序设计 对其中查询字符串参数的获得重新写了,当传递一个完整的URL的时候对查询字符串的提取 function getQueryArgs(){ var qs = (location.se ...

  8. AcWing 1050. 鸣人的影分身

    题目链接 题目描述: 在火影忍者的世界里,令敌人捉摸不透是非常关键的. 我们的主角漩涡鸣人所拥有的一个招数--多重影分身之术--就是一个很好的例子. 影分身是由鸣人身体的查克拉能量制造的,使用的查克拉 ...

  9. FastAPI(七十三)实战开发《在线课程学习系统》接口开发-- 回复留言

    之前文章分享FastAPI(七十二)实战开发<在线课程学习系统>接口开发-- 留言列表开发,这次我们分享如何回复留言 按照惯例,我们还是去分析这里面的逻辑. 1.判断用户是否登录 2.用户 ...

  10. python---概述

    python的主要应用领域 云计算:云计算的最火的语言,典型应用OpenStack. web开发:众多优秀的web框架,典型地有Django,众多大型网站也是python开发,比如YouTube.豆瓣 ...