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,超强推荐share.js
Dec 23 Javascript
用jquery来定位
Feb 20 Javascript
Javascript学习指南
Dec 01 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
9种改善AngularJS性能的方法
Nov 28 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
JS打印组合功能
2016/08/04 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
对python中return和print的一些理解
2017/08/18 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python实现俄罗斯方块
2018/06/26 Python
Python callable内置函数原理解析
2020/03/05 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python3.7调试的实例方法
2020/07/21 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
后勤工作职责
2013/12/22 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
大学生就业求职信
2014/06/12 职场文书
商铺门面租房协议书
2014/10/21 职场文书
干部考察材料范文
2014/12/24 职场文书
门卫岗位职责
2015/02/09 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android