热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

AJAX入门实例教程

一、开门见山这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来。不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人。关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋的文字,在这里我也不想照本宣科。只想说

一、开门见山

    这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来。不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人。
关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋的文字,在这里我也不想照本宣科。
    只想说说我感觉到的一些优点,对于不对,大家也可以和我讨论:
首先是异步交互,用户感觉不到页面的提交,当然也不等待页面返回。这是使用了AJAX技术的页面给用户的第一感觉。
    其次是响应速度快,这也是用户强烈体验。
然后是与我们开发者相关的,复杂UI的成功处理,一直以来,我们对B/S模式的UI不如C/S模式UI丰富而苦恼。现在由于AJAX大量使用JS,使得复杂的UI的设计变得更加成功。
    最后,AJAX请求的返回对象为XML文件,这也是一个潮流,就是WEB SERVICE潮流一样。易于和WEB SERVICE结合起来。
    好了,闲话少说,让我们转入正题吧。
    我们的第一个例子是基于Servlet为后台的一个web应用。
二、基于Servlet的AJAX

    第一个例子是关于关联选择框的问题,如图:
这是一个很常见的UI,当用户在第一个选择框里选择ZHEJIANG时,第二个选择框要出现ZHEJIANG的城市;当用户在第一个选择框里选择JIANGSU时,第二个选择框里要出现JIANGSU的城市。
    首先,我们来看配置文件web.xml,在里面配置一个servlet,跟往常一样:
   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">
 
 SelectCityServlet
 com.stephen.servlet.SelectCityServlet
 

 
 SelectCityServlet
 /servlet/SelectCityServlet
 

 

    然后,来看我们的JSP文件:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    第一眼看来,跟我们平常的JSP没有两样。仔细一看,不同在JS里头。
我们首先来看第一个方法:getResult(stateVal),在这个方法里,首先是取得XmlHttpRequest;然后设置该请求的url:req.open("GET",url, true);接着设置请求返回值的接收方法:req.Onreadystatechange= complete;该返回值的接收方法为——complete();最后是发送请求:req.send(null);
然后我们来看我们的返回值接收方法:complete(),这这个方法里,首先判断是否正确返回,如果正确返回,用DOM对返回的XML文件进行解析。关于DOM的使用,这里不再讲述,请大家参阅相关文档。得到city的值以后,再通过buildSelect(str,sel)方法赋值到相应的选择框里头去。
    最后我们来看看Servlet文件:
 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;
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class SelectCityServlet extends HttpServlet {
     public SelectCityServlet() {
super();
     }
     public void destroy() {
super.destroy();
     }
     public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String state = request.getParameter("state");
StringBuffer sb=new StringBuffer("");
if ("zj".equals(state)){
sb.append("hangzhouhuzhou");
} else if("zs".equals(state)){
sb.append("nanjingyangzhousuzhou");
}
sb.append("
");
PrintWriter out=response.getWriter();
out.write(sb.toString());
out.close();
     }
 }
这个类也十分简单,首先是从request里取得state参数,然后根据state参数生成相应的XML文件,最后将XML文件输出到PrintWriter对象里。
    到现在为止,第一个例子的代码已经全部结束。是不是比较简单?我们进入到第二个实例吧!
    这次是基于JSP的AJAX的一个应用。
三、基于JSP的AJAX

   这个例子是关于输入校验的问题,我们知道,在申请用户的时候,需要去数据库对该用户性进行唯一性确认,然后才能继续往下申请。如图:
这种校验需要访问后台数据库,但又不希望用户在这里提交后等待,当然是AJAX技术大显身手的时候了。
    首先来看显示UI的JSP:
 
 
 
 
 
 
 
 
 
 
  
 User Name: 
 
 
 
 
 
所有的JS都跟上一个例子一样,不同的只是对返回值的操作,这次是用alert来显示:alert(http_request.responseText);
    我们来看处理逻辑JSP:
 <%@ page cOntentType="text/html; charset=gb2312" language="java" errorPage="" %>
 <%
 String username= request.getParameter("username");
 if("educhina".equals(username)) out.print("用户名已经被注册,请更换一个用户名。");
 else out.print("用户名尚未被使用,您可以继续。");
 %>
    非常简单,先取得参数,然后作处理,最后将结果打印在out里。
我们的第三个例子仍然以这个唯一性校验为例子,这次结合Struts开发框架来完成AJAX的开发。
四、基于Struts的AJAX

    首先,我们仍然是对Struts应用来做配置,仍然是在struts-config,xml文件里做配置,如下:
         scope="request" path="/ajax/check">
      
 

    跟普通的Struts应用的配置一样,只是没有ActionForm的配置。
    下面是Action类:
 package com.ajax;
 import java.io.PrintWriter;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import org.apache.struts.action.Action;
 import org.apache.struts.action.ActionForm;
 import org.apache.struts.action.ActionForward;
 import org.apache.struts.action.ActionMapping;
 import org.apache.struts.action.DynaActionForm;
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class CheckAction extends Action
 {
  public final ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
   throws Exception
   {
    System.out.println("haha...............................");
    String username= request.getParameter("username");
    System.out.println(username);
    String retn;
    if("educhina".equals(username)) retn = "Can't use the same name with the old use,pls select a difference...";
    else retn = "congraducation!you can use this name....";
    PrintWriter out=response.getWriter();
out.write(retn);
out.close();
    return mapping.findForward("success");
   }
  public static void main(String[] args)
  {
  }
 }
    我们可以看到里面的逻辑跟上例中Servlet里的逻辑一样。最后,我们来看看JSP:
 
 
 
 
 
 
 
 
 
 
  
 User Name: 
 
 
 
 
 
