js发请求

借一盏午夜街头 昏黄灯光 照亮那坎坷路上人影一双

 

平常用框架用的比较多，公司突然缺人手，要同时做活动，也就是原生h5。

发请求的时候，vue是直接用axios发，可是原生里面需要new XMLHttpRequest

 

var xmlHttp = new XMLHttpRequest();
        //alert(xmlHttp);
        xmlHttp.open("get",
            "${pageContext.request.contextPath}/AjaxDemo2", true);
        xmlHttp.send(null);

        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                // 通过responseXML属性获取服务端响应过来的xml片段
                var xmlDoc = xmlHttp.responseXML;
               //做处理
            }
        }

 这个时候，如果send在onreadystatechange前面，就是同步，不然就是异步。

还有这里的readyState 有5种值  

(0)未初始化 
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。 
(1)载入 
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 
(2)载入完成 
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 
(3)交互 
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。 
(4)完成 
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。 

还有这里content-type取值

application/x-www-form-urlencoded

xhr.responseText


multipart/form-data

let formData = new FormData(form);

       var xhr = new XMLHttpRequest();

       xhr.onreadystatechange = function () {
           if (xhr.readyState == 4) {
               if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                       console.log(xhr.responseText);
                    } else {
                        alert("Response was unsuccessful:" + xhr.status);
                    }
                }
            };

        xhr.open("post", "test.php", true);
               xhr.setRequestHeader("Content-Type","multipart/form-data");
        xhr.send(formData);

application/json

  var request = new XMLHttpRequest();
  request.open("POST", "test.php");
  var data = {"username" :document.getElementById("username").value ,
              "pwd" : document.getElementById("psw").value, 
              }
  data=JSON.stringify(data);            
  request.setRequestHeader("Content-type","application/json");
  request.send(data);
  request.onreadystatechange = function() {
    if (request.readyState===4) {
      if (request.status===200) { 
        var data = JSON.parse(request.responseText);
        if (data.id) { 
                 console.log(data.msg);
        } else {
                console.log("出现错误：" + data.msg);
        }
      } else {
        alert("发生错误：" + request.status);
      }
    } 
  }
}

text/xml

 var xhr = new XMLHttpRequest();
    
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){//返回
                if(xhr.status==200){//响应代码正常
                    var xmlObj=xhr.responseXML;
                    //后台返回<res><mes>success</mes><user>patty</user></res>
                    var res=xmlObj.getElementsByTagName("res")[0];  
                    var mes=res.childNodes[0].childNodes[0].nodeValue;
                    var user=res.childNodes[1].childNodes[0].nodeValue;
                    console.log(mes+"  用户："+user);
                }
            }
        };
        xhr.open("post", "test.php", true);

        var name=document.getElementsByName("username")[0].value;
        var pwd=document.getElementsByName("psw")[0].value;
        var xml="<user><name>"+name+"</name><pwd>"+pwd+"</pwd></user>";
        xhr.setRequestHeader("Content-Type", "text/xml");
        xhr.send(xml);
      });