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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
js的touch事件的实际引用
Oct 13 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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项目的方法
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
Javascript倒计时代码
2010/08/12 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
js实现3D照片墙效果
2019/10/28 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
浅析Python 中整型对象存储的位置
2016/05/16 Python
浅述python中深浅拷贝原理
2018/09/18 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
世界汽车零件:World Car Parts
2019/09/04 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
竞赛口号大全
2014/06/16 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
工伤事故证明
2014/10/20 职场文书
幼师小班个人总结
2015/02/12 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书