×

用原生javascript里的XMLHttpRequest对象实现与后台数据的交互

作者:天空2020.08.28来源:Web前端之家浏览:6376评论:2
关键词:jsXMLHttpRequest

用原生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);
}

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js802938oosioiweor.html

网友评论文明上网理性发言 已有2人参与

发表评论:

评论列表