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的Ajax时无响应数据的解决方法
May 25 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
python实现简单登陆系统
2018/10/18 Python
python顺序执行多个py文件的方法
2019/06/29 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
现场施工员岗位职责
2015/04/11 职场文书
python requests模块的使用示例
2021/04/07 Python