javascript前端和后台进行数据交互方法示例


Posted in Javascript onAugust 07, 2020

在开发中遇到了在没有jQuery的情况下需要与后台进行部分数据的交互,查找了部分资料使用JavaScript实现了操作,记录一下。

//获取XMLHttpRequest对象用于与后台交互数据
function getXHR(){
      var xmlHttp;
      try {
        xmlHttp=new XMLHttpRequest();//新版本浏览器
      }catch(e)
      {
        try{
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
          try{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//老版本浏览器          }
          catch(e)
          {
            alert("你的浏览器不支持ajax");
            return false;
          }
        }
      }
      return xmlHttp;
    }
function check() {
      var pass = document.getElementById("pass").value;
 
      //1/得到xhr对象
      var xhr=getXHR();
      //2.注册状态变化监听器
      xhr.onreadystatechange=function(){
        if(xhr.readyState==4) {
          if(xhr.status==200) {
            var obj = document.getElementById("checkPass");
            if("true" == xhr.responseText){
              obj.innerHTML = "验证通过";
              obj.style.color = "green";
			}else{
              obj.innerHTML = "原密码输入错误!";
              obj.style.color = "brown";
              return;
			}
          }
        }
      }
      //3.建立与服务器的连接(post请求方式,也可以使用get请求方式)
      xhr.open("post","请求数据的地址");
      xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      //4.向服务器发出请求(使用post请求方式将数据发往后台)
      xhr.send("pass="+pass);
    }

到此这篇关于javascript前端和后台进行数据交互方法的文章就介绍到这了,更多相关javascript前端和后台数据交互内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
javascript解析json格式的数据方法详解
Aug 07 #Javascript
Vue触发input选取文件点击事件操作
Aug 07 #Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 #Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 #Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
vue递归获取父元素的元素实例
Aug 07 #Javascript
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
JavaScript toFixed() 方法
2010/04/15 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python处理写入数据代码讲解
2020/10/22 Python
python如何修改文件时间属性
2021/02/05 Python
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
JSF界面控制层技术
2013/06/17 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
自我评价范文
2013/12/22 职场文书
单位单身证明范本
2014/01/11 职场文书
四下基层实施方案
2014/03/28 职场文书
英语课外活动总结
2014/08/27 职场文书
教师节座谈会主持词
2015/07/03 职场文书
员工规章制度范本
2015/08/07 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
如何利用python创作字符画
2022/06/25 Python