1、jsp頁面
1 <%-- Created by IntelliJ IDEA. --%> 2 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 3 <html> 4 <head> 5 6 <% 7 pageContext.setAttribute("APP_PATH", request.getContextPath()); 8 %> 9 10 <title></title> 11 </head> 12 <body> 13 <h1 align="center">Hello 2020屆秋招</h1> 14 <h1 align="center">Hello 2020屆秋招</h1> 15 <a href="" onclick="get()">ajax請求</a> 16 </body> 17 <script> 18 function xmlHttp() { 19 var xmlhttp; 20 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 21 xmlhttp = new XMLHttpRequest(); 22 } 23 else {// code for IE6, IE5 24 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 25 } 26 return xmlhttp; 27 } 28 29 function get() { 30 /** 31 * 通過請求servlet時需要注意的是要在web.xml中聲明servlet，以及它的URL，否則無法訪問到相應的servlet 32 * 33 * */ 34 var xmlHttp = new XMLHttpRequest(); 35 xmlHttp.open("POST", "${APP_PATH}/AjaxServlet?name=aa&age=20", true); 36 37 /** 38 *使用onreadystatechange來作為請求的觸發事件；當請求狀態發生改變時執行方法 39 **/ 40 xmlHttp.onreadystatechange = function () { 41 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 42 alert(xmlHttp.responseText); 43 } 44 }; 45 46 xmlHttp.send(); 47 // alert("結束"); 48 } 49 </script> 50 </html>
- pageContext.setAttribute("APP_PATH", request.getContextPath());獲取當前項目路徑
- var xmlHttp = new XMLHttpRequest();
- xmlHttp.send();發送給后台
- xmlHttp.onreadystatechange = function (){} 當狀態改變的時候執行該方法
- xmlHttp.responseText 獲取后台返回的文本數據，格式需要由后台指定
- open(method: string, url: string, async?: boolean, user?: string | null, password?: string | null) api對open方法的描述
2、后台java代碼：
1 package com.qiu.servlet; 2 3 import javax.servlet.ServletException; 4 import javax.servlet.http.HttpServlet; 5 import javax.servlet.http.HttpServletRequest; 6 import javax.servlet.http.HttpServletResponse; 7 import java.io.IOException; 8 9 /** 10 * @author by ys 11 * @create by 2019/7/3 12 */ 13 public class AjaxServlet extends HttpServlet { 14 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 15 String name= req.getParameter("name"); 16 String age=req.getParameter("age"); 17 System.out.println("name:"+name+" "+"age:"+age); 18 resp.setContentType("text/html;charset=utf-8"); 19 resp.getWriter().write("服務器收到了請求...."); 20 System.out.println("收到了客戶端的請求"); 21 } 22 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 23 System.out.println("將post請求轉給get請求處理"); 24 doGet(req,resp); 25 } 26 27 }
resp.setContentType("text/html;charset=utf-8");設置返回的格式，否則前端接收到的是亂碼
3、對於一個簡單的web工程需要配置的步驟，配置web.xml，否則請求無效
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns="http://java.sun.com/xml/ns/javaee" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 5 http://java.sun.com/xml/ns/javaee/web-app_4_0.xsd" 6 version="4.0"> 7 <welcome-file-list> 8 <welcome-file>index.jsp</welcome-file> 9 </welcome-file-list> 10 <servlet> 11 <servlet-name>ServletDemo1</servlet-name> 12 <servlet-class>com.qiu.servlet.ServletDemo1</servlet-class> 13 </servlet> 14 15 <servlet-mapping> 16 <servlet-name>ServletDemo1</servlet-name> 17 <url-pattern>/ServletDemo1</url-pattern> 18 </servlet-mapping> 19 20 <servlet> 21 <servlet-name>AjaxServlet</servlet-name> 22 <servlet-class>com.qiu.servlet.AjaxServlet</servlet-class> 23 </servlet> 24 <servlet-mapping> 25 <servlet-name>AjaxServlet</servlet-name> 26 <url-pattern>/AjaxServlet</url-pattern> 27 </servlet-mapping> 28 </web-app>
注意兩個標簽：
<servlet-mapping>是定義URL的
<servlet>則是對servlet所在的類定義
常見錯誤：沒有在webx.xml中定義servlet