原生js中ajax访问的实例详解


Posted in Javascript onSeptember 19, 2017

原生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" id="form">
姓名:<input type="text" name="name" id="name"><br>
登录名:<input type="text" name="ename" id="ename" onblur="infoCheck()"> <font id="ch" name="ch"></font><br>
密码:<input type="password" name="password" id="password"><br>
密码确定:<input type="password" name="pwdConfirm" id="pwdConfirm"><br>
<input type="button" value="注册" onclick="submitInfo()" >
</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整合 连接地址中,代码持续更新

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
DWR中各种java方法的调用
May 04 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 #Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 #Javascript
前端常见跨域解决方案(全)
Sep 19 #Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 #Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 #Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 #Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 #Javascript
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP调用三种数据库的方法(1)
2006/10/09 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
浅谈python对象数据的读写权限
2016/09/12 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
管理站站长岗位职责
2013/11/27 职场文书
学校介绍信范文
2014/01/14 职场文书
保密工作实施方案
2014/02/24 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
企业党建工作总结2015
2015/05/26 职场文书
小学数学国培研修日志
2015/11/13 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS