- 瀑布流无限加载
使用瀑布流无限加载技术取消了分页按钮，当用户浏览完当前的页面数据之后，会自动加载数据，无缝链接，给用户良好的体验，尤其是在移动端，更是随处可见
代码示例：
<!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> 密 码：<input type='password' name='pass'><span></span><br><br> 确认密码：<input type='password' name='repass'><span></span><br><br> 邮 箱：<input type='text' name='email' ><span></span><br><br> 手 机：<input type='text' name='phone' ><span></span><br><br> <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>
