持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情
- JSON Server
- 平时我们也会自己写一些数据，通过Ajax获取。所以要在本地搭建一个临时服务器
- json-server是一个Node模块，运行Express服务器，可以指定一个json文件作为api的数据源
- 也就是说，我们可以使用它快速的搭建一个web服务器
- 网址：github.com/typicode/js…
- GET请求
- 通常在一次GET请求过程中，参数传递都是通过URL地址中的“？”参数传递
- 一般在GET请求中，无需设置请求头
- 无需设置响应体，可以传null或者干脆不传
- POST请求
- POST请求过程中，都是采用请求体承载需要提交的数据
- 需要设置请求头中的Content-Type，以便于服务端接收数据
- 需要提交到服务端的数据可以通过send方法的参数传递
- sent方法中设置数据的三种方式
- 处理响应数据渲染
- 客户端中拿到请求的数据过后最常见的就是把这些数据呈现到界面上
- 如果数据结构简单，可以直接通过字符串操作（拼接）的方式
- 但如果数据过于复杂，字符串拼接维护成本太大，不推荐
- 可以使用模板引擎或者ES6提供的模板字符串
- 封装Ajax库
- 自己封装一个Ajax函数
- 这里主要是为了了解封装的过程，一般情况在开发中都是使用第三方提供的Ajax库，因为它们可能更加严谨
- 为了在后续的开发过程中可以更方便的使用这套API，一般的做法都是将其封装到一个函数中以便调用
- 自己封装一个Ajax函数
<body>
<script>
// 封装自己的Ajax函数
/**
* 参数1: {string} method 请求方法
* 参数2: {string} url 请求地址
* 参数3: {Object} params 请求参数
* 参数4: {function} done 请求完成后执行的回调函数
*/
function ajax(method, url, params, done) {
// 统一将方法中的字母转大写,便于后面判断
method = method.toUpperCase()
// ie6的兼容书写
let xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
// 将对象格式的参数转为urlencoded格式(就是key = value)
let arr = []
for(let i in params){
arr.push(i + "=" + params[i])
}
let str = arr.join('&')
// 判断是否是GET方法,需要更改url的值
if(method == "GET"){
url += "?" + str
}
// 创建打开链接
xhr.open(method,url)
let data = null
// 判断是否是非GET方法,并设置请求头
if(method !== "GET"){
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
data = str
}
xhr.send(data)
// 执行回调函数
xhr.onreadystatechange = function () {
if(this.readyState != 4) return
done(JSON.parse(this.responseText))
}
}
ajax("GET","http://localhost:3000/user",{"id": 1},function (data) {
console.log(data)
})
ajax("POST","http://localhost:3000/user",{"name": "john", "age": 19, "class": 2},function (data) {
console.log(data)
})
</script>
</body>
