欢迎访问第1万维网网站!用户名: 密码: [忘记密码]

合作代理 | 在线咨询

您的位置: 第一万维网 >> JAVA技术 >> 正 文

ajax入门小程序

来源:第一万维网   更新时间:2009-4-22 11:51:12

此小程序主要给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但又在迷茫中的朋友。

  • 上一篇文章:
  • 下一篇文章:
  • 最新图片新闻文章

    网友正在看下面的相关文章

    快捷操作

    本栏目最新文章

    业界新闻

    第一万维网公告

    本站最新图片文章

    第一万维网QQ客服

    为了给您提供更加方便快捷的服务请选择您的服务专员,点击QQ号码即可。
    企业在线客服QQ:800015119

    第一万维网快速服务导航