JavaScript XMLHttpRequest的用处

来源：互联网发布：vagrant php 开发环境编辑：程序博客网时间：2024/04/28 04:41

如果想从网页提交参数到服务器，第一个想到的就是Http的Form标签。它将用户在客户端网页填写的数据通过HTTP Post，提交到服务端。这些提交的数据被放在HTTP消息的body里面，这样，用户提交的数据理论上是没有长度限制的。如果服务端用的是J2EE，HttpServletRequest可以非常轻松得取到所有参数，非常完美。

但是，有一些特殊的应用，如果服务端不是J2EE，没有HttpServletRequest，而是Java Socket实现，接受到的HTTP消息是最原始的字节流。这些字节流被一个简单的HTTP Message解析器解析。问题是，为了处理简单，这个解析器只解析了HTTP消息的头部，没有解析HTTP消息的body部分。这时，客户端需要提交一些长度有限的数据给服务端，如果还是用Form提交数据，显然通不过。很自然，数据只能存在HTTP消息的头部。这是Form做不到的，应该求助于其他的脚本工具，这里介绍JavaScript的XMLHttpRequest。

XMLHttpRequest可以在HTTP消息的头部增加扩展的meta header，也可以像Form一样，把数据提交到HTTP消息的body部分。下面这段代码是一个自动提交的例子。"http://localhost:8080/TestForm/HandleForm"是服务器端地址。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
  function createReq() {
   var req = false;
   if (window.XMLHttpRequest) { //Mozilla
    req = new XMLHttpRequest();
   } else if (window.ActiveXObject) { //IE
    try {
     req = new ActiveXObject("Microsoft.XMLHTTP"); //IE6
    } catch (e) {
     try {
      req = new ActiveXObject("MsXML2.XMLHTP");
     } catch (e) {
      alert(" Create a XMLHttpRequest object failed! ");
     }
    }
   }
   return req;
  }

  window.onload = function() {
   var req = createReq();
   req.open("POST", "http://localhost:8080/TestForm/HandleForm", true);
   req.onreadystatechange = function () {
    if (req.readyState == 4) {
     if (req.status == 200) {
      alert(req.responseText);
     }
    }
   }
   req.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); // this is necessary to set parameters in HTTP body.
   req.setRequestHeader("myheader1", "idp1"); // add header
   req.setRequestHeader("myheader2", "google.com"); //add header
   req.send("username=abc&passwd=1234"); //set parameters in HTTP Body
  }

</script>
</head>
<body>
</body>
</html>

XMLHttpRequest虽好，但是有一些浏览器不支持。看上面的代码就能发现。