2014-09-28 317 views
0

我正在学习Ajax,JavaScript和HTML,并且有一个应用程序会触发“get”请求,然后是另一个“get”请求。这些请求是用户按下按钮的结果。在我的servlet中,我模拟了使用TimeUnit.SECONDS.sleep(10)酿造的咖啡订单;Http获取请求中止以前的获取请求

当第二个“get”请求被发送时(在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 
    } 

} 

回答

0

也许这是因为你的服务器对于所有到达的请求只使用一个线程。

+0

我是在这样的假设下,每次向servlet发送一个请求时,都会为该特定请求产生一个新线程。或者它只是来自不同客户端的请求产生新线程? – mitchj 2014-09-28 12:51:49

+0

这由应用程序或Web服务器管理。它们包含可用于处理每个请求的线程池,并且它们会被重用。有一个1的池是可能的,但不太可能,可能是一个非常糟糕的决定。要调整池大小,您必须查看特定于供应商的文档,但我怀疑您的设置已设置为1,因为默认设置通常包含1以上。 – 2014-09-29 13:01:03

0

我发现每个http请求都需要自己的请求对象。在做出所需的更改 以便每个请求的确具有其自己的请求对象后,它的工作方式与预期相同。