一窥 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 ...
随机推荐
- centos 7环境下安装部署zookeeper
近一直在看zookeeper的知识,有所收获,打算写些一些关于zookeeper的博客,也当做是自己的复习和笔记. 在上一篇 博客中简单地介绍了centos 7 下如何安装jdk,这一篇将介绍如何在c ...
- 解决IDEA包重叠在一起的问题
问题显现: 解决方法:
- func-spring-boot-starter 匿名函数托管
func-spring-boot-starter 匿名函数托管 GitHub项目路径: https://github.com/yiurhub/func-spring-boot-starter Gite ...
- apollo规划控制视频-12basic motion planning and overview
- C++ | 虚函数产生条件
虚函数产生的条件 能否成为虚函数主要有以下两种判断依据,如果以下两种条件均满足,则具有成为虚函数的条件. 1.虚函数机制为动多态提供支持,而虚函数表中存放着虚函数的地址.因此虚函数必须是可以取地址的函 ...
- Azure DevOps 中 Dapr项目自动部署流程实践
注:本文中主要讨论 .NET6.0项目在 k8s 中运行的 Dapr 的持续集成流程, 但实际上不是Dapr的项目部署到K8s也是相同流程,只是k8s的yaml配置文件有所不同 流程选择 基于 Dap ...
- 基于canvas和web audio实现低配版MikuTap
导言 最近发掘了一个特别happy的网页小游戏--MikuTap.打开之后沉迷了一下午,导致开发工作没做完差点就要删库跑路了,还好boss瞥了我一眼就没下文了.于是第二天我就继续沉迷,随着一阵抽搐,这 ...
- 认识 Function.prototype.bind()
欢迎前端爱好者加入QQ群:112916679 答疑解惑,且可获取更多前端资料! bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个 ...
- java中将科学技术发转为正常数据
import java.text.NumberFormat; public class test { public static void main(String[] args) { double d ...
- CCS基础样式表
一.css样式表 1.样式表分类 1.内联式 <p >This is an apple</p> 2.内嵌样式表 作为一个独立的区域 内嵌在网页里面,必须写在head标签里面 & ...