原生JS Ajax操作，登录页面

来源：互联网发布：mac网络实用工具编辑：程序博客网时间：2024/06/05 03:24

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

0 0