ajax入门小程序

添加时间：2013-12-7

相关阅读: 页面 数据库 程序 HTML JSP 框架

此小程序主要给ajax还未入门的朋友们一个简单的演示。程序的主要内容就是将页面部分的id通过表单传到java的servlet中，因为只是做示例，所以没有对id进行任何处理，有兴趣的朋友可以连接数据库或应用一些jdk方法进行处理操作等等，在此仅作示例。话不多说了（这话就不少了），看代码吧：

1、ajaxdemo.jsp

<%@ page language="java" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>My JSP 'ajaxdemo.jsp' starting page</title>
<script type="text/javascript">
      var req;
      function createAJAX() {
        if(window.XMLHttpRequest) {
          req = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
          req = new ActiveXObject("Microsoft.XMLHTTP");
        }
      }

      function testAjax() {
          var url = "/testajax/servlet/TestAjaxServlet?id=123";
          createAJAX();
          req.open("POST", url, true);
          req.onreadystatechange = callback;
          req.send(null);
      }

      function callback() {
        if(req.readyState == 4) {
          if(req.status == 200) {
            document.getElementById("ajaxDiv").innerHTML = req.responseText;
          }
        }
      }
</script>
</head>
<body>
    <input type="button" value="测试ajax" name="button1" id="ajaxButton" onclick="testAjax()"><br>
    可以根据下边这个id号进行操作：<div id="ajaxDiv"></div>
</body>
</html>

说明：因为只是一个简简单单的玩意，所以页面部分未使用任何ajax框架，只是用最基本的ajax原理实现。页面会将id通过ajax传到后台。

2、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>TestAjaxServlet</servlet-name>
<servlet-class>com.ajax.TestAjaxServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>TestAjaxServlet</servlet-name>
    <url-pattern>/servlet/TestAjaxServlet</url-pattern>
</servlet-mapping>

<welcome-file-list>
    <welcome-file>ajaxdemo.jsp</welcome-file>
</welcome-file-list>
</web-app>

说明：既然用到servlet了，那难免要配置一下web.xml了，将对应servlet信息配置在web.xml中。

3、TestAjaxServlet.java

package com.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;

@SuppressWarnings("serial")
public class TestAjaxServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

  response.setContentType("text/html");
  String id = request.getParameter("id");
  //可在此处判断id是否为空，并根据id做你相应的处理，随意！
  PrintWriter out = response.getWriter();
  out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
  out.println("<HTML>");
  out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
  out.println(" <BODY>");
  out.print(id);
  out.println(" </BODY>");
  out.println("</HTML>");
  out.flush();
  out.close();
}

}

说明，写一个最最……简单的doPost方法，可以加上你自己的代码，处理完了id，把它毫不留情的扔回页面，然后看看结果吧。

结尾：谨献给接触java web希望了解ajax但又在迷茫中的朋友。

如何从JavaFX应用程序进入RESTful网络服务 [2013-12-7]

程序员常用的Flex代码总结 [2013-12-7]

Apusic上用JavaMail发邮件 [2013-12-7]

推荐下一代网络开发框架Stripes [2013-12-7]

JAVA进阶：提高SQL性能的几种方法 [2013-12-7]

开发人员希望使用的六种脚本语言 [2013-12-7]