原生JS创建ajax请求

近一个月面试，有两家笔试题都让写原生ajax

在此做一下笔记，w3school官网讲的超级清楚 明白 又 简单易懂，建议看w3school

get请求

function ajaxGet(url) {
    //三元表达式
    //所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
    //IE5 和 IE6 使用 ActiveXObject
    var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    
    //每当 readyState 改变时，就会触发 onreadystatechange 事件。
    //readyState 属性存有 XMLHttpRequest 的状态信息。
       //readyState有0-4五个值：
       //0:初始化状态。XMLHttpRequest对象已创建或已被abort()方法重置。 
　　　　//1:open()方法已调用，但是send()方法未调用。请求还没有被发送。 
　　　　//2:Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
　　　　//3：所有响应头部都已经接收到。响应体开始接收但未完成。
　　　　//4:HTTP 响应已经完全接收。

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            console.log("请求发送成功！");
        }
        else {
            console.group("请求发送失败！");
            console.log("XMLHttpRequest 的状态:"+xmlHttp.readyState);
            console.log("服务器响应状态:"+xmlHttp.status);
            console.groupEnd();
        }
    }

    //发送set请求
    xmlHttp.open("GET",url,true);
    xmlHttp.send();
}

 post请求

function ajaxPost(url,data){
    var xmlHttp = window.XMLHttpRequest : new XMLHttpRequest() ? new ActiveXObject("Microsoft.XMLHTTP");
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
            console.log("POST请求发送成功");
        }
        else {
            console.group("请求发送失败！");
            console.log("XMLHttpRequest的状态："+xmlHttp.readyState);
            console.log("服务器响应状态："+xmlHttp.status);
            console.groupEnd();
        }
    }
    xmlHttp.open("POST","文件在服务器上的位置或者请求的URL","同步请求/异步请求 false/true");
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//使用setRequestHeader来添加HTTP头
    xmlHttp.send(data);
}