ajax学习--请求servlet响应
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
