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 相关文章推荐
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
jquery $("#variable") 循环改变variable的值示例
Feb 23 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
canvas 中如何实现物体的框选
Aug 05 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
jQuery实现给页面换肤的方法
2015/05/30 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
vue filters的使用详解
2018/06/11 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python实现解数独程序代码
2017/04/12 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python占位符输入方式实例
2019/05/27 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
三个python爬虫项目实例代码
2019/12/28 Python
python中return不返回值的问题解析
2020/07/22 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
会计学生自我鉴定
2014/02/06 职场文书
安全标语口号
2014/06/09 职场文书
党员三严三实心得体会
2014/10/13 职场文书
高中班主任心得体会
2016/01/07 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
redis数据一致性的实现示例
2022/03/18 Redis