百度百科的介绍: web数据交换方式,使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
简单来讲就是Ajax能够实现无需重新加载整个网页,就可以更新部分网页内容。
优点:
- 可以无需刷新页面与服务器端进行通信;
- 允许你根据用户事件(如点击等)来更新部分页面内容。
缺点:
- 没有浏览历史不能回退;
- 存在跨域问题;
- SEO不友好。
HTTP超文本传送协议,是万维网上能够可靠地交换文件(包括文本、声音、图像等多媒体文件)的重要基础。
HTTP有两类报文:
(1)请求报文:从客户向服务器发送请求报文;
(2)响应报文:从服务器到客户的回答;
都是由开始行(用于区分是请求报文还是响应报文)和首部行(说明浏览器、服务器或报文主体的一些信息)以及实体主体组成。
请求报文中的开始行叫请求行 ,响应报文中的开始行叫状态行。
- 请求行:方法 请求资源的URL HTTP的版本
- 状态行:HTTP的版本 状态码 解释状态码的简单短语
HTTP请求报文的例子:
GET /dir/index.html HTTP/1.1 //请求行
Host: www.aaa.com //首部行的开始,给出主机的域名
Connection: close //告诉服务器发送完请求的文档后就可以释放连接
User=Agent: Chrome 83 //用户代理使用谷歌
//请求报文最后还有一个空行
响应报文中的状态行的状态码主要包括:“1xx”(消息)、“2xx”(成功)、“3xx”(重定向)、“4xx”(请求错误)和“5xx”或“6xx”(服务器错误)五种不同类型。
常用的有:200 OK (服务器成功返回网页), 401 Unauthorized (未授权), 403 Forbidden (禁止), 404 Not Found, 500 Internal Serve Error (服务器内部错误)。
Ajax工作原理
//吐槽一句。。。这个CSDN有点问题。。。这一部分我重写三次了。。。
① 创建XMLHttpRequest对象
const xhr = new XMLHttpReuest();
② 请求响应操作
//初始化
xhr.open('GET','http://localhost:8080');
//发送
xhr.send();
open(method,url,async) 三个参数:
method | 请求的方法类型,GET/POST |
url | 文件在服务器的位置 |
async | true(异步)/ false(同步) |
GET 还是 POST?
与POST相比,GET更简单也更快,并且在大部分情况下都能用。但在以下情况中,请使用 POST请求:
- 不愿使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
onreadystatechange 事件
readyState是XMLHttpRequest对象的属性,有四种状态。每当它发生变化时,都会触发onreadystatechange事件。
- 0:请求未初始化;
- 1:open调用完毕,服务器已建立连接;
- 2:send调用完毕,请求已接收;
- 3:请求处理中,服务端返回部分结果;
- 4:请求已完成,服务端返回全部结果。
xhr.onreadystatechange=function(){
//请求完成,服务器返回所有结果
if(xhr.readyState===4){
//状态码响应成功的范围,2xx
if(xhr.statue>=200&&xhr.status<300){
console.log(xhr.status,xhr.statusText);//状态码,状态码的解释
console.log(xhr.getAllResponseHeaders());//所有的首部(响应头)
console.log(xhr.response);//主体(响应体)
}
}
}
注意: onreadystatechange 事件被触发 4 次(0 - 4), 分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。