Ajax工作原理

面试第四天

ajax的工作原理

1. 如果请求是get

// 创建xhr对象
var xhr = new XMLHttpRequest();
// 设置请求方式和路径
xhr.open('GET',请求路径);
// 发送请求
xhr.send(null);
// 注册事件，获取响应内容
xhr.onreadystatechange = function () {
    if(this.readystate === 4) {
        console.log(this.responseText)
    }
}

2. 如果请求的事post

//创建xhr对象
var xhr = new XMLHttpRequest();
//设置请求方式和请求路径
xhr.open('POST',请求路径)
// 当post请求的时候，设置请求头
// Content-type 告诉服务器发送过去的请求体的格式
xhr.setRequestHeader('Content-Type','application/json');
//发送请求体 
xhr.send(请求体)
// 注册事件，接受响应内容
xhr.onreadystatechange = function () {
    if(this.readystate === 4) {
        console.log(this.reponseText)
    }
}

ajax 的最大特点是

Ajax可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验，按需获取数据，节约带宽资源

post 和 get 的区别

GET: 一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符；


POST: 一般用于修改服务器上的资源，对所发的信息没有限制在以下情况中，使用POST请求：

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST没有数据量限制）
3. 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

同步和异步的区别

同步：阻塞的

浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面会白屏），直到服务器返回数据，浏览
器才能显示页面


异步：非阻塞的

浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回
数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

http常见的状态码

1. 200 – 成功，并返回数据
2. 301 – 永久移动，重定向
3. 302 – 临时移动，可使用原有的URL
4. 400 – 请求语法错误
5. 401 – 需要身份验证
6. 403 – 拒绝请求
7. 404 – 资源不存在
8. 500 – 服务器返回错误

浏览器请求与响应过程

1. 对输入的URL进行DNS域名解析（找出对应的IP地址）
2. 通过IP地址，建立TCP请求（三次握手协议）
3. 发送HTTP请求与响应
4. 解析渲染服务端响应数据
5. 断开TCP链接