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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
python实现用户登录系统
2016/05/21 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Django在win10下的安装并创建工程
2017/11/20 Python
python实现决策树
2017/12/21 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
python 元组和列表的区别
2020/12/30 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
初中英语演讲稿
2014/04/29 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
世博会口号
2014/06/20 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
mysql的数据压缩性能对比详情
2021/11/07 MySQL