Http Get请求中止先前的Get请求

Question

I am learning Ajax, javascript, and html and have an application that fires a "get" request followed by another "get" request. 我正在学习Ajax，javascript和html，并且有一个应用程序会先触发“获取”请求，然后再触发另一个“获取”请求。 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); 在我的servlet中，我模拟了使用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). 当发送第二个“获取”请求时（在10秒钟之前），第一个请求被中止（在Firefox和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 ...

    <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... 我的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... 和我的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. 我发现每个http请求都需要自己的请求对象。 After making the required changes so that each request does indeed have its own request object it worked like expected. 在进行了必要的更改后，每个请求确实具有自己的请求对象，它的工作与预期的一样。

Http Get请求中止先前的Get请求

问题描述

2 个解决方案

解决方案1
1 2014-09-28 12:45:11

解决方案2
0 2014-09-29 12:54:38

Http Get请求中止先前的Get请求

问题描述

2 个解决方案

解决方案1 1 2014-09-28 12:45:11

解决方案2 0 2014-09-29 12:54:38

解决方案1
1 2014-09-28 12:45:11

解决方案2
0 2014-09-29 12:54:38