Ajax与后台的交互
Ajax Java 交互
jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script type="text/javascript"> var xmlHttprequest = null; function ajax(){ if(window.ActiveXObject){ xmlHttprequest = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttprequest = new XMLHttpRequest; } if(xmlHttprequest != null){ var v1 = document.getElementById("v1").value; var v2 = document.getElementById("v2").value; xmlHttprequest.open("post","ajaxServlet.do",true); xmlHttprequest.onreadystatechange=ajaxCallBack; xmlHttprequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttprequest.send("v1="+v1+"&v2="+v2); } } function ajaxCallBack(){ if(xmlHttprequest.readyState == 4){ if(xmlHttprequest.status == 200){ var responseText = xmlHttprequest.responseText; document.getElementById("div").innerHTML = responseText; } }else{ document.getElementById("div").innerHTML="服务器出现错误!"; } } </script> <body> <input type="button" value="click here" onclick="ajax();" /> <input type="text" id="v1"></input> <input type="text" id="v2"></input> <div id="div"></div> </body> </html>
java后台
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 AjaxServlet extends HttpServlet{ /** * */ private static final long serialVersionUID = 1733653367006626421L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out = resp.getWriter(); String v1 = req.getParameter("v1"); String v2 = req.getParameter("v2"); out.print(v1+v2+"dadasdsadsa"); out.flush(); } }
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>ajax</servlet-name> <servlet-class>AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ajax</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> </web-app>