观察HTTP协议中客户端向服务器发送的请求,理解并实现一个最简单的AJAX请求案例

<form action="login.php" method="get">
    用户名：<input type="text" name="userName" id="userName"><br>
    密码：<input type="password" name="userPwd"> <br>
    <input type="submit" value="注册">
</form>

<script>
  /*需求:当输入用户名时,立即去服务器端帮我验证当前用户名是否存在*/
    document.getElementById("userName").onblur=function(){
        var name=document.getElementById("userName").value;
        /*1.创建一个能够实现异步请求的对象*/
        var xhr=new XMLHttpRequest();
        console.log(xhr.readyState);
        /*2.生成请求报文*/
        /*2.1请求报文行*/
        xhr.open("get","register.php?name="+name);
        /*2.2请求报文头*/
        /*如果是get请求就没有设置设置报文头，但是如果是post请求就必须设置Content-Type*/
        /*2.3请求报文体*/
        /*如果是get请求，那么就应该在url里面进行传递,那么 send(null)
        如果是post请求，那么才需要创建单独的请求报文体   send(username=** & pwd=**)*/
        xhr.send(null);
        /*监听服务器的响应*/
        xhr.onreadystatechange=function(){
            console.log(xhr.readyState);
            /*判断当前的响应是否成功  1.服务器做出了响应  2.响应的结果是正确的*/
            if(xhr.status==200 && xhr.readyState==4){
                console.log(xhr.readyState);
                var result=xhr.responseText;
                if(result==1){
                    alert("用户名已经存在，请重新输入");
                }
            }
        }
    }
</script>

var xhr=new XMLHttpRequest();

xhr.open(‘post‘,‘url地址‘);

xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);

xhr.send(‘name=...&age=....‘);//浅白的说就是: 需要向上面的url里传输的数据