Ajax网络请求

一.概念

是一种创建交互式，由js向服务器发送http异步请求的方法。

二.Ajax请求的步骤

1. 创建xhr对象
2. 监听状态
3. 发送http请求
4. 接受响应数据
5. 渲染页面

三.通过Ajax发送get/post请求

// 1. 创建xhr对象
var xhr=new XMLHttpRequest();

// 2. 监听状态
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){    // 状态4表示服务器已经接受到了请求，响应完成
        if(xhr.status===200){  // 客户端已经做好了接收后台的数据的准备
            4. // 接受响应数据
            var success=()=>{
                const data = JSON.parse(xhr.responseText)  // 将一个json数据格式转化为js数据格式
            }
        }
    }
}

// 3. 发送get请求
xhr.open('get','url?xxx&xxx',true)  // true表示异步
xhr.send(null)

// 3. 发送post请求
xhr.open('post','url',true)
// 构建post表单
var datas=new FormData()
// 往表单里面添加数据
datas.append('user','输入的用户名')
datas.append('passward','输入的密码')
xhr.send(datas)

四.Ajax存在问题

1. 主要是缓存问题，如果是get请求是默认缓存的

• 解决办法：实时改变url，在url中添加时间戳函数（+new Date().getTime()）

2. 不安全：暴露了太多的与服务器交互的细节
3. 不容易调试
4. 对搜索引擎不友好
5. 不支持浏览器的back按钮

五.Ajax的优点

1. 页面无刷新，用户体验良好
2. 使用异步方式与服务器通信，响应良好
3. 能够被广泛的使用，不用下载插件等繁琐工具
4. 方便快捷，按需获取，减少冗余请求而造成的服务器压力

六.xhr.readyState的五种状态

• 0：请求未初始化
• 1：请求已经建立，但是还没有发送
• 2：请求已经发送，正在处理中
• 3：请求在处理，还没有处理完
• 4：服务器响应完成