原生js中ajax访问的实例详解
form表单中
登录名:
失去光标即触发事件
function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } function infoCheck(){ var ename=document.getElementById("ename").value; var password=document.getElementById("password").value; var pwdConfirm=document.getElementById("pwdConfirm").value; if(password!=pwdConfirm){ alert("两次密码不统一"); return ; } //验证登录用户名是否存在，类似的可以验证手机号什么的 // 1.创建异步对象 var xhr = createXmlHttp(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // var data = new Function("return" + xhr.responseText)()//反序列化 var val=xhr.responseText; if(val==1){ document.getElementById("ch").innerHTML="重新设置名字"; document.getElementById("ename").focus(); return; }else{ document.getElementById("ch").innerHTML=""; } } } xhr.open("post", 'LoginController/checkEname?ename='+escape(encodeURIComponent(ename)), true); //发送 xhr.send(null); }
在返回xhr.responseText数据时，中文有乱码的体现，尚未解决，所以为了只管体现，我让后台返回的是“0”或者“1”来做判断，je中createXmlHttp()这个方法以前看老师讲过，但是还是不理解，目前仿照这写吧，功能实现了，这也是看到的最简单的版本实现原生态ajax，整个ajax访问流程还是比较好理解，提交访问数据的时候也存在乱码问题
web项目乱码的问题解决方案
开始的web项目整体以post方式提交，xml文件中加入以下编码过滤器
<filter> <filter-name>encodingFilter</filter-name> <filter-class> org.springframework.web.filter.CharacterEncodingFilter </filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> 提交的时候 剩下的 小部分的乱码可以用编码在解码的方式获得正确数据 编码:'LoginController/checkEname?ename='+escape(encodeURIComponent(ename)) 解码:try { String str=URLDecoder.decode(ename, "utf-8"); ename=URLDecoder.decode(ename, "utf-8"); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } 后面写入数据库的时候乱码问题,我个人先创数据库编码是utf8,项目的编码也是utf-8,避免其他的编码问题发生，在连接数据库的URL也加上 url=jdbc:mysql://localhost:3306/ssm?useUnicode=true&characterEncoding=utf8 目前碰到的乱码问题已经解决（除开ajax返回数据乱码，这个目前没找到解决方案）
在来说下原生js非空验证和button点击提交功能
<form action="LoginController/register" method="post"> 姓名:<input type="text"><br> 登录名:<input type="text" onblur="infoCheck()"> <font></font><br> 密码:<input type="password"><br> 密码确定:<input type="password"><br> <input type="button" value="注册" > </form> function submitInfo(){ var name=document.getElementById("name").value; var ename=document.getElementById("ename").value; var password=document.getElementById("password").value; var pwdConfirm=document.getElementById("pwdConfirm").value; //针对空格和制表符的""能做到过滤 name=name.replace(/(^\s*)|(\s*$)/g, ""); ename=ename.replace(/(^\s*)|(\s*$)/g, ""); password=password.replace(/(^\s*)|(\s*$)/g, ""); pwdConfirm=pwdConfirm.replace(/(^\s*)|(\s*$)/g, ""); if(name.length==0||name==" "||name.langth=="undefined") { //alert(name.langth); //alert(111); alert("姓名为必填项"); return ; } if(ename.length==0||ename==" "||ename.langth=="undefined") { alert("登录名为必填项"); return ; } if(password.length==0||password==" "||password.langth=="undefined") { alert("密码为必填项"); return; } if(password!=pwdConfirm){ alert("两次密码不统一"); return ; } document.getElementById("form").submit(); }
后面继续加瓦，完善，所有代码在之前的基于注解spring4.，mybatis3.最简单的SSM整合 连接地址中，代码持续更新