Question

我正在学习Ajax，javascript和html，并且有一个应用程序可以触发＆＃34; get＆＃34;请求后跟另一个＆＃34; get＆＃34;请求。这些请求是用户按下按钮的结果。在我的servlet中，我使用TimeUnit.SECONDS.sleep（10）模拟正在酿造的咖啡订单;

当第二个＆＃34;得到＆＃34;发送请求（在10秒钟之前），第一个请求被中止（在Firefox和Chrome中）。我做过研究，但没有找到足够的答案。

任何人都可以对此有所了解吗？非常感谢提前。

这是我的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>

我的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();
}

和我的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

我发现每个http请求都需要自己的请求对象。完成所需的更改后这样每个请求确实都有自己的请求对象，它就像预期的那样工作。

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

2 个答案: