原生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部分:




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("系统繁忙,请稍后再试...");
                    }
                });
            });
        })



     

你可能感兴趣的:(原生JS Ajax操作,登录页面)