BlogJava-JAVA涂鸦-文章分类-Ajax

responseXML.documentElement 的问题

千山鸟飞绝 — Fri, 08 Jun 2007 13:06:00 GMT

1. 请检查返回 content-type 的值是否是 text/xml;

2. 请检查xmlhttp 的 responseText 的值。是否是合法的xml格式。是否顶行顶格写。encoding 声明和 context-type 中的是否相符等等...

千山鸟飞绝 2007-06-08 21:06 发表评论

Ajax实现三级联动下拉框

千山鸟飞绝 — Wed, 09 Aug 2006 07:21:00 GMT

摘要: 基于网友的要求，我贴出在项目中用到的三级联动的代码：jsp的代码：<%@ page contentType = "text/html; charset=GBK" import="java.util.*,com.wehave.hyerp.procurement.domain.Cgsqd"%><%@ taglib uri="struts-html" prefix="html" %&... 阅读全文

千山鸟飞绝 2006-08-09 15:21 发表评论

运用Ajax通过select下拉框获得数据

千山鸟飞绝 — Tue, 08 Aug 2006 05:28:00 GMT

摘要: 大伙应该在开发中遇到过这种情况，就是通过下拉框选择要显示的内容。如下图所示：在没用到ajax技术时，我们可以使用两种方法来解决，一种就是选择后再次获得下拉框的数据，和显示的数据一起反映在页面上，这是最笨的方法，因为你选择多少次，下拉框的数据就要从数据库重复读取多少次。另外一种方法就是将页面分两桢，上桢是下拉框，下桢就是要读取的内容。这样做比第一种方法进步了不少，但是分桢对页面控制又有了要求。使用A... 阅读全文

千山鸟飞绝 2006-08-08 13:28 发表评论

运用ajax制作提示页面

千山鸟飞绝 — Fri, 04 Aug 2006 01:35:00 GMT

摘要: ajax确实是个很好的技术，在提高客户的体验度上面能做很多以前不能做或者不好做的事情。出现提示页面就是一个很好的示例。需要制作提示页面的地方其实很多，但以前大多是要求用户点击相关信息进入详细信息页面察看，然后返回，再点击其他的信息察看详细信息页面。这样就降低了客户的体验度，在没有ajax的时候，我们是劝导客户只能这么做。现在用ajax就可以很轻松的解决这个问题了。我的平台仍然是struts+spr... 阅读全文

千山鸟飞绝 2006-08-04 09:35 发表评论

运用ajax技术的树型菜单

千山鸟飞绝 — Mon, 24 Jul 2006 02:03:00 GMT

摘要: 树型菜单可以说是项目中应用最为广泛的运用。以前无论使用微软控件的树型，还是比较优秀的阿赖树型，都是将数据全部读出，然后再分级显示。这样如果数据量大，那么第一次显示将需要客户等待很长一段时间，降低了客户的体验度。如今使用ajax，事情变得简单了。此运用参考了《征服web2.0开发技术详解》的例子。我使用的平台是struts+spring+hibernate，但与ajax打... 阅读全文

千山鸟飞绝 2006-07-24 10:03 发表评论

Ajax实现二级联动下拉框

千山鸟飞绝 — Wed, 17 May 2006 03:10:00 GMT

这个一个ajax的经典示例，也是ajax的长处所在。不多说了，下面来看代码。

项目结构图：

index.jsp:

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<html>
  <head>
    <title>My JSP 'index.jsp' starting pagetitle>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <SCRIPT type="text/javascript">
        var req;
        window.onload=function(){
        }

        function Change_Select()
        {
            var zhi=document.getElementById('hero').value;
            var url="select?id="+escape(zhi);
            if(window.XMLHttpRequest)
            {
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }

            if(req)
            {
                req.open("GET",url,true);
                req.onreadystatechange=callback;
                req.send(null);
            }
        }

        function callback()
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage();
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }

        function parseMessage()
        {
            var xmlDoc=req.responseXML.documentElement;
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_root=document.getElementById('skill');
            select_root.options.length=0;

            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }


        }
    SCRIPT>
  head>

  <body>
    <div align="center">
        <form name="form1" method="post" action="">
            <TABLE width="70%" boder="0" cellspacing="0">
                <TR>
                    <TD align="center">Double Select BoxTD>
                TR>
                <TR>
                    <TD>
                        <SELECT name="hero" id="hero" onChange="Change_Select()">
                            <OPTION value="0">UnboundedOPTION>
                            <OPTION value="1">D.K.OPTION>
                            <OPTION value="2">NEC.OPTION>
                            <OPTION value="3">BOSSOPTION>
                        SELECT>
                        <SELECT name="skill" id="skill">
                            <OPTION value="0">UnboundedOPTION>
                        SELECT>
                    TD>
                TR>
                <TR><td> td>TR>
            TABLE>
        form>
    div>
  body>
html>

SelectServlet.java:

package com;

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 SelectServlet extends HttpServlet {

    /**
     * Constructor of the object.
     */
    public SelectServlet() {
        super();
    }

    /**
     * Destruction of the servlet.

     */
    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    /**
     * The doGet method of the servlet.

     *
     * This method is called when a form has its tag value method equals to get.
     *
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/xml");
        response.setHeader("Cache-Control","no-cache");

        String targetId=request.getParameter("id").toString();
        String xml_start="";
        String xml_end="";
        String xml="";
        if(targetId.equalsIgnoreCase("0")){
            xml="";
        }else if(targetId.equalsIgnoreCase("1")){
            xml="";
            xml +="";
            xml +="";
            xml +="";
        }else if(targetId.equalsIgnoreCase("2")){
            xml="";
            xml +="";
            xml +="";
            xml +="";
        }else{
            xml="";
            xml +="";
            xml +="";
            xml +="";
        }
        String last_xml=xml_start+xml+xml_end;
        response.getWriter().write(last_xml);
    }

    /**
     * The doPost method of the servlet.

     *
     * This method is called when a form has its tag value method equals to post.
     *
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doGet(request,response);
    }

    /**
     * Initialization of the servlet.

     *
     * @throws ServletException if an error occure
     */
    public void init() throws ServletException {
        // Put your code here
    }

}

web.xml:

xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
    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">
  <servlet>
    <servlet-name>SelectServletservlet-name>
    <servlet-class>com.SelectServletservlet-class>
  servlet>

  <servlet-mapping>
    <servlet-name>SelectServletservlet-name>
    <url-pattern>/selecturl-pattern>
  servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.jspwelcome-file>
    welcome-file-list>
web-app>

运行结果图：

千山鸟飞绝 2006-05-17 11:10 发表评论

动态检查文本框中的数据

千山鸟飞绝 — Tue, 16 May 2006 05:11:00 GMT

摘要: ajax技术现在越来越受到大家的欢迎，因为它能很好的解决一些以前不好解决的问题，动态检查文本框中的数据就是体现之一。现在已经加上了数据库mysql，可以说得上是一个比较完整的例子了。下面就是怎样实现动态检查文本框中的数据一个例子：工程目录如下：CheckServlet.java:Code highlighting produced by Actipro CodeHighlighter (freew... 阅读全文

千山鸟飞绝 2006-05-16 13:11 发表评论