通过XMLHttpRequest手写一个建议的ajax

部分内容摘抄于《JavaScript高级程序设计》
Ajax技术的核心是XMLHttpRequest（XHR）对象；

1.通过XHR对象发起个异步请求的demo

GET 请求

const xhr = new XMLHttpRequest();//声明一个XMLHttpRequest对象
const url = '/ajax/data.json'
xhr.open("GET", url, true);//open():接受三个参数，分别表示请求方式，地址，异步

xhr.onreadystatechange = function () {//readyState的值改变都会触发一次readystatechange事件
    if (xhr.readyState === 4) {//请求（响应）过程当前活动阶段
        if (xhr.status === 200) {//HTTP请求的服务器相应状态码
            //对请求获得的结果进行处理
            console.log(JSON.parse(xhr.responseText))
            alert(xhr.responseText)
        }
    }
};

xhr.send(null);//send()：只接收一个参数

POST请求

const xhr = new XMLHttpRequest();//声明一个XMLHttpRequest对象
const url = '/ajax/data.json'
xhr.open("POST", url, true);//open():接受三个参数，分别表示请求方式，地址，异步

xhr.onreadystatechange = function () {//readyState的值改变都会触发一次readystatechange事件
    if (xhr.readyState === 4) {//请求（响应）过程当前活动阶段
        if (xhr.status === 200) {//HTTP请求的服务器相应状态码
            //对请求获得的结果进行处理
            console.log(JSON.parse(xhr.responseText))
            alert(xhr.responseText)
        }
    }
};
//post请求参数
const postParam = {
    type: 'username',
    typeValue: 'test',
    password: '123456'
}
xhr.send(JSON.stringify(postParam));//send()：只接收一个参数

方法属性说明

1. .open（）:方法
   该的接受的三个参数分别代表着：发送请求的方法；请求的URL；是否异步发送请求；

2. .send):方法
   该接受一个参数（作为请求主体发送的数据），如果不需要通过请求主体发送数据，则必须传入null；

3. readyState属性 ：请求（响应）过程当前活动阶段

readyState 属性值	解析	补充
0（未初始化）	还没有调用send()方法
1 （载入）	已经调用send（）方法，正在发送请求
2 （载入完成）	send（）方法执行完成 ，已经接收全部响应
3 （交互）	正在解析响应内容
4 （完成）	响应内容解析完成，可以在客户端调用	注重留意该属性值

4. status 属性：/HTTP请求的服务器相应状态码

status 常用属性值	解析	例子
2XX	请求处理成功	200
3XX	需要重定向，浏览器直接跳转
4XX	客户端请求错误	404
5XX	服务器端错误

2.遇到的问题

2.1：背景：使用富文本上传图片

Failed to load http://www.choisaaaa.campuso2o.com/image/richtext_img_upload.do: Request header field X-File-Name is not allowed by Access-Control-Allow-Headers in preflight response.