前言：之前做了一个vue移动端的小案例，在这个案例之前呢，我是只会使用axios来在前端进行网络请求，对计算机网络知识也是什么都不懂，这时问题就出现了，我在提交用户选择的表单数据的时候，先是出现了跨域请求，然后又报错500，搞得我手足无措的，所以这两天赶紧学习一下ajax来充充电。

---

一.Ajax技术的核心

XMLHttpRequest对象（简称XHR）

二.Ajax技术的优点：

1.无需刷新页面而与服务器进行通讯

2.允许根据用户事件更新部分内容

三.Ajax技术的缺点

1.没有浏览历史，不能回退

2.存在跨域问题

3.SEO不友好

四.XMLHttpRequest对象

原生JS创建XHR对象（兼容ie7一下版本）

// 兼容IE早期版本，建立一个XMLHttpRequest对象
     function createXHR() {
         if (typeof XMLHttpRequest != "undefined") {
             return new XMLHttpRequest();
         } else if (typeof ActiveXObject != "undefined") {
             if (typeof arguments.callee.activeXString != "string") {
                 var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                             "MSXML2.XMLHttp"],
                         i, len;
 
                 for (i = 0, len = versions.length; i < len; i++) {
                     try {
                         new ActiveXObject(versions[i]);
                         arguments.callee.activeXString = versions[i];
                         break;
                     } catch (ex) {
                         //可放入提示文字
                     }
                 }
             }
 
             return new ActiveXObject(arguments.callee.activeXString);
         } else {
             // 没有XHR对象可用，抛出错误
             throw new Error("No XHR object available.");
         }
     }

XHR的用法

步骤

1.创建XHR变量

let http = new XMLHttpRequest();

2.使用open方法配置

open方法接受三个参数：要发送的请求类型（GET、POST等），请求的URL，表示是否异步发送请求的布尔值

http.open('GET' , '/api/test.php?name=wang' , true);

3.通过send方法提交

http.send();

XHR对象的属性

在收到响应之后，响应的数据会自动填充XHR对象

1.responseText：作为响应主体被返回的文本

2.responseXML：如果响应的内容类型是’text/xml’或者’application/xml’,这个属性中将保存包含着响应数据的HTTP状态

3.status：HTTP状态的说明

4.statusText：HTTP状态说明

XHR的readyState属性

0：未初始化。尚未调用open方法

1：启动。已经调用open方法，尚未调用send方法

2：发送。已经调用send方法，但尚未接受数据

3：接收。已经接收到部分响应数据

4：完成。已经接受到全部响应数据，而且已经可以在客户端使用

取消网络请求

调用abort()方法来取消异步请求，调用这个方法之后xhr对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性，在终止请求之后，还应该对XHR对象进行解除引用操作。由于内存原因，不建议重用XHR对象

五.状态码详解

状态码	信息
200	表示响应结果请求被正常处理了
204	表示请求资源成功，但是没有资源可以返回
206	表示请求资源的某一部分，响应中包含content-range
301	表示资源的访问路径(URL)被变更
302	表示请求的资源已经在其他位置了，但是默认你已经知道了
303	表示请求的资源已经在其他位置了，应使用 GET 方法定向获取请求的资源
304	表示资源已经请求到到了，但是未能按照正常的方式请求
307	临时重定向
400	请求报文中存在语法错误，需要修改请求内容重新请求
401	需要通过http认证，若之前已进行过 1 次请求，则表示用 户认证失败
403	服务器拒绝你的的访问
404	服务器上没有请求的资源，可能是地址写错了……
405	客户端的请求方法被服务器禁止
500	服务器资源发生了错误
503	服务器无法请求
总结	2xx为请求成功，3xx为URL被改变了，4xx客户端错误，5xx服务器错误