简单对接ajax

<script src="js/myAjax2.js"></script>
<!-- <script src="js/jquery-1.12.4.js"></script> -->
<script>
    window.onload = function(ev) {
        /*  var username = $("#username").val();
         var password = $("#password").val();
         var code = $("#code").val(); */
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        var code = document.getElementById("code");
        var oBtn = document.querySelector(".oBtn");
        oBtn.onclick = function(ev1) {

            ajax({
                url: "写入后端给的接口",
                data: {
                    "username": username.value,
                    "password": password.value,
                    "code": code.value
                },
                timeout: 3000,
                type: "post",
                success: function(xhr) {
                    console.log(xhr.responseText.code)
                    alert(xhr.responseText);
                    console.log(xhr.responseXML);

                    console.log(xhr.status);
                    if (xhr.status == 200) {
                        alert("登录成功")
                        location.href = "./index.html";
                    }
                },
                error: function(xhr) {
                    alert("请求失败了");
                    console.log(xhr.status);
                }
            })
        }
    }
</script>

<input id="username">
<input id="password">
<input id="code">
<div>
    <img id="codeImg" src="写入后端给你的接口" alt="更换验证码">
</div>
<button class="oBtn">发送请求</button>

封装好的ajaxmyajax2 把下面的全部复制好后引入就行
function obj2str(data) {
/*
{
“userName”:“lnj”,
“userPwd”:“123456”,
“t”:“3712i9471329876498132”
}
/
data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
data.t = new Date().getTime();
var res = [];
for(var key in data){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(option) {
// 0.将对象转换为字符串
var str = obj2str(option.data); // key=value&key=value;
// 1.创建一个异步对象
var xmlhttp, timer;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
// 2.设置请求方式和请求地址
/
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*/
if(option.type.toLowerCase() === “get”){
xmlhttp.open(option.type, option.url+"?"+str, true);
// 3.发送请求
xmlhttp.send();
}else{
xmlhttp.open(option.type, option.url,true);
// 注意点: 以下代码必须放到open和send之间
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xmlhttp.send(str);
}

// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
    /*
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪
    */
    if(xmlhttp.readyState === 4){
        clearInterval(timer);
        // 判断是否请求成功
        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
            xmlhttp.status === 304){
            // 5.处理返回的结果
            // console.log("接收到服务器返回的数据");
            option.success(xmlhttp);
        }else{
            // console.log("没有接收到服务器返回的数据");
            option.error(xmlhttp);
        }
    }
}
// 判断外界是否传入了超时时间
if(option.timeout){
    timer = setInterval(function () {
        console.log("中断请求");
        xmlhttp.abort();
        clearInterval(timer);
    }, option.timeout);
}

}