Chinaunix首页 | 论坛 | 博客

可乐牛yc.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

q_4828222

  • 博客访问： 293559
  • 博文数量： 30
  • 博客积分： 732
  • 博客等级： 军士长
  • 技术积分： 439
  • 用 户 组： 普通用户
  • 注册时间： 2012-05-10 00:13
文章分类

全部博文（30）

文章存档

2015年（1）

2013年（5）

2012年（24）

我的朋友
最近访客
推荐博文
相关博文
Ajax应用 1.自动查询（验证用户名存在） 2.按需取数据(动态刷新下拉列表)

分类： 系统运维

2012-07-05 15:58:24

1.什么是Ajax?  Asynchronous JavaScript and XML（ 异步JavaScript和XML ）

      一种创建交互式网页应用的网页开发技术
基于web标准（standards-based presentation）XHTML CSS的表示
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起
2.优势
①通过异步模式，提升了用户体验
②优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
 例子：Google Maps!

3.创建ajax程序的基本流程（以验证用户名存在性为例子）

①在<script>中创建XMLHttpRequest对象
②使用XMLHttpRequest对象创建请求request对象
  1. var request;
  2. if (window.XMLHttpRequest) { // Mozilla,...
  3.     request = new XMLHttpRequest();
  4.  }else if (window.ActiveXObject) { // IE
  5.        request = new ActiveXObject(“Msxml2.XMLHTTP”);
  6. }
③监视response的状态，写回调函数处理服务器返回的数据
  1. function checkme(){
  2.      //得到文本框值
  3.      var name=document.all.stname.value;
  4.      //把 name发给 servlet 或 jsp 防止缓存 加上一个 r=0.7649321
  5.      request.open("get","check?stname=" name "&r=" Math.random());
  6.      request.send(null);    
  7.      }
④使用XMLHttpRequest对象发送请求  使用事件触发

  1. request.onreadystatechange = sendName;
  2. function sendName(){    
  3.      if(request.readyState==4){ //接收完毕
  4.      //数据呢？
  5.      var fhz=request.responseText;
  6.     
  7.      if(fhz=="true"){ //用户存在了
  8.      document.all.info.innerHTML="用户名已存在";
  9.      document.all.info.style.color="red";
  10.      }else{
  11.      document.all.info.innerHTML="用户名可用";
  12.      document.all.info.style.color="green";
  13.      }    
  14.      }    
  15.      }
4.两个应用——验证用户存在否，动态加下拉列表
  
  1）注册 zhuce.jsp
  1. <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4.   <head>
  5.     <title>My JSP 'zhuce.jsp' starting page</title>
  6.      <script>
  7.      //学会 ajax 一个对象 XMLHttpRequest
  8.      // 两个方法 open(),send() 两个属性 readyState ,responseText 一个事件 onreadystatechange

  10.      var request=new XMLHttpRequest(); //注意这行只在ie7 --10 firefox 谷歌    
  11.      //给request 加一个事件
  12.      request.onreadystatechange = getSheng;
  13.     
  14.      function checkme(){
  15.      //得到文本框值
  16.      var name=document.all.stname.value;
  17.      //把 name发给 servlet 或 jsp 防止缓存 加上一个 r=0.7649321
  18.      request.open("get","check?stname=" name "&r=" Math.random());
  19.      request.send(null);    
  20.      }
  21.     
  22.      function sendName(){    
  23.      if(request.readyState==4){ //接收完毕
  24.      //数据呢？
  25.      var fhz=request.responseText;
  26.     
  27.      if(fhz=="true"){ //用户存在了
  28.      document.all.info.innerHTML="用户名已存在";
  29.      document.all.info.style.color="red";
  30.      }else{
  31.      document.all.info.innerHTML="用户名可用";
  32.      document.all.info.style.color="green";
  33.      }    
  34.      }    
  35.      }
  36.     
  37.      //初始化省列表
  38.      function initsheng(){
  39.      request.open("get","test?r=" Math.random());
  40.      request.send(null);
  41.      }
  42.     
  43.     
  44.      function getSheng(){
  45.      if(request.readyState==4){ //接收完毕
  46.      var fhz=request.responseText;
  47.      eval("var sz=" fhz);
  48.     
  49.      for(var i in sz){
  50.      //动态加下拉列表
  51.      var op=new Option(sz[i],sz[i]);
  52.      document.all.sheng.options.add(op);    
  53.      }    
  54.      }
  55.      }
  56.      </script>
  57.   </head>
  58.   
  59.   <body onload="initsheng()">
  60.               用户名<input type="text" id="stname" onblur="checkme()" />
  61.      <span id="info"></span>
  62.      <hr/>
  63.      <select id="sheng">
  64.         <option>请选择一个省</option>
  65.      </select>
  66.      
  67.   </body>
  68. </html>
