一窥 AJAX
一窥 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 | 下载操作已完成。 |
此时,我们就能看懂这段代码了。
我们首先准备一个请求的包包,然后往包包里塞东西,并且每一个动作都有一个对应的数值、切换状态会自动触发一个事件。
也就是说,我们只需要:
- 发出请求;
- 接受请求;
- 判断请求;
- 处理请求结果;
- 请求结束。
就完成了一个完美的 AJAX。
(完)
一窥 AJAX的更多相关文章
- Ajax初窥
Ajax四个步骤 1. 创建Ajax对象2. 连接到服务器3. 发送请求4. 接收返回值 0x01 创建AJAX对象 方法1(非IE6.0) Var oAjax = new XMLHttpReques ...
- ajax学习之post请求步骤
ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...
- jquery ajax 跨域请求【原】
前台 function sending(){ $.ajax({ type : "get",//jsonp只能get async:true, url : "/webcont ...
- JavaScript中一个方法同时发送两个ajax请求问题
今天在做项目中遇到一个问题,大概是在一个jsp页面同时有一个select下拉搜索条件框和一个Bootstrap表格展示列表.这两个都要通过ajax向后台拿数据,而且要在页面加载时完成.当时的做法是: ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- 一个粗心的Bug,JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
随机推荐
- redis持久存储RDB和AOF的区别及优缺点
1.前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能, ...
- 学习zabbix(九)
一.Zabbix环境准备 [root@linux-node1 ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) [roo ...
- 《剑指offer》面试题4:替换空格
面试题4:替换空格 题目:请实现一个函数,把字符串中的每个空格替换成"%20",例如输入"We are happy.",则输出"we%20are%20 ...
- git总是需要输入用户名密码问题解决
解决办法: git bash进入你的项目目录,输入: git config --global credential.helper store 然后你会在你本地生成一个文本,上边记录你的账号和密码.当然 ...
- 使用 ssm 实现登录日志记录
使用 ssm 实现登录日志记录 学习总结 一.基础准备 1. 实现效果 2. 数据表 2.1 登陆日志信息表 2.3 员工表 二.代码实现 1. SysLogLogin 实体类 2. LogAspec ...
- 小程序滚动事件之头部渐隐渐现demo
效果图: ==> 代码: //test1.wxml <view class='header' style="opacity:{{opacityStyle}}" hid ...
- js获取url查询字符串参数
最近看js高级程序设计 对其中查询字符串参数的获得重新写了,当传递一个完整的URL的时候对查询字符串的提取 function getQueryArgs(){ var qs = (location.se ...
- AcWing 1050. 鸣人的影分身
题目链接 题目描述: 在火影忍者的世界里,令敌人捉摸不透是非常关键的. 我们的主角漩涡鸣人所拥有的一个招数--多重影分身之术--就是一个很好的例子. 影分身是由鸣人身体的查克拉能量制造的,使用的查克拉 ...
- FastAPI(七十三)实战开发《在线课程学习系统》接口开发-- 回复留言
之前文章分享FastAPI(七十二)实战开发<在线课程学习系统>接口开发-- 留言列表开发,这次我们分享如何回复留言 按照惯例,我们还是去分析这里面的逻辑. 1.判断用户是否登录 2.用户 ...
- python---概述
python的主要应用领域 云计算:云计算的最火的语言,典型应用OpenStack. web开发:众多优秀的web框架,典型地有Django,众多大型网站也是python开发,比如YouTube.豆瓣 ...