原生Ajax实现登录功能和一些配置

function Interface() {


    var xmlhttp;
    if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }


    //上面的http请求对象的生成做了一个浏览器兼容性处理
    var username = document.getElementById('user').value; //获取html表单中username输入域对象的值，既账号
    var password = document.getElementById('password').value; //获取html表单中pwd输入域对象的值，既密码 

    xmlhttp.onreadystatechange = function() {
        //当接受到响应时回调该方法
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
         
            var text = xmlhttp.responseText; //使用接口返回内容，响应内容
            var resultJson = eval("(" + text + ")"); //把响应内容对象转成javascript对象
            console.log(resultJson);
            var msg = resultJson.msg; //获取json中的result键对应的值
            var code = resultJson.code; //获取json中的code键对应的值
            if (msg !== "操作成功" && code !== 200) { //登录失败
                window.alert("登录失败！");
            } else {
                window.alert("登录成功！");
            } //登录成功        
        }
    }

    var data = { "username": username, "password": password }
    
    xmlhttp.open("POST", "http://192.168.137.127:1000/admin/login", true); //以POST方式请求该接口
    xmlhttp.setRequestHeader("Content-type", "application/json"); //添加Content-type
    xmlhttp.send(JSON.stringify(data));
}

设置数据格式：

• 1.发送json格式数据：

xhr.setRequestHeader("Content-type","application/json; charset=utf-8");

• 2.发送表单数据：

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");

• 3.发送纯文本（默认值）：

xhr.setRequestHeader("Content-type", "text/plain; charset=utf-8");

• 4.发送html文本：

xhr.setRequestHeader("Content-type", "text/html; charset=utf-8");

• 5.编码可带可不带：

// 不带字符编码写法
xhr.setRequestHeader("Content-type", "application/json");

• 6.值对大小写不敏感：

xhr.setRequestHeader("Content-type","Application/JSON; charset=utf-8");