ajax req.getsession() 获取不到_零基础通过Ajax实现网易云音乐数据交互(4)

数据交互，应该是一个老生常谈的问题了，可是十几年过去了，这个简单却又重要的问题，依然是很多人面试和实际工作中的心病。

数据交互在前端面试过程中，是一定会考的知识点。

当然某些知名招聘网站也是这么说的，大家看到这些字样，你面试前就要多翻翻书，多做做准备，别把送分题变成送命题。

从我对某个招聘网站的不完全统计，超过60%的招聘需求都对ajax有明确的需求。既然ajax简单，还有用，这不明显送分题嘛，怎么就变成送命题了呢？

原因两个，第一，是这个问题单纯会js搞不定。

这个不像轮播图，你自己折腾两天就明白了，而ajax和后台的关系就像情侣，想实践恋爱知识，前提是你得有一个女朋友，没有实际的数据接口和后台以及服务器知识支持，很难练习。

第二，很多人听到ajax就觉得复杂，还没学先打退堂鼓了。

这就好比为啥女神最后跟了普通人，而不是男神，因为人家敢表白啊，你大部分方面都合适，就因为两方面的原因（后台和服务器）就不敢表白，觉得自己成功不了，难道等着女神主动靠近自己么？

好了，现在我们就开始学习。

1.我们首先封装一个ajax库，然后我们用这个库直接请求网易云音乐歌词，最后做DOM实现。

ajax数据交互过程，面试必考，其实就四步，封装更是简单的让人发指，不墨迹直接拖库。

​
    

面试如果用嘴说的话，会绑架就会说ajax流程，写的话上面35行代码就完事。重点看注释。一切尽在无言中，我实在不知道该解释什么了，注意面试的时候含情脉脉的盯着面试小姐姐（也可能是小哥哥）然后勇敢的说出你心中的话就好了，如果是笔试，别写的跟鬼画符似的让中文系博士生都不知道你写的是啥就行。

2.拿起来就用，这里我采用了一个网易云音乐接口，https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi 感谢Binaryify，我是站了巨人的肩膀上，所以我才看的那么远。他写这个接口，酸甜可口，老少皆宜。不过大家要尊重网易云的版权，仅供大家学习使用。

//获取播放列表

获取播放列表，紧接着获取歌词

function 

剩下的事儿跟ajax没什么关系了，也就是拿到json数据怼DOM了，这里强调一点歌词，其实就是：

[

这么一个文件，通过正则，

var 

把每一句歌词搞出来 ，有同学说老师我不会写正则，我只说一句你就清楚了

这样合起来就可以把时间挑出来了，时间挑出来了，剩下的不就是歌词了吗，这里注意不要去学正则，没有实际场景的情况下去学正则，只会让你难受，模模糊糊的。

用到了去学，看不明白查一下，看人家怎么实现的，你就清楚了。比如写邮箱正则你不会，你可以去查啊，然后分析人家怎么正则的，带着问题去学，你用不到的没必要会。正确的学习方法要比假装的努力更重要。

这里最后说一下歌词滚动怎么搞，

//歌词滚动

其实就是判断当前的时间在不在对应歌词的时间段，不在就滚。

最后一点问题，上面这样写ajax是简单易懂的，但是简化了一个流程和需求，大家想，网易云音乐播放器是根据你登录名确定你的歌单的，根据你的歌单列表确定每一首歌的url和歌词的。那么如果直接顺序写。

getUser

这样写一定出问题，因为如果网络慢用户名没回来，你是没法根据userid 获取歌单的。有同学说老师好办，回调函数啊。

getUser

这就会有很严重的问题，整个文学名词儿叫，回调地狱。

说白了就是嵌套层数太多，最后乱七八糟的不好维护。咋整呢？好办，要是这样多好：

getUser

变成一条船上的蚂蚱,前面保证给后面想要的东西多好啊，有这么好的事儿吗？

有，这就是一个半吊子的解决方案，传说中的Promise。

所以记住脱离了场景讲技术，都是耍流氓，新技术的产生一定是为了解决问题服务的。

具体怎么操作，且听下回分解。