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 获取对象 定位子对象
May 31 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
简单实现js拖拽效果
Jul 25 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
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
PHP高并发和大流量解决方案整理
2021/03/09 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
js倒计时抢购实例
2015/12/20 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
使用Python实现一个简单的项目监控
2015/03/31 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
python代码实现ID3决策树算法
2017/12/20 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
用python制作个视频下载器
2021/02/01 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
自我评价范文
2013/12/22 职场文书
小小的船教学反思
2014/02/21 职场文书
合作意向书范本
2014/03/31 职场文书
安全月活动总结
2014/05/05 职场文书
作风转变年心得体会
2014/10/22 职场文书
2014年关工委工作总结
2014/11/17 职场文书
学校重阳节活动总结
2015/03/24 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript