let xhr = new XMLHttpRequest(); 是什么意思
时间: 2024-03-14 07:49:26 浏览: 27
这是一段 JavaScript 代码,用于创建 XMLHttpRequest 对象。XMLHttpRequest 对象用于在后台与服务器交换数据。它可以在不重新加载页面的情况下更新页面的一部分,可以发送 HTTP 或 HTTPS 请求,可以接收和处理服务器的响应。在这段代码中,通过创建 XMLHttpRequest 对象,可以发送 GET 请求到指定的 URL,获取服务器响应并进行处理。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Warehouse Management</title> </head> <body> <h1>Warehouse Management</h1> <p>Scan the barcode to get the warehouse number:</p> <input type="text" id="barcode"> <button onclick="getWarehouseNo()">Get Warehouse Number</button> <p id="warehouseNo"></p> <br> <hr> <p>Add warehouse number manually:</p> <input type="text" id="manualBarcode"> <input type="text" id="manualWarehouseNo"> <button onclick="addWarehouse()">Add Warehouse</button> <br> <hr> <p>View all warehouses:</p> <ul id="warehouseList"></ul> </body> <script src="warehouse.js"></script> </html>function getWarehouseNo() { let barcode = document.getElementById("barcode").value; let xhr = new XMLHttpRequest(); xhr.open("GET", "/api/warehouse/" + barcode, true); xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { document.getElementById("warehouseNo").innerHTML = "Warehouse Number: " + this.responseText; } }; xhr.send();}function addWarehouse() { let barcode = document.getElementById("manualBarcode").value; let warehouseNo = document.getElementById("manualWarehouseNo").value; let xhr = new XMLHttpRequest(); xhr.open("POST", "/api/warehouse/" + barcode + "/" + warehouseNo, true); xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { alert("Warehouse added successfully"); } }; xhr.send();}function getAllWarehouse() { let xhr = new XMLHttpRequest(); xhr.open("GET", "/api/warehouse", true); xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { let data = JSON.parse(this.responseText); let warehouseList = document.getElementById("warehouseList"); for (let warehouse in data) { let list = document.createElement("li"); list.innerHTML = warehouse + ": " + data[warehouse].join(", "); warehouseList.appendChild(list); } } }; xhr.send();}getAllWarehouse();根据这些前端代码写出对应的后端java代码按三层架构来写以及启动类
以下是对应的后端Java代码,按照三层架构来实现:
1. DAO层代码
WarehouseDao.java
```
package com.example.warehousemanagement.dao;
import java.util.HashMap;
import java.util.Map;
public class WarehouseDao {
private static Map<String, String[]> warehouseMap = new HashMap<>();
public String[] getWarehouseByBarcode(String barcode) {
return warehouseMap.get(barcode);
}
public void addWarehouse(String barcode, String warehouseNo) {
String[] warehouseNumbers = warehouseMap.getOrDefault(barcode, new String[0]);
String[] newWarehouseNumbers = new String[warehouseNumbers.length + 1];
System.arraycopy(warehouseNumbers, 0, newWarehouseNumbers, 0, warehouseNumbers.length);
newWarehouseNumbers[newWarehouseNumbers.length - 1] = warehouseNo;
warehouseMap.put(barcode, newWarehouseNumbers);
}
public Map<String, String[]> getAllWarehouses() {
return warehouseMap;
}
}
```
2. Service层代码
WarehouseService.java
```
package com.example.warehousemanagement.service;
import com.example.warehousemanagement.dao.WarehouseDao;
import java.util.Map;
public class WarehouseService {
private WarehouseDao warehouseDao;
public WarehouseService() {
warehouseDao = new WarehouseDao();
}
public String[] getWarehouseByBarcode(String barcode) {
return warehouseDao.getWarehouseByBarcode(barcode);
}
public void addWarehouse(String barcode, String warehouseNo) {
warehouseDao.addWarehouse(barcode, warehouseNo);
}
public Map<String, String[]> getAllWarehouses() {
return warehouseDao.getAllWarehouses();
}
}
```
3. Controller层代码
WarehouseController.java
```
package com.example.warehousemanagement.controller;
import com.example.warehousemanagement.service.WarehouseService;
import javax.ws.rs.*;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
import java.util.Map;
@Path("warehouse")
public class WarehouseController {
private WarehouseService warehouseService;
public WarehouseController() {
warehouseService = new WarehouseService();
}
@GET
@Path("{barcode}")
@Produces(MediaType.TEXT_PLAIN)
public Response getWarehouseByBarcode(@PathParam("barcode") String barcode) {
String[] warehouseNumbers = warehouseService.getWarehouseByBarcode(barcode);
if (warehouseNumbers == null) {
return Response.status(Response.Status.NOT_FOUND).entity("Warehouse not found").build();
} else {
return Response.ok(warehouseNumbers[0]).build();
}
}
@POST
@Path("{barcode}/{warehouseNo}")
public Response addWarehouse(@PathParam("barcode") String barcode, @PathParam("warehouseNo") String warehouseNo) {
warehouseService.addWarehouse(barcode, warehouseNo);
return Response.ok().build();
}
@GET
@Produces(MediaType.APPLICATION_JSON)
public Response getAllWarehouses() {
Map<String, String[]> warehouseMap = warehouseService.getAllWarehouses();
return Response.ok(warehouseMap).build();
}
}
```
4. 启动类代码
WarehouseManagementApplication.java
```
package com.example.warehousemanagement;
import org.glassfish.jersey.server.ResourceConfig;
import org.glassfish.jersey.servlet.ServletContainer;
import org.glassfish.jersey.servlet.ServletProperties;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
@WebServlet(name = "WarehouseManagementApplication", urlPatterns = {"/api/*"})
public class WarehouseManagementApplication extends HttpServlet {
@Override
public void init() throws ServletException {
ResourceConfig config = new ResourceConfig();
config.packages("com.example.warehousemanagement.controller");
ServletContainer container = new ServletContainer(config);
this.getServletContext().setAttribute(ServletProperties.JAXRS_APPLICATION_CONTEXT_ATTRIBUTE, config);
}
}
```
5. web.xml代码
```
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<servlet>
<servlet-name>WarehouseManagementApplication</servlet-name>
<servlet-class>com.example.warehousemanagement.WarehouseManagementApplication</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>WarehouseManagementApplication</servlet-name>
<url-pattern>/api/*</url-pattern>
</servlet-mapping>
</web-app>
```
6. warehouse.js代码 (无需修改)
```
function getWarehouseNo() {
let barcode = document.getElementById("barcode").value;
let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/warehouse/" + barcode, true);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("warehouseNo").innerHTML = "Warehouse Number: " + this.responseText;
}
};
xhr.send();
}
function addWarehouse() {
let barcode = document.getElementById("manualBarcode").value;
let warehouseNo = document.getElementById("manualWarehouseNo").value;
let xhr = new XMLHttpRequest();
xhr.open("POST", "/api/warehouse/" + barcode + "/" + warehouseNo, true);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
alert("Warehouse added successfully");
}
};
xhr.send();
}
function getAllWarehouse() {
let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/warehouse", true);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
let data = JSON.parse(this.responseText);
let warehouseList = document.getElementById("warehouseList");
for (let warehouse in data) {
let list = document.createElement("li");
list.innerHTML = warehouse + ": " + data[warehouse].join(", ");
warehouseList.appendChild(list);
}
}
};
xhr.send();
}
getAllWarehouse();
```
注意事项:
1. 需要在pom.xml中添加Jersey依赖
2. 需要在web.xml中添加Jersey Servlet的配置
3. 需要启动Tomcat等Servlet容器来运行这个项目
function fn2() { let xhr = new XMLHttpRequest() xhr.open('post', '/api/users/login') xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') xhr.send('uname=小妲己&password=gx123456') xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); } } }这段代码中open里面的地址为啥不用加端口号
&pwd=123456') xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) } } } 这段代码的作用是什么?
这段代码的作用是向后端发送一个POST请求,登录用户。具体来说,代码中通过XMLHttpRequest发送了一个POST请求到指定路径'/api/users/login',并且将用户名和密码以'application/x-www-form-urlencoded'的格式放在请求体中发送到后端。当后端响应成功(状态码为200)时,将返回内容打印到控制台中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)