Http Get request aborts a previous Get request

Question

I am learning Ajax, javascript, and html and have an application that fires a "get" request followed by another "get" request. These requests are the results of a user pushing a button. In my servlet I simulate a coffee order being brewed by using TimeUnit.SECONDS.sleep(10);

When the 2nd "get" request is sent (before the 10 seconds have elapsed) the first request is aborted (in both Firefox and Chrome). I have done research but have not found a sufficient answer as to why.

Can anyone please shed some light on this? Many thanks in advance.

Here is my html...

    <html>
 <head>
  <title>Ajax-powered Coffee Maker</title>
  <link rel="stylesheet" type="text/css" href="coffee.css" />
  <script type="text/javascript" src="ajax.js"> </script>
  <script type="text/javascript" src="coffee.js"> </script>
  <script type="text/javascript" src="text-utils.js"> </script>
 </head>
 <body>
   <div id="header">
    <h1>Ajax-powered Coffee Maker</h1>
   </div>

  <div id="wrapper">
   <div id="coffeemaker1">
    <h2>Coffee Maker #1</h2>
    <p><img src="images/CoffeeMaker1.gif" alt="Coffee Maker #1" /></p>
    <div id="coffeemaker1-status">Idle</div>
   </div>

   <div id="coffeeorder">
    <p><img src="images/coffeeMugWithBeans.jpg" alt="Coffee Pot 1" /></p>
    <h2>Place your coffee order here:</h2>
    <div id="controls1">
     <form>
      <p>Name: <input type="text" name="name" id="name" /></p>
      <h3>Size</h3>
      <p> 
       <input type="radio" name="size" 
              value="small" checked>Small</input>
       &nbsp;&nbsp;
       <input type="radio" name="size" 
              value="medium">Medium</input>
       &nbsp;&nbsp;
       <input type="radio" name="size" 
              value="large">Large</input>
      </p>
      <h3>Beverage</h3>
      <p> 
       <input type="radio" name="beverage" 
              value="mocha" checked>Mocha</input>
       &nbsp;&nbsp;
       <input type="radio" name="beverage" 
              value="latte">Latte</input>
       &nbsp;&nbsp;
       <input type="radio" name="beverage" 
              value="cappucino">Cappucino</input>
      </p>
      <p>
       <input type="button"
              onClick="orderCoffee();"
              value="Order Coffee" />
      </p>
     </form>
    </div>
   </div>

   <div id="coffeemaker2">
    <h2>Coffee Maker #2</h2>
    <p><img src="images/CoffeeMaker2.gif" alt="Coffee Maker #2" /></p>
    <div id="coffeemaker2-status">Idle</div>
   </div>

   <p id="clear"></p>
  </div>
 </body>
</html>

my javascript...

    var request;
try {
    request = new XMLHttpRequest(); // Most browsers will do this
} catch (trymicrosoft) {
    try {
        request = new ActiveXObject("Msxm12.XMLHTTP"); // Internet Explorer
        // does this
    } catch (othermicrosoft) {
        try {
            request = new ActiveXObject("Microsoft.XMLHTTP"); // And this
            // sometimes
        } catch (failed) {
            request = null;
        }
    }
}
if (request == null) {
    alert("Error Creating Request Object!");
} else {
    alert("Request Object created!");
}


function getBeverage() {
    var beverageGroup = document.forms[0].beverage;
    for ( var i = 0; i < beverageGroup.length; i++) {
        if (beverageGroup[i].checked == true) {
            return beverageGroup[i].value;
        }
    }
}

function getSize() {
    var sizeGroup = document.forms[0].size;
    for ( var i = 0; i < sizeGroup.length; i++) {
        if (sizeGroup[i].checked == true) {
            return sizeGroup[i].value;
        }
    }
}

function serveDrink() {
    var reply = request.responseText;
    console.log("reply: " + reply);
}

function orderCoffee() {
    console.log("ordering coffee");
    var name = document.getElementById("name").value;
    var size = getSize();
    var beverage = getBeverage();
    var coffeemakerStatusDiv1 = document.getElementById("coffeemaker1-status");
    var status = getText(coffeemakerStatusDiv1);
    console.log("status1: " + status);
    if (status == "Idle") {
        replaceText(coffeemakerStatusDiv1, "Brewing " + name + "'s " + size + " " + beverage);
        document.forms[0].reset();
        var url = "coffee.do?name=" + escape(name) + "&size=" + escape(size)
                + "&beverage=" + escape(beverage) + "&coffeemaker=1";
        sendRequest(url);
    } else {
        var coffeemakerStatusDiv2 = document.getElementById("coffeemaker2-status");
        var status = getText(coffeemakerStatusDiv2);
        console.log("status2: " + status);
        if (status == "Idle") {
            replaceText(coffeemakerStatusDiv2, "Brewing " + name + "'s " + size + " " + beverage);
            document.forms[0].reset();
            var url = "coffee.do?name=" + escape(name) + "&size=" + escape(size)
                    + "&beverage=" + escape(beverage) + "&coffeemaker=2";
            sendRequest(url);
        } else {
            console.log("y am i here?");
        }
    }

}

function sendRequest(url) {
    request.onreadystatechange = serveDrink;
    request.open("get", url, true);
    request.send();
}

and my servlet...

    package com.asponte.controller;

import java.io.IOException;
import java.util.concurrent.TimeUnit;
import java.util.logging.Logger;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.ibm.websphere.logging.WsLevel;

/**
 * Servlet implementation class CoffeeController
 */
@WebServlet("/CoffeeController")
public class CoffeeController extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private Logger s_log = Logger.getLogger("com.asponte.controller");

    /**
     * @see HttpServlet#HttpServlet()
     */
    public CoffeeController() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        boolean isDebug = false;

        if (s_log.isLoggable(WsLevel.ALL)) {
            isDebug = true;
        }
        if (isDebug) {
            s_log.entering("Coffee Servlet doGet()", "entering");
        }

        String name = request.getParameter("name");
        String size = request.getParameter("size");
        String beverage = request.getParameter("beverage");
        String maker = request.getParameter("coffeemaker");
        System.out.println("name: " + name);
        System.out.println("size: " + size);
        System.out.println("beverage: " + beverage);
        System.out.println("maker: " + maker);
        try {
            TimeUnit.SECONDS.sleep(10);
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        String toReturn;
        if (maker.equals("1")) {
            toReturn = "1";
        } else if (maker.equals("2")){
            toReturn = "2";
        } else {
            toReturn = "doggit";
        }
        response.getWriter().write(toReturn);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }

}

Answer 1

可能是由于您的服务器端配置，该配置仅使用一个线程处理所有到达的请求。

Answer 2

I found out that each http request requires its own request object. After making the required changes so that each request does indeed have its own request object it worked like expected.

Http Get request aborts a previous Get request

Question

2 answers

solution1
1 2014-09-28 12:45:11

solution2
0 2014-09-29 12:54:38

Http Get request aborts a previous Get request

Question

2 answers

solution1 1 2014-09-28 12:45:11

solution2 0 2014-09-29 12:54:38

solution1
1 2014-09-28 12:45:11

solution2
0 2014-09-29 12:54:38