node.js第四天--ajax在项目中的应用

简介: node.js第四天--ajax在项目中的应用


  1. 瀑布流无限加载

         使用瀑布流无限加载技术取消了分页按钮,当用户浏览完当前的页面数据之后,会自动加载数据,无缝链接,给用户良好的体验,尤其是在移动端,更是随处可见

         代码示例:

 

  1. 表单验证
<!DOCTYPE html>
<html>
<head>
  <title>瀑布流</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      margin: 0;padding: 0px;border: 0px;
    }
    img{
      width: 200px;
      display: block;
      position: absolute;
      transition: 0.5s;
    }
  </style>
  <!-- <script type="text/javascript" src="/myAjax-minni.js"></script> -->
</head>
<body>
  <img src="./images/1.jpg" width="200">
  <img src="./images/2.jpg" width="200">
  <img src="./images/3.jpg" width="200">
  <img src="./images/4.jpg" width="200">
  <img src="./images/5.jpg" width="200">
  <img src="./images/6.jpg" width="200">
  <img src="./images/7.jpg" width="200">
  <img src="./images/8.jpg" width="200">
  <img src="./images/9.jpg" width="200">
  <img src="./images/10.jpg" width="200">
</body>
</html>
<script type="text/javascript">
  //封装ajax对象
function Ajax(dataType,async){
    var ajax = new Object();
    // 处理数据类型
    ajax.dataType = dataType ? dataType.toUpperCase() : 'HTML';
 
    // 处理同步异步
    if(typeof(bool) == "undefined"){
      ajax.async = true;
    }else{
      ajax.async = async;
    }
    //创建XMLHTTPRequest对象
  ajax.createXMLHttpRequest = function(){
      // 定义空的xmlRequest对象
      var xmlRequest = false;
      if(window.XMLHttpRequest){
          // 主流
          xmlHttpRequest = new XMLHttpRequest();
      }else{
          // IE5,IE6
          xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return xmlRequest;
  }
  ajax.xmlRequest = ajax.createXMLHttpRequest();
     // onreadystatechange事件
    ajax.changeFunction = function(){
        if(ajax.xmlRequest.readyState == 4 && ajax.xmlRequest.status == 200){
            if(ajax.dataType == 'HTML'){
                ajax.callback(ajax.xmlRequest.responseText);
            }else if(ajax.dataType == 'JSON'){
                // 处理json格式数据
                ajax.callback(JSON.parse(ajax.xmlRequest.responseText));
            }else if(ajax.dataType == 'XML'){
                ajax.callback(ajax.xmlRequest.responseXML);
            }
        }
    }
 
    // get方法
  ajax.get = function(url,callback){
      if(callback != null){
          // 便于使用onreadystatechange事件函数使用
          ajax.callback = callback;
          // 调用onreadystatechange事件函数,把服务器返回的数据给回调函数
          ajax.xmlRequest.onreadystatechange = ajax.changeFunction;
      }
      // 然后初始化GET请求
      ajax.xmlRequest.open("GET",url,ajax.async);
      // 发送请求
      ajax.xmlRequest.send();
  }
  //post方法
  /** Ajax中post请求方法
    url请求的url
    endstring post请求携带的参数 字符串或json
    callback 用来接收服务器返回的回调函数
  */
  ajax.post = function(url,sendString,callback){
      // 处理要向服务器提交的参数为xml支持的格式
      if(typeof(sendString == 'boject')){
          // 如果是json对象,转化成字符串
          var str = '';
          // 循环遍历这个对象
          for(var key in sendString){
                  // 把json对象转化成name=Tom&age=19的形式
              str += key + '=' + sendString[key] + '&';
          }
          // 删除字符串最后一个‘&’
          sendString = str.substr(0,str.length-1);
      }
      // 判断是否有回调函数,有回调函数的话调用onreadystatechange事件函数
      if(callback != null){
          // 把传递过来的回调函数给ajax的一个属性
          // 便于onreadystatechange函数调用
          ajax.callback = callback;
          // 调用onreadystatechange事件函数,把服务器返回的数据给回调函数
          ajax.xmlRequest.onreadystatechange = ajax.changeFunition;
      }
      
      // 然后初始化post请求
      ajax.xmlRequest.open("POST",url,ajax.async);
      // 设置post请求头信息
      ajax.xmlRequestHeader('Content-Type','application/x-www-form-urlencoded');
      ajax.xmlRequest.send(sendString);
  }
      
    return ajax;
}
  // 頁面一加载就调用layout对页面进行布局
  window.onload = layout;
  // 窗口改变也调用函数
  window.onresize = function(){
    layout();
  }
 
  // 这个函数用来布局页面中的img排列方式
  function layout(){
    // 获取所有的img标签
    var allImg = document.getElementsByTagName('img');
    // 窗口视图的宽度
    var windowWidth = document.documentElement.clientWidth;
    // 一行能容纳多少个img,并向下取整
    var n = Math.floor(windowWidth/220);
    // 如果页面没有标签则直接返回,不用布局
    if(n<=0){return;}
    // 计算页面两端有多少空白
    var center = (windowWidth - n*220)/2;
    // 定义一个数组存放img的高度
    var arrH = [];
    for(var i = 0;i<allImg.length;i++){
      // 用来计算是第几个img,用于给数组做索引
      // 保证数组长度始终是等于每行的数n
      var j = i%n;
      // 一行排满n个后到下一行
      // 下一行开始,从高度最低的开始排
      if(arrH.length == n){
        // 从高度最低的开始
        var min = getMin(arrH);
        // 左右定位,开始一个20px的间距
        allImg[i].style.left = center + min*220 + 'px';
        // 上下定位并且给一个20px的定位
        allImg[i].style.top = arrH[min] + 20 + "px";
        // 把高度最低的img的高度放进数字,并给一个20px的间距
        arrH[min] += allImg[i].offsetHeight + 20;
      }else{
        // 这个是用来排列第一行的
        // 把img的高度放入数组
        arrH[j] = allImg[i].offsetHeight;
        // 左右定位,居住空白加
        allImg[i].style.left = center + 220*j + 'px';
        allImg[i].style.top = 0;
      }
    };
  }
 
  // 找出高度最小的那个索引并返回
  function getMin(arr){
    var m = 0; // 初始化一个用户比较的索引变量
    for(var i = 0;i<arr.length;i++){
      // 进行比较,每次都返回最小的那个
      m = Math.min(arr[m],arr[i]) == arr[m] ? m : i;
    }
    return m;
  }
 
  // 当滚动条变化时触发这个函数,到一定值是触发ajax请求
  window.onscroll = function(){
    // 可视区域高度
    var windowHeight = document.documentElement.clientHeight;
    // 滚动条的高度
    var srcollTop = document.documentElement.srcollTop || document.body.srcollTop;
    var srcollH = document.body.srcollHeight;
    // alert(srcollH)
    if(srcollTop+windowHeight >= srcollH-20){
      // 发送ajax请求,同步方式
      Ajax('JSON',false).get('http://127.0.0.1:3000/getData',function(data){
        // 拿到数据之后创建节点,多个数据用循环
        for(var i=0;i<data.length;i++){
          // 创建标签
          var img = document.createElement('img');
          // 绑定url
          img.src = data[i].url;
          // 放到页面中显示
          document.body.appendChild(img);
        }
        // 追加新的节点之后重新布局页面
        layout();
      });
    }
  }
</script>

表单验证

表单中常用到的事件

表单中常用到的事件有onsubmit表单提交事件,onfocus失去焦点事件,onblur失去焦点事件

表单验证实例

<!DOCTYPE html>
<html>
<head>
  <title>表单验证</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="/myAjax.js"></script>
</head>
<body>
  <form action="http://127.0.0.1:3000/reqRes" method="post" onsubmit="return checkForm()">
    用户名:<input type="text" name="username"><span></span><br>
    密  码:<input type="password" name="pass"><span></span><br><br>
    确认密码:<input type="password" name="repass"><span></span><br><br>
    邮  箱:<input type="text" name="repass"><span></span><br><br>
    手  机:<input type="text" name="phone"><span></span><br><br>
    <input type="submit" value="提交" name="">
    <input type="reset" value="重写
    " name="">
  </form>
  <script type="text/javascript">
    // 定义标志,所有标志为1才能提交
    var flag_user = flag_pass = flag_repass = flag_email = flag_phone = 0;
    // 获取所有input节点
    var inputs = document.getElementsByTagName('input');
    // 获取所有的span标签,用于给出提示信息
    var spans = document.getElementsByTagName('span');
    // 遍历所有的span标签,用于给出提示信息
    var spans = document.getElementsByTagName('span');
    // 遍历input节点,给出不同的input的绑定不同的事件
    for(var i = 0;i<inputs.length;i++){
      if(inputs[i].name === 'username'){
        // 匹配到用户名
        var index_u = i; // 保存i的值,作为下标
        // 绑定获得焦点事件,获得焦点清空输入框
        inputs[index_u].onfocus = function(){
          // 获取焦点事件提示用户输入正确格式
          spans[index_u].innerHTML = '用户名为6-16为英文,数字和下划线组成';
          this.value = '';
        }
 
        //绑定失去焦点的事件,失去焦点进行验证
        inputs[index_u].onblur = function(){
          // 失去焦点事件,失去焦点进行验证,
          // 符合要求才发送ajax到服务器验证是否存在
          var reg = /^[a-zA-Z\d_]\w{6,16}$/; // 正则表达式
          console.log(this);
          if(reg.test(this.value)){
            //验证成功,Ajax远程请求服务器进行用户名验证
            Ajax('json',false).post('http://localhost:3000/checkReg',{username:this.value},function(data){
              //判断结果,执行不同的操作
              if(data.flag == 0){ //该用户不存在于数据库,可以注册
                flag_user = 1;
                spans[index_u].innerHTML = data.message;
              }else{
                flag_user = 0;
                spans[index_u].innerHTML = data.message;
              }
            });
          }else{
            spans[index_u].innerHTML = '用户名格式不正确';
          }
        }
      }else if(inputs[i].name == 'pass'){
        // 匹配到密码框
 
      }
    }
  </script>
</body>
</html>

服务器端:

// 表单提交
app.get('/reg',function(req,res){
  res.render('reg');
});
//表单提交
app.post('/checkReg',function(req,res){
  console.log(req);
  // 模拟数据库已存在的数据
  var users = [
    {username:'ab','password':'2019'},
    {username:'ab1','password':'20191'},
    {username:'ab11','password':'201911'},
  ];
  // 判断用户提交的用户名是否已经存在
  for(var i = 0;i<users.length;i++){
    if(req.body.username === users[i].username){
      // 已存在值,请换一个
      res.json({flag:1,message:'用户名存在,换一个试试'});
    }
  }
  // 用户名不存在,可以注册
  res.json({flag:0,message:'用户名不存在,可以注册'});
});

// 完整js代码

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <title>注册验证</title>
  <meta charset='utf-8'>
  <script src='myAjax.js'></script>
</head>
<body>
<form action='http://127.0.0.1:3000/reqRes' method='post' onsubmit='return checkForm()'>
  用户名:<input type='text' name='username'><span></span><br><br>
  密&nbsp;&nbsp;码:<input type='password' name='pass'><span></span><br><br>
  确认密码:<input type='password' name='repass'><span></span><br><br>
  邮&nbsp;&nbsp;箱:<input type='text' name='email' ><span></span><br><br>
  手&nbsp;&nbsp;机:<input type='text' name='phone' ><span></span><br><br>
  &nbsp;&nbsp;<input type='submit' value='提交' name=''>
  <input type='reset' value='重写' name=''>
</form>
</body>
<script>
//定义标志,所有标志为1才能提交注册
var flag_user = flag_pass = flag_repass = flag_email = flag_phone = 0;
//获取所有input节点
var inputs = document.getElementsByTagName('input');
console.log(inputs);
//获取所有的span标签,用于给出提示信息
var spans = document.getElementsByTagName('span');
//遍历input节点,给不同的input的绑定不同的事件
for(var i = 0; i < inputs.length; i++){
  if(inputs[i].name == 'username'){   // 匹配到用户名,进行验证
    var index_u = i;        //保存i的值,作为下标
    //绑定获得焦点事件,获得焦点清空输入框
    inputs[index_u].onfocus = function(){
      //获取焦点事件提示用户输入正确格式
      spans[index_u].innerHTML = '用户名为6-16为英文、数字和下划线组成';
      this.value = '';      //  清空输入框
    }
    //绑定失去焦点事件,失去焦点进行验证
    inputs[index_u].onblur = function(){
      //失去焦点先进行用户名的格式验证,
      //符合要求才发送Ajax到服务器验证是否存在
      var reg = /^[a-zA-Z\d_]\w{6,16}$/;//正则表达式
      if(reg.test(this.value)){
        //验证成功,Ajax远程请求服务器进行用户名验证
        Ajax('json',false).post('http://127.0.0.1:3000/checkReg',{username:this.value},function(data){
          //判断结果,执行不同的操作
          if(data.flag == 0){ //该用户不存在于数据库,可以注册
            flag_user = 1;
            spans[index_u].innerHTML = data.message;
          }else{
            flag_user = 0;
            spans[index_u].innerHTML = data.message;
          }
        });
      }else{            //验证失败,提示用户
        spans[index_u].innerHTML = '用户名格式不正确'; //提示用户
      }
    }
  } else if(inputs[i].name == 'pass'){//密码只进行格式验证
    var index_p = i;
    var reg_p = /^[a-zA-Z\d]{6,16}$/;   //正则匹配
    //绑定获得焦点事件,获取焦点清空输入框
    inputs[index_p].onfocus = function(){
      //获得焦点事件提示用户输入正确格式
      spans[index_p].innerHTML = '密码为6-16为英文、数字组成';
      //清空输入框的值;
      this.value = '';
    };
    //失去焦点事件,失去焦点
    inputs[index_p].onblur = function(){
      if(reg_p.test(this.value)){
        flag_pass = 1;
        spans[index_p].innerHTML = '密码格式正确';
      }else{
        flag_pass = 0;
        spans[index_p].innerHTML = '密码格式不正确';
      }
    }
  } else if(inputs[i].name == 'repass'){
    var index_r = i;
    //绑定获得焦点事件,获取焦点清空输入框
    inputs[index_r].onfocus = function(){
      //获得焦点事件提示用户输入正确格式
      spans[index_r].innerHTML = '请输入重复密码进行比对';
      //清空输入框的值;
      this.value = '';
    };
    //失去焦点事件,失去焦点
    inputs[index_r].onblur = function(){
      if(inputs[index_p].value == inputs[index_r].value){
        flag_repass = 1;
        spans[index_r].innerHTML = '重复密码正确';
      }else{
        flag_repass = 0;
        spans[index_r].innerHTML = '密码不一致';
      }
    }
  } else if(inputs[i].name == 'email'){
    var index_e = i;
    //正则验证邮箱
    var reg_e = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    //绑定获得焦点事件,获取焦点清空输入框
    inputs[index_e].onfocus = function(){
      //获得焦点事件提示用户输入正确格式
      spans[index_e].innerHTML = '请输入正确的邮箱格式';
      //清空输入框的值;
      this.value = '';
    };
    //失去焦点事件,失去焦点
    inputs[index_e].onblur = function(){
      if(reg_e.test(this.value)){
        flag_email = 1;
        spans[index_e].innerHTML = '邮箱格式正确';
      }else{
        flag_email = 0;
        spans[index_e].innerHTML = '邮箱格式不正确';
      }
    }
  } else if(inputs[i].name == 'phone'){
    var index_ph = i;
    //正则验证
    var reg_ph = /^1[3|4|5|8]\d{9}$/;
    //绑定获得焦点事件,获取焦点清空输入框
    inputs[index_ph].onfocus = function(){
      //获得焦点事件提示用户输入正确格式
      spans[index_ph].innerHTML = '请输入正确的手机号';
      //清空输入框的值;
      this.value = '';
    };
    //失去焦点事件,失去焦点
    inputs[index_ph].onblur = function(){
      if(reg_ph.test(this.value)){
        flag_phone = 1;
        spans[index_ph].innerHTML = '手机格式正确';
      }else{
        flag_phone = 0;
        spans[index_ph].innerHTML = '手机格式不正确';
      }
    }
  }
}
//当所有的表单都验证通过了之后才能提交发送
function checkForm(){
  if(flag_user == 1 && flag_pass == 1 && flag_repass == 1 && flag_email == 1 && flag_phone == 1 ){
    //所有验证都通过返回true,允许表单提交
    return true;
  }else{        
    //条件不通过返回false,阻止表单提交
    return false;
  }
}
</script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</html>
 


目录
相关文章
|
15天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
17 0
|
30天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
1月前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
20 4
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
40 0
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
1月前
|
JavaScript
vue.js项目评估流程图特效
vue.js项目评估流程图特效
86 2
vue.js项目评估流程图特效
|
1月前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:理解其原理与实际应用
探索JavaScript中的闭包:理解其原理与实际应用
19 0
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
23 0
|
17天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
12 1
|
8天前
|
JavaScript
node.js输入项目目录结构并展示
node.js输入项目目录结构并展示
4 0