效果:点击获取信息
testAjax.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" ???pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript"> ???function getName(){ ???????var xmlHttp; ???????//判断浏览器是否兼容 ???????if(window.XMLHttpRequest){ ???????????xmlHttp = new XMLHttpRequest(); ???????}else{ ???????????xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); ???????} ???????xmlHttp.onreadystatechange = function(){ ???????????//判断返回状态 ???????????if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ ???????????????document.getElementById("name").value = xmlHttp.responseText; ???????????} ???????????????????} ???????xmlHttp.open("get","getAjaxName",true); ???????xmlHttp.send(); ???????????}</script></head><body><div style="text-align:center;"> ???<input type="button" value="获取ajax信息" onclick="getName()"><input type="text" name="name" id="name"></div></body></html>
GetAjaxNameServlet.java
package com.xxc.ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class GetAjaxNameServlet extends HttpServlet{ ???/** ????* ?????*/ ???private static final long serialVersionUID = 1L; ???@Override ???protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { ???????// TODO Auto-generated method stub ???????this.doPost(req, resp); ???} ???@Override ???protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { ???????resp.setContentType("text/html;charset=utf-8"); ???????PrintWriter out = resp.getWriter(); ???????out.println("返回的信息"); ???????out.flush(); ???????out.close(); ???}}
web.xml
<servlet> ?????<servlet-name>GetAjaxNameServlet</servlet-name> ?????<servlet-class>com.xxc.ajax.GetAjaxNameServlet</servlet-class> ?</servlet> ?<servlet-mapping> ?????<servlet-name>GetAjaxNameServlet</servlet-name> ?????<url-pattern>/getAjaxName</url-pattern> ?</servlet-mapping>
1.ajax简单实现异步交互
原文地址:https://www.cnblogs.com/alex-xxc/p/10011283.html