HTTP协议
(1).常见的请求方法
HTTP 1.0
- 1.GET：从指定的资源请求数据
- 2.POST：向指定的资源提交要被处理的数据，例如
- 1.提交表单
- 2.将消息发布到公告板，新闻组，邮件列表，博客或类似的文章组；
- 3.HEAD
- 1.类似于get请求，只不过返回的响应中没有具体的内容，只有头部
- 2.只请求资源的首部
- 3.检查超链接的有效性
- 4.检查网页是否被修改
HTTP1.1
- 1.PUT：替换或创建指定资源
- 2.DELETE：对指定资源进行删除
HTTP2.0
-
1.OPTIONS： 用于获取目的资源所支持的通信选项，比如说服务器支持的请求方式等等。
-
2.TRACE：实现沿通向目标资源的路径的消息环回（loop-back）测试 ，提供了一种实用的 debug 机制。
-
3.CONNECT
所有通用服务器必须支持GET和HEAD方法。所有其他方法都是可选的。
- 1.安全性：在此规范定义的请求方法中，GET，HEAD，OPTIONS和TRACE方法被定义为安全的
- 2.幂等性：PUT，DELETE和安全Method是幂等的。
- 3.可缓存性：GET, HEAD, and POST。但大多数是只实现GET和HEAD可缓存
- 1.表示浏览器是会自动缓存的，以应用于后续请求。除非response中有相关策略
(2).GET 和 POST 的区别
-
1.get参数通过url传递，post放在request body中。
-
2.get请求在url中传递的参数是有长度限制的，而post没有。
-
3.get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
-
4.get请求只能进行url编码，而post支持多种编码方式
-
5.get请求会浏览器主动cache，而post支持多种编码方式。
-
6.get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
-
7.GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
(3).HTTP 状态码
- 1xx (Informational): 收到请求，正在处理
- 2xx (Successful): 该请求已成功收到，理解并接受
- 3xx (Redirection): 重定向
- 4xx (Client Error): 该请求包含错误的语法或不能为完成
- 5xx (Server Error): 服务器错误
(4).301 和 302 有什么具体区别
-
301：永久移动，请求的网页已永久移动到新的位置，服务器返回此响应，会自动将请求者转到新位置
-
302：历史移动，服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来继续以后的请求。
MVVM和MVC
-
MVC: MVC是应用最广泛的软件架构之一,一般
MVC分为:Model(模型),View(视图),Controller(控制器)。 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。
1.View传送指令到Controller。
2.Controller完成业务逻辑后改变Model状态。
3.Model将新的数据发送至View,用户得到反馈。
-
MVVM:
MVVM是把MVC中的Controller改变成了ViewModel。View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示,通过数据来显示视图层。
2.MVVM模式的优点以及与MVC模式的区别
-
MVVM模式的优点:
- 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
- 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
- 独立开发: 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。
-
MVVM和MVC的区别:
- MVC中Controller演变成MVVM中的ViewModel
- MVVM通过数据来显示视图层而不是节点操作
- MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验
ajax
(1).实现一个Ajax
var xhr = new XMLHttpRequest()
// 必须在调用 open()之前指定 onreadystatechange 事件处理程序才能确保跨浏览器兼容性
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status ==== 304) {
console.log(xhr.responseText)
} else {
console.log('Error:' + xhr.status)
}
}
}
// 第三个参数表示异步发送请求
xhr.open('get', '/api/getSth', true)
// 参数为作为请求主体发送的数据
xhr.send(null)
(2).Ajax状态
0--未初始化。尚未调用 open()方法。
1--启动。已经调用 open()方法，但尚未调用 send()方法。
2--发送。已经调用 send()方法，但尚未接收到响应。
3--接收。已经接收到部分响应数据。
4--完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
(3).将原生的 ajax 封装成 promise
const ajax = (url, method, async, data) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
// 已经接收到全部响应数据，而且已经可以在客户端使用了
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText))
} else if (xhr.status > 400) {
reject('发生错误')
}
}
}
xhr.open(url, method, async)
xhr.send(data || null)
})
}
有补充或者有更通俗易懂的小伙伴可以私信或者加QQ群：163958730（已满） 145454260 一起讨论~
网友评论