我们可以看到,JSP基本是一样的,除了要发送的url:ajax/check.do?username='+username。
最后,我们来看一个基于Struts和AJAX的复杂一些的例子,如果不用AJAX技术,UI的代码将十分复杂。
五、一个复杂的实例

    我们先来看看UI图:
 这是一个比较复杂的级联:一共八个列表框,三个下拉框。从第一个列表框里选择到第二个列表框里后,第一个选择框里的选项是第二个列表框的选择;然后,在第一个选择框里选择以后,与选择值关联的一些选项出现在第三个列表框里。从第三个列表框里选择选项到第四个列表框里,同样,第二个选择框的选项也是第四个列表框的选项;如果对第二个选择框进行选择后,与选择值关联的一些选项出现在第六个列表框里,依次类推……
这个UI的逻辑就比较复杂,但使用了AJAX使得我们实现起来就简单多了,这个例子我们除了使用Action类,还要用到POJO类和Business类,然后我们扩展的话,可以通过Business类和数据库连接起来。
    我们还是先看配置文件:
         scope="request" path="/ajax/select">
      
 

    然后看看Action类:
 /*
 /**
  * Title : Base Dict Class
  * Description : here Description is the function of class, here maybe multirows
  * Copyright: Copyright (c) 2004
  * @company Freeborders Co., Ltd.
  * @Goal Feng        
  * @Version       1.0
  */
 package com.ajax;
 import java.io.PrintWriter;
 import java.util.List;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import org.apache.struts.action.Action;
 import org.apache.struts.action.ActionForm;
 import org.apache.struts.action.ActionForward;
 import org.apache.struts.action.ActionMapping;
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class SelectAction extends Action
 {
  public final ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
   throws Exception
   {
    response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
          String type = request.getParameter("type");
          String id = request.getParameter("id");
System.out.println(id);
          StringBuffer sb=new StringBuffer("");
          PrintWriter out=response.getWriter();
out.write(sb.toString());
out.close();
System.out.println(sb.toString());
    return mapping.findForward("success");
   }
  public static void main(String[] args)
  {
  }
 }
    POJO类和Business类:
 package com.ajax;
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class SelectForm
 {
  private String text;
  private String value;
  /**
   * @return Returns the text.
   */
  public String getText()
  {
   return text;
  }
  /**
   * @param text The text to set.
   */
  public void setText(String text)
  {
   this.text = text;
  }
  /**
   * @return Returns the value.
   */
  public String getValue()
  {
   return value;
  }
  /**
   * @param value The value to set.
   */
  public void setValue(String value)
  {
   this.value = value;
  }
  public static void main(String[] args)
  {
  }
 }
 package com.ajax;
 import java.util.ArrayList;
 import java.util.List;
 /**
  * @author Administrator
  *
  * TODO To change the template for this generated type comment go to
  * Window - Preferences - Java - Code Style - Code Templates
  */
 public class SelectBusiness
 {
  public List getData(String id)
  {
   ArrayList list = new ArrayList();
   for(int i=1;i<6;i++)
   {
    SelectForm form = new SelectForm();
    form.setText(id+i);
    form.setValue(id+i);
    list.add(form);
   }
   return list;
  }
  public static void main(String[] args)
  {
  }
 }
    最后是JSP文件:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


  
  
    


                background=images/bg2.gif border=0>




















Resource Management >> New
Staff

 align=center border=0>




































 Personal
Information
Last
Modified : 06/06/2005
name="B323252">  

 border=0 name="DynamicTabsTable">
















Freeborders Experience
















FB Vertical Experience FB Customer
Experience
 






























 




























 
 
Project Experience SubProject
Experience
































 




























 
















name="B32">  




     
        
 
 虽然这个JSP复杂多了,但是关于AJAX的代码还是跟前面的例子一样,在这里我也就不多说了,请大家自己看。
六、蛇足

    好了,例子都说完了。废话也就不多说了,只说一件事:AJAX好像来势汹汹,要把我们用得极其普遍、极其习惯的Struts等的MVC开发模式取代掉一样。
其实,AJAX有它的优点,同样也有它的缺点。它一般用在用户不想等待返回结果的时候和复杂的UI上;其他时候,我们还是可以使用Struts等常规方法。
一句话,不要为了使用AJAX而使用AJAX,而是要在适合于使用AJAX的地方使用AJAX。
 


推荐阅读
  • 本文探讨了在通过 API 端点调用时,使用猫鼬(Mongoose)的 findOne 方法总是返回 null 的问题,并提供了详细的解决方案和建议。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 探讨如何高效使用FastJSON进行JSON数据解析,特别是从复杂嵌套结构中提取特定字段值的方法。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 在当前众多持久层框架中,MyBatis(前身为iBatis)凭借其轻量级、易用性和对SQL的直接支持,成为许多开发者的首选。本文将详细探讨MyBatis的核心概念、设计理念及其优势。 ... [详细]
  • XNA 3.0 游戏编程:从 XML 文件加载数据
    本文介绍如何在 XNA 3.0 游戏项目中从 XML 文件加载数据。我们将探讨如何将 XML 数据序列化为二进制文件,并通过内容管道加载到游戏中。此外,还会涉及自定义类型读取器和写入器的实现。 ... [详细]
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
  • 解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
    在处理Java项目中的JAR包冲突时,我们遇到了JaxWsDynamicClientFactory被弃用的问题,并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 本文详细介绍了如何利用Go语言和WebSockets技术构建一个高效的实时聊天系统。随着网络应用的日益复杂化,实时交互成为了提升用户体验的关键要素之一。通过本指南,开发者可以学习到最新的技术和最佳实践。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
author-avatar
大师傅放放风_769
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有