Ajax简单实例

李云泽 — Tue, 06 Nov 2007 07:12:00 GMT

//设一个变量

var XMLHttpReq=false;
//创建一个XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.XMLHttpRequest){ //Mozilla
XMLHttpReq=new XMLHttpRequest();
}
else if(window.ActiveXObject){
try{
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
}

//发送请求函数
function send(url){
createXMLHttpRequest();
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange=proce; //指定响应的函数
XMLHttpReq.send(null); //发送请求
}

function proce(){
if(XMLHttpReq.readyState==4){ //对象状态
if(XMLHttpReq.status==200){//信息已成功返回，开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("root")[0].getElementsByTagName("father")[0].firstChild.data;
window.alert(res);
}else{
window.alert("所请求的页面有异常");
}
}
}

//身份验证
function check(){
var name=document.getElementById("name").value;

if(name==""){
alert("请输入姓名");
return false;
}
else{
send('/WEB-INF/Xml.xml');
}
}
下面的可以取到ＸＭＬ．xml中的数据
var res=XMLHttpReq.responseXML.getElementsByTagName("father")[1].getElementsByTagName("children")[0].firstChild.data;

XML.XML
< xml version="1.0" encoding="UTF-8" >

      华
      jack


      合营

李云泽 2007-11-06 15:12 发表评论

Ajax实现二级联动下拉框

李云泽 — Thu, 20 Sep 2007 02:04: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>

运行结果图：

李云泽 2007-09-20 10:04 发表评论

Ajax原理详细说明

李云泽 — Fri, 14 Sep 2007 07:26:00 GMT

摘要: Ajax 由 HTML 、 JavaScript™ 技术、 DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 ... 阅读全文

李云泽 2007-09-14 15:26 发表评论

BlogJava-我思故我强-文章分类-Ajax

23个免费的AJAX树菜单组件

Ajax简单实例

Ajax实现二级联动下拉框

Ajax原理详细说明