Ajax学习笔记（实例）

来源：互联网发布：五五开淘宝店地址编辑：程序博客网时间：2024/05/01 17:10

AJAX.html

<html><head><title>AJAX.html</title></head><script type="text/javascript">/*通过异步传输XMLHTTP发送参数到ajaxServlet，返回符合条件的XML文档*/function getResult() {var url = "/AjaxTest/ajaxServlet?action=send";if (window.XMLHttpRequest) {req = new XMLHttpRequest();} else if (window.ActiveXObject) {req = new ActiveXObject("Microsoft.XMLHTTP");}if (req) {req.open("GET", url, true);req.onreadystatechange = complete;req.send(null);}}/*分析返回的XML文档*/function complete() {if (req.readyState == 4) {if (req.status == 200) {if(req.responseText == "true")document.getElementById("MyDiv").innerHTML = "<font color='red'>It`s ok!!</font>"}}}</script><body><table width="80%" border="0" cellspacing="0" cellpadding="0"><tr><td><input type="text" onkeyup="getResult()"><div id="MyDiv">check</div></td></tr></table></body>

ajaxServlet.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 String CONTENT_TYPE = "text/xml; charset=gb2312";public void init() throws ServletException {}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType(CONTENT_TYPE);PrintWriter out = response.getWriter();String action = request.getParameter("action");if (("send").equals(action)) {out.write("true");out.close();}}}

web.xml

<?xml version="1.0" encoding="ISO-8859-1"?><web-app xmlns="http://java.sun.com/xml/ns/j2ee"  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"   version="2.4"><servlet><servlet-name>ajaxServlet</servlet-name><servlet-class>ajaxServlet</servlet-class></servlet><servlet-mapping><servlet-name>ajaxServlet</servlet-name><url-pattern>/ajaxServlet</url-pattern></servlet-mapping></web-app>