原生js和jQuery验证用户名是否存在

  这几天要在准备讲课的事情，想来想去，准备把ajax重新温习一下，原生js写了个验证用户名是否存在，又用jQuery写了个验证用户名是否存在，两者对比，肯定是jQuery写的比较方便，下面是写的代码。
  html部分就简写了，只写了需要验证的input框。

<form method="post">
        <input name="username" placeholder="用户名" required="" type="text" id="username" onchange="checkNameFun()">
        <font style="color:red;" id="message"></font>
 </form>

  方法一：用原生js创建XMLHttpRequest，步骤如下：

1. 创建XMLHttpRequest对象 xmlhttp=new XMLHttpRequest()

2. 准备发送请求的数据：url

3. 调用XMLHttpRequest的open()方法 xmlhttp.open(“GET”,“url”,true);

4. 调用XMLHttpRequest的send()方法 xmlhttp.send()

5. 为XMLHttpRequest对象添加xmlhttp.onreadystatechange响应函数

6. 判断响应是否完成：xmlhttp.readyState==4

7. 再判断响应是否可用：xmlhttp.status==200

8. 打印响应结果：xmlhttp.responseText
   代码：

// 方法一
function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
    } else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}
    function checkNameFun(){
        var xmlhttp = loadXMLDoc();
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var result = xmlhttp.responseText;  //ajax使用原生js获取json数据
                console.log(result);
                var jsonObject = eval("("+result+")");//不加eval函数js是获取不到result里面的属性
                //后台传输过来json字符串转换成js的json对象，js就能获取其中的属性了
                console.log(jsonObject);
                var msg = jsonObject.msg;
                // var code = jsonObject.code;
                document.getElementById("message").innerText=msg;
            }
        };
        //打开链接
        var val = document.getElementById("username").value;
        xmlhttp.open("GET","/checkUserName?userName="+val,true);
        //发送请求
        xmlhttp.send();
}

  方法二：jQuery封装

//方法二、
$('#username').change(function () {
    var val = $(this).val(); //获取input中userName中的值
    val = $.trim(val); //去除前后的空格
    if (val != "") {
        $.ajax({
            type:"get",//数据发送的方式（post 或者 get）
            url:"/checkUserName",//要发送的后台地址
            data:{
                userName : val
            },  //要发送的数据（参数）格式为{'val1':"1","val2":"2"}
            dataType:"JSON",
            success: function (data) {//ajax请求成功后触发的方法
                $('#message').text(data.msg);
            },
            error: function () {//ajax请求失败后触发的方法
                alert("检测用户名失败");//弹出错误信息
            }
        })
    }
});