// 1 创建AJAX 实例对象 let xhr = new XMLHttpRequest;
// 2 打开 URL(发送请求前的一些处理) xhr.open('get','./data.json',true);
// 3 监听 ajax 状态信息 xhr.onreadystatechange = function(){ // xhr.readyState AJAX 状态 0 - 4 // xhr.status xhr.statusText 服务器返回的网络状态码 2/3/4/5
// if(xhr.readyState === 4 && xhr.status === 200){ // console.log(xhr.response); // }
if(xhr.status === 200){ let n = xhr.readyState; if(n === 2){ console.log('响应头信息先回来:',xhr.getAllResponseHeaders()); }else if( n === 4){ console.log('响应主体信息回来',xhr.responseText); console.log('响应主体信息回来',JSON.parse(xhr.responseText)); } }
}
// 4 发送请求(请求主体的信息会基于 send 的时候发送给服务器) xhr.send(null);
/** * 请求方式 * GET get,delete,head,options * post post/put * */
/*** * ajax 的状态 xhr.readyState * * DONE: 4 响应主体信息返回 * LOADING: 3 响应主体正在加载返回中 * HEADERS_RECEIVED: 2 服务器已返回响应头的信息 * OPENED: 1 已打开 执行了 OPEN * UNSENT: 0 未发送 开始创建 Xhr,默认状态就是0 * */
/** * HTTP 网络状态码 xhr.status * * 以2开始的 200 服务正常返回数据(客户端向服务器发送请求, * 服务器正常把数据给客户端了,但是数据是否为想要的就不一定了) * * 以3开始的 * 301 永久重定向(一般用于域名的转移) * 302/307 临时转移或者临时重定向(一般用于服务器的 负载均衡) * 304 读取的是协商缓存的数据 * * 以4开始的 * 400 请求参数有误 * 401 无权访问 * 403 服务器拒绝执行 * 404 地址错误 * * 以5开始的 * 500 服务器发生未知错误 * 503 超负荷 [一般是服务器的问题] * * 项目中所谓的请求失败 分为两种, * 网络层面: 服务器没有返回任何的信息(或者和服务器都没有连接上)[根据不同的状态码,可以分析不同的原因] * 业务层面: 已经从服务器获取数据,只不过获取的数据不符合业务逻辑需要的,也算是 失败 */