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 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
vue项目中实现的微信分享功能示例
Jan 21 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邮件群发机实现代码
2016/02/16 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
Python编程中的for循环语句学习教程
2015/10/14 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
通过python3实现投票功能代码实例
2019/09/26 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
在线课程:Skillshare
2019/04/02 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
部队学习十八大感言
2014/01/11 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
委托书格式范文
2015/01/28 职场文书
工作简报范文
2015/07/21 职场文书
领导新年致辞2016
2015/07/29 职场文书
早恋主题班会
2015/08/14 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers