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变量作用域及可访问性的探讨
Nov 23 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
Jquery注册事件实现方法
May 18 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
JS 实现分页打印功能
May 16 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 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实现的下载远程文件类定义与用法示例
2017/07/05 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
javascript 简练的几个函数
2009/08/29 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python 域名分析工具实现代码
2009/07/15 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
python多维数组切片方法
2018/04/13 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
浅谈Python爬虫基本套路
2019/03/25 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python读写csv文件的方法
2019/08/13 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
appium+python adb常用命令分享
2020/03/06 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
校园创业策划书
2014/01/14 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
浪费资源的建议书
2014/03/12 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
医院见习报告范文
2014/11/03 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
生死抉择观后感
2015/06/09 职场文书
redis实现排行榜功能
2021/05/24 Redis
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server