2.CheckNameServlet.java
  1. package servlet;

  3. import java.io.IOException;
  4. import java.io.PrintWriter;

  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;

  11. import dao.UserDao;
  12. /**
  13.  * 检查用户名是否重复的servlet
  14.  * @author YC
  15.  *
  16.  */
  17. public class CheckNameServlet extends HttpServlet {

  19.     UserDao dao=new UserDao();
  20.     
  21.     public void destroy() {
  22.         super.destroy(); // Just puts "destroy" string in log
  23.         // Put your code here
  24.     }

  26.     public void doGet(HttpServletRequest request, HttpServletResponse response)
  27.             throws ServletException, IOException {
  28.         
  29.         String name=request.getParameter("stname");
  30.         System.out.println("得到你要检查的名字" name);
  31.         
  32.         boolean ok=dao.checkUser(name);

  34.         response.setContentType("text/html");
  35.         PrintWriter out = response.getWriter();        
  36.         out.print(ok); //向网页返回数据 一定是string型的
  37.         out.flush();
  38.         out.close();
  39.     }

  41.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  42.             throws ServletException, IOException {
  43.         // fix 修改过
  44.         doGet(request, response);
  45.     }

  47.     /**
  48.      * Initialization of the servlet.

  49.      *
  50.      * @throws ServletException if an error occurs
  51.      */
  52.     public void init() throws ServletException {
  53.         // Put your code here
  54.     }

  56. }
3.TestServlet.java
  1. package servlet;

  3. import java.io.IOException;
  4. import java.io.PrintWriter;

  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;

  11. import com.google.gson.Gson;

  13. import dao.UserDao;
  14. /**
  15.  * 省ajax json动态下拉列表
  16.  * @author YC
  17.  *
  18.  */
  19. public class TestServlet extends HttpServlet {

  21.     
  22.     UserDao dao=new UserDao();
  23.     
  24.     public void destroy() {
  25.         super.destroy(); // Just puts "destroy" string in log
  26.         // Put your code here
  27.     }

  29.     public void doGet(HttpServletRequest request, HttpServletResponse response)
  30.             throws ServletException, IOException {
  31.         
  32.         response.setCharacterEncoding("gbk");
  33.         response.setContentType("text/html");
  34.         PrintWriter out = response.getWriter();
  35.         
  36.         System.out.println("----------");
  37.         String ok[]= dao.getAllSheng();
  38.         Gson gson=new Gson();
  39.         String fh= gson.toJson(ok);
  40.         out.print(fh);
  41.         
  42.         
  43.         out.flush();
  44.         out.close();
  45.     }

  47.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  48.             throws ServletException, IOException {
  49.         // fix 修改过
  50.         doGet(request, response);
  51.     }

  53.     /**
  54.      * Initialization of the servlet.

  55.      *
  56.      * @throws ServletException if an error occurs
  57.      */
  58.     public void init() throws ServletException {
  59.         // Put your code here
  60.     }

  62. }
4.UserDAO.java

  1. package dao;

  3. import java.util.ArrayList;
  4. import java.util.List;

  6. public class UserDao {
  7.     
  8.     /**
  9.      * 检查用户名是否合法
  10.      * @param name
  11.      * @return
  12.      */
  13.     public boolean checkUser(String name){
  14.         
  15.         List<String> list=new ArrayList<String>();
  16.         list.add("fix");
  17.         list.add("xiaoxin");
  18.         list.add("world");
  19.         
  20.         if (list.contains(name)) {
  21.             return true; //在列表中存在
  22.         }else{
  23.             return false;
  24.         }        
  25.     }
  26.     
  27.     public String[] getAllSheng(){
  28.         String mp[] = {"安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西","陕西","上海","四川","天津","西藏","新疆","云南","浙江","重庆"};
  29.         return mp;
  30.     }
  31. }

    1)自动查询:是指网页上执行一定的客户端操作之后，在客户端不刷新的情况下，得到服务器端自动查询数据库后的内容，查询过程是异步进行。当然，能够利用AJAX技术实现。如自动补齐、验证用户名等。
2）按需取数据：也是在网页上执行一定的客户端操作之后，能够根据需要在服务器端自动获取相应内容，但是客户端不刷新，所有查询过程都是异步进行。在注册表单中，选择不同的省份后显示该省份的城市。


 

阅读(2675) | 评论(0) | 转发(1) |
0

上一篇：用户界面View 七. Spinner 下拉列表

下一篇：Spring MVC 原理小结+简单应用

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6