【前端】不会用原生写ajax不是好前端！原生ajax基本写法

四大的步骤：

1. 创建XMLHttpRequest对象

let xhr = new XMLHttpRequest()

2. 设置本次请求的类型以及请求的地址

xhr.open('get/post','url')                                    

3. 监听请求完成事件

xhr.onload = function(){
	var res = xhr.responseText                          //拿到请求返回的结果			
}

4. 发送请求

xhr.send()

关于参数

1. get请求参数写的位置在url后面 “?参数名=参数值” ，多个参数请用&隔开。
2. post请求参数以send()方法的参数形式传递，格式为“参数名=参数值” ，多个参数请用&隔开。
3. 如果有文件参数，请用FormData对象。

坑点：

1. 如果是post请求，请求前需要设置请求头，也就是加上这么一句话：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

2. 留心观察接口给你返回的东西的数据类型。
3. xhr.onload具有兼容性问题，ie8及以下不支持，这里有一个兼容性写法：

 xhr.onreadystatechange = function(){                     //监听状态改变事件

     if( xhr.readyState == 4 && xhr.status == 200){       //当状态码为4并且服务器相应的状态码为200时候，表示请求成功

        console.log(xhr.responseText);
                    
    }
 }

4. 当使用的是FormData对象拿的表单数据并进行传参的时候，无需设置请求头。

最后总结：

其实大多数情况下使用的都是jQuery做的Ajax请求，可以避免掉十分多不必要的麻烦，本文主要回顾原生写Ajax，所以这里对于jQuery便不再深入阐述，各位小伙伴加油！