1.ajax簡單實現非同步互動
阿新 • • 發佈：2018-11-24
效果：點選獲取資訊
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>