• 博客访问: 1651
  • 博文数量: 2
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 15
  • 用 户 组: 普通用户
  • 注册时间: 2017-04-19 22:53
文章分类
文章存档

2017年(2)

我的朋友
微信关注

IT168企业级官微



微信号:IT168qiye



系统架构师大会



微信号:SACC2013

订阅
热词专题
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

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

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

  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;

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

  15.     UserDao dao=new UserDao();
  16.     
  17.     public void destroy() {
  18.         super.destroy(); // Just puts "destroy" string in log
  19.         // Put your code here
  20.     }

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

  28.         response.setContentType("text/html");
  29.         PrintWriter out = response.getWriter();        
  30.         out.print(ok); //向网页返回数据 一定是string型的
  31.         out.flush();
  32.         out.close();
  33.     }

  34.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  35.             throws ServletException, IOException {
  36.         // fix 修改过
  37.         doGet(request, response);
  38.     }

  39.     /**
  40.      * Initialization of the servlet.

  41.      *
  42.      * @throws ServletException if an error occurs
  43.      */
  44.     public void init() throws ServletException {
  45.         // Put your code here
  46.     }

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

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

  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;

  8. import com.google.gson.Gson;

  9. import dao.UserDao;
  10. /**
  11.  * 省ajax json动态下拉列表
  12.  * @author YC
  13.  *
  14.  */
  15. public class TestServlet extends HttpServlet {

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

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

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

  45.     /**
  46.      * Initialization of the servlet.

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

  53. }
4.UserDAO.java

  1. package dao;

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

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

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


 

阅读(104) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册