原生Ajax和Jquery代码对比

原生Ajax和jquery之间的区别

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

原生Ajax 前端代码

<script>
// 1.用户名验证
    var username=document.getElementById("username");
    var errorName=document.getElementById("errorname");
    username.onblur=function () {
        var req=new XMLHttpRequest();
        req.open("get","/cms/ajax?flag=checkUsername&username="+username.value);
        req.send(null);
        req.onreadystatechange=function () {
            if (req.status==200&&req.readyState==4){
                var data=req.responseText;
                if (data=="no"){
                    errorName.innerHTML="请输入用户名";
                }else if(data=="find"){
                    errorName.innerHTML="用户名已存在，请重新输入";
                }else{
                    errorName.innerHTML="可以注册";
                }
            }
        }
    }
    </script>

jqueryAjax 前端代码

  <script src="${pageContext.request.contextPath}/view/js/jquery-1.10.2.js"></script>
<script> 
$("#username").blur(function(){
    //发送ajax请求
    $.ajax({
        type:'get',
        url:'cms/ajax?username='+$("#username").val(),
        dataType:'text',
        success:function(data){
          
                if (data=="no"){
                    errorName.innerHTML="请输入用户名";
                }else if(data=="find"){
                    errorName.innerHTML="用户名已存在，请重新输入";
                }else{
                    errorName.innerHTML="可以注册";
                }
            }
        }
        }
        
    })
})
</script>