前面说了ajax，请求需要发到一个接口，也就是一个服务器上，如果服务器不存在就报错了，404或者503错误，后续渲染也执行不了了。现在就是让接口运作起来，有数据返回。
正常情况下接口是后端开发的，前端跟后端挂钩的就是向后端发请求和信息，要后端的数据。
为什么需要搭建个端口和模拟些数据
比如做了个天气页面，前端的部分基本写好了，但是数据是哪里的？城市的变化，数据变，日期变，数据变，都是向后端要的，一开始开发时，前端要先跟后端商量好，同步开发，但是后端的接口开发的晚，前端一开始就需要数据模拟，进行样式功能的开发，不能耽误的。所以，一开始，前端跟后端商量好，接口是什么样的，数据格式什么样的，什么样的数据，还有URL，开发好后到底什么样的，传递的参数是什么，跟后端确认下能不能实现。定好之后，虽然端口没做 出来，但是自己可以模拟数据了。这时候很简单，搭个本地接口，或者线上接口，向这个接口发请求，按规定参数发请求，构造个假数据，这个假数据的格式字段等跟约定好的是一样的。这时候运作，就是我向假地址发请求，要了假数据，就可以用了，开发时用这些数据可以完善页面的功能了，完善好了。后端开发好了，接口好了，把地址改成真的地址，这时候再进行测试。
所以，我们需要搭服务器去模拟数据。
又比如做个网易云音乐，一个页面要展示当前音乐分类，点击进入下个页面，音乐分类的页面点击，进入下个页面音乐列表，，再点击，进入播放页面，再点击进入歌词页面。
需要数据音乐分类接口，列表接口，播放接口，歌词接口。
前端自己可以做，用一些工具或者线上的mock工具，在线上后端写文件造好数据 ，再在JS里发这个接口的请求。这个时候功能就跑起来了，只是数据是死的。这就是前端的工作范围。
接口可以通过mock获取。
服务器
- http-server
- server-mock
- 手写一个
- 线上的mock数据平台
做一些简单的开发测试时，我们的接口可以直接做成在学ajax里的那个hello.json文件一样，就是个文件，向这个文件发请求，要文件的内容。我们把假数据直接放到这个文件里就行了，就可以模拟后端了。
举例网易云音乐，获取分类：
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET','/catelog.json',true) //把catelog.json文件放到跟html文件同级目录下
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 && ((xhr.status>=200 && xhr.status<300)||xhr.status === 304)){
console.log(catelog.jon.responseText)
}else{
xhr.onerror()
}
}
xhr.onerror = function(){
return '404'
}
</script>
用github平台试试：
同级目录下分别建html文件和JSON文件，写好代码，注意生成的路径，生成的网路路径决定了发请求的路径，除了域名不写，其他的后缀都写。
效果如图
与在ajax中在JS.bin中做的效果一样。
文件地址是:https://liuwanyong2017.github.io/mocklianxi/mock.html。
html代码如下,cate.json就不写了：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET','/mocklianxi/cate.json',true) //这里请求的地址不是'/cate.json'了，
//因为github对这个数据生成的URL是https://liuwanyong2017.github.io/mocklianxi/mock.html，
//cate.json文件是同级文件所以去掉域名"https://liuwanyong2017.github.io",
//把mocklianxi/mock.html中的mock.html换成cate.json就行了。
xhr.send()
xhr.onload = function(){
console.log(JSON.parse(xhr.responseText))
}
</script>
</body>
</html>
这里的意思就是，选好平台或者服务器，对应的路径下创建文件和对应的数据，就行了，就这么简单。
网友评论