【Ajax】前端工程师的常备技能之一

百度百科的介绍： web数据交换方式，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

 简单来讲就是Ajax能够实现无需重新加载整个网页，就可以更新部分网页内容。

---

优点：

1. 可以无需刷新页面与服务器端进行通信；
2. 允许你根据用户事件（如点击等）来更新部分页面内容。

缺点：

1. 没有浏览历史不能回退；
2. 存在跨域问题；
3. 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 的每个变化。