原生JS Ajax操作，登录页面

Ajax：异步的JavaScript和XML技术！某些领域也被称为局部刷新技术！
               原始的情况下，通过XML进行数据交换，但是由于XML传输数据时大量的语义标签造成了网络流量的损失！
           所以，发展到后来，使用Ajax进行数据交换时，通常使用JSON来进行数据的传递！

1） 主要用来在前端页面中向服务器后端请求数据！

2）主要在前端开发的过程中，需要向服务器请求数据的时候使用！

3）通过核心的异步对象XMLHttpRequest发送异步请求，从服务器请求数据并通过DOM操作进行数据处理

 Ajax 的操作步骤：
       1）. 创建异步对象
       2）. 打开和服务器的连接，发送请求
       3）. 获取数据，DOM操作进行渲染

//创建异步对象
var _http;
if(window.XMLHttpRequest){
   _http=new  XMLHttpRequest()';
}else{
   _http=new ActiveXObject("Microsoft.XMLHTTP");
}
//打开连接，发送请求
  _http.open("get","url");
  _http.send();
//获取数据，渲染操作
  _http.onreadystatechange=function(){
   if(_http.readyState == 4 && _http.statues == 200) {
                var _content = _http.responseText;
            }
}

案例：登录页面的操作

html部分：

<div class="container">
     <label for="username">账号</label>
     <input type="text" id="username" placeholder="请输入账号"><br/>
     <label for="password">密码</label>
     <input type="password" id="password" placeholder="请输入密码"><br />
     <label for="password2">确认密码</label>
     <input type="password" id="password2" placeholder="请输入密码"><br />
     <input type="button" value="注册新用户" id="registbtn">
</div>

script部分：

 $("#registbtn").click(function() {
      // 获取用户输入的数据
       var _unameValue = $("#username").val();
       var _passValue = $("#password").val();
       var _passValue2 = $("#password2").val();
     // 逻辑判断
       if(_passValue != _passValue2) {
           alert("两次输入密码不一致");
           return;
          }
     // 向服务器发送数据，注册用户
        $.ajax({
           url:"http://datainfo.duapp.com/shopdata/userinfo.php",
           type:"get",
           data:{
                status:"register",
                userID:_unameValue,
                password:_passValue
               },
           success:function(response){
               console.log(response);
               if(response == 0 || response == 2) {
                  alert("用户名存在，请使用其他账号注册");
                } else {
                   alert("恭喜您注册成功，请使用新账号登录");
                   location.href = "login.html";
                }
                },
           error:function() {
                        alert("系统繁忙，请稍后再试...");
                    }
                });
            });
        })