1024程序员日搬运一篇之前在掘金发的文章,算是自己前端学习路上一个时间节点吧——大致结束了基础知识的学习 & 开始学习真实项目开发的内容~
本文demo源代码与具体资源位于 github仓库-正在起步阶段的前端知识库中的JS-demos,其中记录了一名前端初学者的学习日记🤔&学习之路点点滴滴的记录(练手demo🧑💻,重要知识点🧐)
欢迎大家来贡献更多“前端er必会知识点”🧑🎓/分享更多有意义的demo❤️!(请给这个年幼的小仓库更丰富的内容吧🥺🥺🥺)
学习Ajax/Fetch请求&Promise
适合准备学习Ajax,对promise有一定了解(没有也可以啦~)的小伙伴用于入门请求的发送&接收(为了简化过程,聚焦于客户端的编码,我们使用.txt文件作为数据库,不用考虑服务端的编码)
.html的运行方式分为
local 从本地文件运行示例(浏览器不会运行XHR请求,因为安全限制)
- They feature asynchronous requests(当代码有异步请求的特性时再从本地打开)浏览器不会运行异步请求
server 在本地web服务器上运行
- 为了解决异步请求,我们需要通过在本地web服务器上运行ajax-billSu.html来测试异步请求的发送成功与否
我们将递进地完成这两块的内容~
本DEMO整理自MDN官方文档教程
那么接下来,让我们看看使用XMLHttpRequest
和 Fetch如何处理请求吧!😄
从本地文件运行示例
因为安全限制,所以如果从本地文件运行实例时,一些浏览器将不会运行XHR请求~
之后我们需要通过在本地服务器上运行它来测试这个示例
我们将从几个不同的文本文件中请求数据,并使用它们来填充内容区域。
这一系列文件将作为我们的假数据库; 在真正的应用程序中,我们更可能使用服务器端语言(如PHP,Python或Node)从数据库请求我们的数据。 不过,本例中我们要保持简单,并专注于客户端部分。
官方提示
可以点进去MDN看一下哦~
在这个例子中,我们将通过XHR在下拉菜单中选择一首诗,并加载另一首诗
完成步骤
基本的Ajax请求
注意 如果只是从本地文件运行示例, 一些浏览器(包括Chrome)将不会运行XHR请求。这是因为安全限制~ 为了解决这个问题,我们需要通过在本地web服务器上运行它来测试这个示例
这里因为安全限制的问题,其实是没有效果的XD
// 注意 如果只是从本地文件运行示例,
// 一些浏览器(包括Chrome)将不会运行XHR请求。这是因为安全限制~
// 为了解决这个问题,我们需要通过在本地web服务器上运行它来测试这个示例
const verseChoose = document.querySelector('select');
const poemDisplay = document.querySelector('pre');
verseChoose.onChange = function(){
const verse = verseChoose.value;// 获取到的诗 赋给verse变量
updateDisplay(verse);// 获取到的诗传给函数 目的:将Verse 1 转换为verse.txt
}
function updateDisplay(verse){
// 将Verse 1 转换为verse.txt
verse = verse.replace(" ", "");// 将空格去掉(Web服务器的文件名无空格)
verse = verse.toLowerCase();
let url = verse + '.txt';
// 开始创建XHR请求 —— AJAX操作中的核心
let request = new XMLHttpRequest()