ajaxTest.js

//创建一个XMLHttpRequest对象,利用此对象与服务器进行通信,也是AJax的核心技术
function ajaxFunction() {
 var xmlHttp = null;
 try {// Firefox,Opera 8.0+,Safari
  xmlHttp = new XMLHttpRequest();
 } catch (e) {
  try {// Internet Explorer
   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

  } catch (e) {
   try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e) {
   }
  }
 }
 return xmlHttp;

}

window.onload = function() {
 document.getElementById("Button1").onclick = function() {// 不像java,千万别加new
  /**
   * 1.获取XMLHttpRequest对象
   */
  var xmlRequest = ajaxFunction();
  /**
   * 2.接受服务器端的响应 //0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法) *
   */
  // 1(初始化)对象已建立,尚未调用send方法
  // 2 (发送数据) send方法已调用,但是当前的状态及http头未知
  // 3(数据传送中)已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
  // 4 (完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
  xmlRequest.onreadystatechange = function() {
   // 响应发送完毕
   if (xmlRequest.readyState == 4) {
    // 200(服务器处理成功) 304(文件没有被修改)
    if (xmlRequest.status == 200 || xmlRequest.status == 304) {
     var data = xmlRequest.responseText;
     alert(data);
    }

   }
  };

  /**
   * 3.打开与服务器的连接 , *get-method请求方法, 请求路径, true 表示异步传输数据
   *
   * *如果用post发送数据,则应在open方法之后加上: *
   */
  xmlRequest.open("post", "/MyScriptDemo/servlet/AjaxServlet?time="
    + new Date().getTime() + "&name=111", true);// 追加时间戳
  xmlRequest.setRequestHeader("Content-Type",
    "application/x-www-form-urlencoded");
  /**
   * 4.发送数据 若是get方法,则不会传递任何数据,给send传递参数null即可 。 *post方式能接受send传递的参数
   */
  xmlRequest.send("b=45&age=18");

 };
};

原文地址:https://www.cnblogs.com/33blog/p/2610788.html