探究原生JS-XMLHttpRequest-小黄人的请求

一.了解小黄人

使用jQuery来进行请求是比较简单的，既然jQuery是一个基于原生JS的JS库，那么jQuery中的Ajax也应该是一个封装出来的函数，是的，它的原型就是XMLHttpRequest（xhr）我们喜欢称呼它为：小黄人，它是浏览器给我们提供的JavaScript对象，通过它我们可以去请求服务器上的数据资源，Ajax函数就是基于小黄人对象封装出来的，我们看这样一张图来理解一下它们之间的关系：

所以我们原生JS也可以使用xhr对象发起Ajax请求，只不过复杂一点，不过这也正常，要是不复杂，怎么会用JS库来封装它呢，这样说来jQuery封装Ajax也是业余的，只不过jQuery过于强大，以至于很多人不想再去使用其他的JS库，我们其实可以使用Axios来进行请求，Axios是专注于网络数据请求的 JS库，相比来说更加的专业，在我的专栏里有对于Axios的入门介绍，大家有兴趣可以看一下

---

二.发起请求1（get）

我们这里来称述一下使用xhr对象发起GET请求的步骤：

1.我们new一个XMLHttpRequeat对象

2.调用xhr.open()函数

3.调用xhr.send()函数

4.监听xhr对象的请求状态（readyState）

5.监听xhr对象于服务器的响应状态

我们在使用代码写案例之前，先了解一下这5个步骤里的知识点：

第一个步骤就不用多说了，只是new一个XMLHttpRequeat对象,一般赋值给xhr变量，见名知意，便于操作

第二个步骤和第三个步骤中的open()和send()方法是使用XMLHttpRequeat请求网络数据必须指定要书写的方法，open()和send()中的参数为：

xhrReq.open(method, url);

xhrReq.open(method, url, async);

xhrReq.open(method, url, async, user);

xhrReq.open(method, url, async, user, password);

1.method

要使用的HTTP方法，比如GET、POST、PUT、DELETE等。对于非HTTP(S) URL被忽略

2.url

接收我们发起的请求的URL

3.async【可选】

一个可选的布尔参数，表示是否异步执行操作，默认为true,如果值为false，send()方法直到收到答复前不会返回。如果true，已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true，否则将引发异常，一般来说我们这个值不做操作

4.user 【可选】

可选的用户名用于认证用途；默认为null

5.password 【可选】

可选的密码用于认证用途，默认为null

第四个步骤 监听xhr对象的请求状态,这是我们就必须用到readyState这个属性，它是用来表示当前Ajax请求所处的状态，每一个Ajax请求必然处于一下状态中的任意一个：

0        ONSENT        XMLHttpRequest对象已被创建，但是没有调用open()方法

1        OPENED        open()方法一起调用

2        HEADERS_RECENED        send()方法以及被调用，响应头已被接收

3        LOADING        数据接受中，此时response属性中已经包含部分数据

4        DONE        Ajax请求完成，这时的数据传输已经完全成功或失败

 我们来执行一段GET请求：

 var xhr = new XMLHttpRequest();
    //调用xhr.open()函数
    xhr.open("GET","http://www.xxxxxxxxxxx?id=1");
    //调用xhr.send()函数
    xhr.send();
    //监听xhr.onreadystatechange事件
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            console.log(xhr.responseText);
        }
    }

这时，我们发现url后面跟着?id=1，这是怎么回事？这叫做查询字符串，会和url一起去请求指定的数据，如果有多个，使用&拼接参数

---

三.查询字符串

我们在例子中看到了，查询字符串就是URL参数，在URL末尾加上的用于向服务器发送信息的变量，使用键值对的格式放在URL末尾一起发起请求，寻求指定的数据

但是我想到了一个问题，URL地址中只允许英文相关字母、标点符号或数字，如果我们需要去写一些中文的话，该怎么做呢？

---

四.URL编码

像上述的那样的情况，我们就需要对中文符号进行编码转义

浏览器为我们提供了URL编码于解码的API，分别是：

encodeURL()        编码函数

decodeURL()        解码函数

我们使用这俩个函数，就可以将中文和英文编码互相转换了，然后书写到URL中

---

五.发起请求12（post） 

一样，我们先分析步骤：

1.我们new一个XMLHttpRequeat对象

2.调用xhr.open()函数

3.设置Content-Type属性

3.调用xhr.send()函数，并指定要发送的数据

4.监听xhr对象的请求状态（readyState）

5.监听xhr对象于服务器的响应状态

有了之前GET请求的阐述，这里只做一段简单代码解读：

var xhr = new XMLHttpRequest();
    xhr.open("POST","http://XXXXXXXXXXXXXX");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("key1=value1&key2=value2&key3=value3");
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            console.log(xhr.responseText);
        }
    }

tips：XMLHttpRequest.responseText 在一个请求被发送后，从服务器端返回的文本

XMLHttpRequest.getAllResponseHeaders() 方法返回所有的响应头

如果想继续深入了解，推荐网址：

XMLHttpRequest - Web API 接口参考 | MDN