ajax

1.ajax(asynchronous javascript and xml)
    (1)ajax是什么?
        ajax是一种用来改善用户体验的技术,其实质是
    利用浏览器提供的一个特殊对象(XMLHttpRequest
    对象)异步地向服务器发送请求,服务器一般只需要
    返回部分数据(文本或者xml文档),浏览器利用这些
    数据更新当前页面。整个过程,页面刷新,不打断
    用户的操作。
        注:
            异步:ajax对象向服务器发送请求时,
            浏览器不会销毁当前页面,用户仍然可
            以对当前页面做其它操作。
    (2)ajax对象如何获得
            function getXhr(){
                var xhr = null;
                if(window.XMLHttpRequest){
                    //非ie浏览器
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject(
                    'Microsoft.XMLHttp');
                }
                return xhr;
            }
    (3)ajax对象的几个重要的属性
        1)onreadystatechange:用来绑订一个事件处理
        函数(该函数用来处理readystatechange事件)。
            注:当ajax对象的readyState属性发生了改变,
            比如,从0变成了1,就会产生readystatechange
            事件。
        2)readyState:有5个值,分别是0,1,2,3,4,表示
         ajax对象与服务器之间通信的状态。比如值为4时,
         表示ajax对象已经获得了服务器返回的所有的数据。
        3)responseText:获得服务器返回的文本。
        4)responseXML:获得服务器返回的xml文档。
        5)status:获得服务器返回的状态码。
    (4)编程步骤
        step1,获得ajax对象。
            比如
                var xhr = getXhr();
        step2,使用ajax对象发送请求。
            1)get请求
                xhr.open('get',
                    'check_uname.do?uname=Tom',true);   
                xhr.onreadystatechange=f1;
                xhr.send(null);     
                注:
                    true:发送异步请求(浏览器不会销毁
                    当前页面,用户仍然可以对当前页面做其它
                    操作)。
                    false:发送同步请求(浏览器不会销毁
                    当前页面,浏览器会锁定当前页面,用户
                    不能够对当前页面做其它操作)。
        step3,编写服务器端的程序,一般不需要返回
                完整的页面,只需要返回部分数据。
        step4,编写事件处理函数f1
                function f1(){
                    //必须等到ajax对象获得了服务器返回的
                    //所有数据。
                    if(xhr.readyState == 4){
                        var txt = xhr.responseText;
                        //使用txt更新当前页面。
                    }
                }
1.编码问题
    (1)发送get请求
        1)乱码问题产生的原因:
        ie浏览器提供的ajax对象在发送get请求时,会
    对中文使用gbk编码,而其它浏览器使用utf-8编码。
        服务器端,默认情况下,会使用iso-8859-1去解码。
        2)如何解决
            step1,让服务器使用utf-8来解码。
            修改tomcat的配置文件(conf/server.xml)
                <Connector URIEncoding="utf-8">
                注:只针对get请求有效。
            step2,使用encodeURI函数对请求地址进行处理。
            注:encodeURI是js内置的函数,直接使用即可。
            该函数会对中文参数使用utf-8来编码。
    (2)发送post请求
        1)乱码问题产生的原因
            浏览器提供的ajax对象对中文参数都会使用
            utf-8来编码。
            服务器端默认使用iso-8859-1来解码。
        2)解决方式
            request.setCharacterEncoding("utf-8");
2,发送post请求
    xhr.open('post','check_uname.do',true);
    xhr.setRequestHeader('content-type',
    'application/x-www-form-urlencoded');
    xhr.onreadystatechange=f1;
    xhr.send('uname=' + $F('username'));
    注:
        按照http协议要求,发送post请求时,必须提供
    "content-type"消息头。而ajax对象默认情况下生成
    的请求数据包里面,没有提供该消息头,需要调用
    setRequestHeader方法来添加。

3.json (javascript object natation js对象声明)
    (1)什么是json?
        是一种轻量级的数据交换技术标准。
        1)数据交换:
            将数据转换成一种与平台无关的数据格式(
            比如xml或者json)然后发送给接收方来处理。
        2)轻量级:
            跟xml相比,json文档更小,解析速度更快。
            xml格式
                <stock>
                    <code>600015</code>
                    <name>山东高速</name>
                    <price>20</price>
                </stock>
            json格式 
            {"code":"600015",
            "name":"山东高速","price":20}
    (2)json语法 www.json.org
        1)表示一个对象
1,缓存问题
    (1)什么是缓存问题
        ie浏览器提供的ajax对象在发送get请求时,
    会查看请求地址是否访问过,如果访问过,则
    不再发送新的请求,而是显示之前的结果。
    (2)如何解决
        在请求地址后面添加上随机数。
        比如:
            getNumber.do?Math.random();


2,发送同步请求
    (1)什么是同步请求?
        当ajax对象向服务器发送请求时,浏览器不会
    销毁当前页面,浏览器会锁定当前页面,用户对
    当前页面不能做其它操作。
    (2)如何发送同步请求
        open(请求方式,请求地址,false);

1)
regist.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
  <head>
    <style type="text/css">
      .tips{
        color:red;
      }
    </style>

    <!-- 导入外部js文件: -->
    <script type="text/javascript" src="js/my.js"></script>

    <script type="text/javascript">
    //JS尽量避免全局变量
       function check_uname(){
        //1获得ajax对象
        var xhr = getXhr();
        //2使用ajax对象发请求。(true:异步发请求)
        xhr.open('get','check_uname.do?uname='+$F('username'),'true');

        //匿名内部函数:
        xhr.onreadystatechange=function(){
          if(xhr.readyState == 4){
            //4处理服务器返回的数据
            var txt  = xhr.responseText;
            //innerHTML:读取或者修改节点的HTML内容
            $('uname_msg').innerHTML = txt;

         }
        };
        xhr.send(null);
       }
    </script>
  </head>

  <body>
  <form action="">
    <fieldset>
       <legend>注册</legend>
                  用户名:<input id="username" name="uername" onblur="check_uname();"/>

       <!-- 用户名是否被占用提示内容: -->
       <span class="tips" id="uname_msg"></span>
                  <br/>
                    密码:<input type="password" name="pwd"/><br/>
       <input type="submit" value="提交"/>
    </fieldset>
  </form>
  </body>
</html>

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
      function getXhr(){
        var xhr = null;
        if(window.XMLHttpRequest){
           //非IE浏览器
           xhr = new XMLHttpRequest();
        }else{
           xhr = new ActiveXObject('Microsoft.XMLHttp');
        }
        return xhr;
      }

    </script>
  </head>

  <body>
    <a href="javascript:;" onclick="alert(getXhr())">点这里</a><br>
  </body>
</html>

ActionServlet.java

package web;

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


    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String uri = request.getRequestURI();
        String action = uri.substring(
                uri.lastIndexOf("/")+1, uri.lastIndexOf("."));
        if("check_uname".equals(action)){
            String uname = request.getParameter("uname");

            if("Tom".equals(uname)){
                out.println("用户名被占用");
            }else{
                out.println("可以使用");
            }
        }

        out.close();
    }

}

(2)
regist.jsp

<%@ page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<html>
  <head>
    <style type="text/css">
      .tips{
        color:red;
      }
    </style>

    <!-- 导入外部js文件: -->
    <script type="text/javascript" src="js/my.js"></script>

    <script type="text/javascript">
    //JS尽量避免全局变量

      //get请求:
       function check_uname(){
        //1获得ajax对象
        var xhr = getXhr();
        //2使用ajax对象发请求。(true:异步发请求)
        var uri = 'check_uname.do?uname='+$F('username');
        /*
             使用encodeURI函数对请求地址进行处理
                (encodeURI函数是JS内置的函数,直接使用即可,该函数会对中文使用utf-8来编码)
        */
        xhr.open('get',encodeURI(uri),'true');

        //匿名内部函数:
        xhr.onreadystatechange=function(){
          if(xhr.readyState == 4){
             //服务器返回200,则处理。否则,或者服务器端处理,或'检查用户名出错';
            if(xhr.status == 200){
                //4处理服务器返回的数据
                var txt  = xhr.responseText;
                //innerHTML:读取或者修改节点的HTML内容
                $('uname_msg').innerHTML = txt;
            }else{
                $('uname_msg').innerHTML = '检查用户名出错';
            }

         }
        };

        xhr.send(null);
       }
       //使用post请求
       function check_uname2(){
         //1,获得ajax对象
         var xhr = getXhr();
         //2,发
         xhr.open('post','check_uname.do',true);

         //http协议的要求,ajax没有,所以这里添加消息头:
         xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
         xhr.onreadystatechange = function(){
           if(xhr.readyState == 4 && xhr.status == 200){
               var txt  = xhr.responseText;
               $('uname_msg').innerHTML = txt;
           }         
         };
        xhr.send('uname='+ $F('username'));//请求参数放进来

       }
    </script>
  </head>

  <body>
  <form action="regist.do" method="post">
    <fieldset>
       <legend>注册</legend>
                  用户名:<input id="username" name="uername" onblur="check_uname2();"/>

       <!-- 用户名是否被占用提示内容: -->
       <span class="tips" id="uname_msg"></span>
                  <br/>
                    密码:<input type="password" name="pwd"/><br/>
       <input type="submit" value="提交"/>
    </fieldset>
  </form>
  </body>
</html>

ActionServlet.java

package web;

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 ActionServlet extends HttpServlet {
    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//只对post请求有效

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String uri = request.getRequestURI();
        String action = uri.substring(
                uri.lastIndexOf("/")+1, uri.lastIndexOf("."));
        if("check_uname".equals(action)){
            //模拟一个系统异常 (访问数据库出问题)
            //if(1 == 1){
            //  throw new ServletException();
            //}
            String uname = request.getParameter("uname");
            System.out.println(uname);
            if("李白".equals(uname)){
                out.println("用户名被占用");
            }else{
                out.println("可以使用");
            }
        }

        out.close();
    }

}

2_2
city.jsp

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

<html>
  <head>
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript" src="js/my.js"></script>
    <script type="text/javascript">
       function showCities(){
         var xhr = getXhr();
         xhr.open('get','getCities.do?province='+$F('s1'),true);
         xhr.onreadystatechange = function(){
           if(xhr.readyState == 4 && xhr.status == 200){
            //获得服务器返回的json字符串
            //"朝阳,cy;海淀,hd"
             var txt = xhr.responseText;
             var arr = txt.split(';');
             //添加之前清空s2
             $('s2').innerHTML='';
             for(i=0;i<arr.length;i++){
                //cities:朝阳,cy
                var cities = arr[i];
                var city = cities.split(',');
                //新建立一个option: city[0],city[1] :value 和描述
                var op = new Option(city[0],city[1]);
                $('s2').options[i] = op;
             }
           }
         };
         xhr.send(null);

       }
    </script>
  </head>

  <body style="font-size:30px;" onload="showCities()">
     <select id="s1" style="width:120px" onchange="showCities()">
        <option value="bj">北京</option>
        <option value="sd">山东</option>
        <option value="hn">湖南</option>
     </select>
     <select style="width:120px" id="s2">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
     </select>

  </body>
</html>

json.html

<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript">
      function f1(){
        var obj = new Object();
        obj.name = 'John';
        obj.age = 22;
        view(obj);
      }
      function f2(){
        var obj = {name:"Tom",age:33};
        //但是json属性名必须双引号括起来,JS加不加都可(创建属性对象)

        view(obj);
      }


      function view(o){
        alert(o.name);
      }

     function f3(){
        var obj = {
           "name":"Sally",
           "address":{
              "city":"bj",
              "street":"ca",
              "room":123
              }
        };
        alert(obj.address.city);
      }
      function f4(){
        var arr=[{name:"Tom",age:33},
        {name:"Jetty",age:23,}];
        alert(arr[1].name);
      }
      //把json字符串转为js对象,或js对象组成的数组
      function f5(){
        var str = '{"name":"Tom","age":33}';
        //利用框架prototype转换:
        var obj = str.evalJSON();
        alert(obj.name);
      }
      function f6(){
        //字符串用加号连起来
        var str = '[{name:"Tom",age:33},'+
        '{name:"Jetty",age:23}]';
        //利用框架prototype转换:
        var arr = str.evalJSON();
        alert(arr[1].name);
      }
    </script>
  </head>

  <body>
    <a href="javascript:;" onclick="f6()">ClickHere</a>
  </body>
</html>

regist.jsp

<%@ page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<html>
  <head>
    <style type="text/css">
      .tips{
        color:red;
      }
    </style>

    <!-- 导入外部js文件: -->
    <script type="text/javascript" src="js/my.js"></script>
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript">
    //JS尽量避免全局变量

      //get请求:
       function check_uname(){
        //1获得ajax对象
        var xhr = getXhr();
        //2使用ajax对象发请求。(true:异步发请求)
        var uri = 'check_uname.do?uname='+$F('username');
        /*
             使用encodeURI函数对请求地址进行处理
                (encodeURI函数是JS内置的函数,直接使用即可,该函数会对中文使用utf-8来编码)
        */
        xhr.open('get',encodeURI(uri),'true');

        //匿名内部函数:
        xhr.onreadystatechange=function(){
          if(xhr.readyState == 4){
             //服务器返回200,则处理。否则,或者服务器端处理,或'检查用户名出错';
            if(xhr.status == 200){
                //4处理服务器返回的数据
                var txt  = xhr.responseText;
                //innerHTML:读取或者修改节点的HTML内容
                $('uname_msg').innerHTML = txt;
            }else{
                $('uname_msg').innerHTML = '检查用户名出错';
            }

         }
        };

        xhr.send(null);
       }
       //使用post请求
       function check_uname2(){
         //1,获得ajax对象
         var xhr = getXhr();
         //2,发
         xhr.open('post','check_uname.do',true);

         //http协议的要求,ajax没有,所以这里添加消息头:
         xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
         xhr.onreadystatechange = function(){
           if(xhr.readyState == 4 && xhr.status == 200){
               var txt  = xhr.responseText;
               $('uname_msg').innerHTML = txt;
           }         
         };
        xhr.send('uname='+ $F('username'));//请求参数放进来

       }
    </script>
  </head>

  <body>
  <form action="regist.do" method="post">
    <fieldset>
       <legend>注册</legend>
                  用户名:<input id="username" name="uername" onblur="check_uname2();"/>

       <!-- 用户名是否被占用提示内容: -->
       <span class="tips" id="uname_msg"></span>
                  <br/>
                    密码:<input type="password" name="pwd"/><br/>
       <input type="submit" value="提交"/>
    </fieldset>
  </form>
  </body>
</html>

stock.jsp

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

<html>
  <head>
    <style type="text/css">
      #d1{
        width:500px;
        height:320px;
        background-color:black;
        margin-left:300px;
        margin-top:30px;
      }
      #d2{
        color:white;
        background-color:red;
        height:35px;
      }
      table{
        color:yellow;
        font-style:italic;
        font-size:24px;
      }
    </style>
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript" src="js/my.js"></script>
    <script type="text/javascript">
      function showStock(){
        setInterval(quoto,5000)
      }
      /**
       异步向服务器发送请求,服务器返回json字符串(几只股票信息)
           将json字符串转为js对象组成的数组,然后遍历数组,更新表格
      */
      function quoto(){
        var xhr = getXhr();
        xhr.open('get','getStock.do',true);
        xhr.onreadystatechange = function(){
          if(xhr.readyState == 4 && xhr.status == 200){
            //获得服务器返回的json字符串
            var txt = xhr.responseText;
            //json字符串转为js对象组成的数组
            var arr = txt.evalJSON();
            var htmlContent = "";
            for(i=0;i<arr.length;i++){
               var s = arr[i];
               htmlContent += "<tr><td>" 
                 + s.code + "</td><td>" 
                 + s.name + "</td><td>" 
                 + s.price + "</td></tr>";
            }

            $('tb1').innerHTML = htmlContent;
            /*ie浏览器只有td可以用innerHTML属性
            tbody,thead,tr都不可
                   可以用insertRow,insertCell解决
                   或者使用框架jQuery解决兼容问题*/
          }
        };
        xhr.send(null);

      }
    </script>
  </head>

  <body style="font-size:30px;" onload="showStock()">
     <div id="d1">
       <div id="d2">股票实时行情</div>
       <div id="d3">
            <table width="100%" >
               <thead>
                  <tr>
                      <td>代码</td>
                      <td>名称</td>
                      <td>报价</td>
                  </tr>
               </thead>
               <tbody id="tb1">


               </tbody>
            </table>       
       </div>
     </div>
  </body>
</html>

Stock.java

package bean;

public class Stock {
    private String code;
    private String name;
    private double price;
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public double getPrice() {
        return price;
    }
    public void setPrice(double price) {
        this.price = price;
    }

}

Test.java

package json;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import bean.Stock;

public class Test {
    /**
     * 将Java对象转为json字符串
     */
    public static void test1(){
        Stock s = new Stock();
        s.setCode("600015");
        s.setName("山东高速");
        s.setPrice(20);
        //使用json官方提供的工具转换
        JSONObject obj = JSONObject.fromObject(s);
        String jsonStr = obj.toString();
        System.out.println(jsonStr);
    }

    /**
     * 将java对象组成的数组或集合转为json字符串
     */
    public static void test2(){
        List<Stock> stocks = new ArrayList<Stock>();
        for(int i=0;i<3;i++){
            Stock s = new Stock();
            s.setCode("60001" + ( i + 1));
            s.setName("山东高速" + (i + 1));
            s.setPrice(20 + i);
            stocks.add(s);
        }
        //fromObject()方法里也可以传进来数组
        JSONArray array = JSONArray.fromObject(stocks);
        String jsonStr = array.toString();
        System.out.println(jsonStr);
    }

    public static void main(String[] args) {
        test1();
        test2();
    }

}

ActionServlet.java

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import bean.Stock;

public class ActionServlet extends HttpServlet {
    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//只对post请求有效

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String uri = request.getRequestURI();
        String action = uri.substring(
                uri.lastIndexOf("/")+1, uri.lastIndexOf("."));
        if("check_uname".equals(action)){
            //模拟一个系统异常 (访问数据库出问题)
            //if(1 == 1){
            //  throw new ServletException();
            //}
            String uname = request.getParameter("uname");
            System.out.println(uname);
            if("李白".equals(uname)){
                out.println("用户名被占用");
            }else{
                out.println("可以使用");
            }
        }else if("getStock".equals(action)){
            List<Stock> stocks = new ArrayList<Stock>();
            Random r = new Random();
            for(int i=0;i<8;i++){
                Stock s = new Stock();
                s.setCode("60001" + r.nextInt(10));
                s.setName("山东高速" + r.nextInt(10));
                s.setPrice(getPrice(r));
                stocks.add(s);
            }
            //fromObject()方法里也可以传进来数组
            JSONArray array = JSONArray.fromObject(stocks);
            String jsonStr = array.toString();
            out.println(jsonStr);
        }else if("getCities".equals(action)){
            String provnice = request.getParameter("province");
            System.out.println(provnice);
            if("bj".equals(provnice)){
                out.println("朝阳,cy;海淀,hd");
            }else if("sd".equals(provnice)){
                out.println("济南,jn;青岛,qd;烟台,yt");
            }else{
                out.println("长沙,cs;衡阳,hy");
            }


        }

        out.close();
    }
    private double getPrice(Random r){
        double price = 0;
        BigDecimal b = new BigDecimal(r.nextDouble()*100);
        //四舍五入
        price = b.setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
        return price;
    }

}

(3)
regist.jsp

<%@ page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<html>
  <head>
    <style type="text/css">
      .tips{
        color:red;
        font-style:italic;
      }
    </style>
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript" src="js/my.js"></script>
    <script type="text/javascript">
      function check_uname(){
        /*检查用户名是否为空
              如果为空则不能提交
        */
        $('username_msg').innerHTML = '';
        if($F('username').strip().length == 0){//strip()兼容各浏览器
          $('username_msg').innerHTML = '用户名不能为空';
          return false;
        }
        /*
          检查用户名是否被占用,
          如果被占用,不能提交
        */
        //异步请求:
        var flag = false;
        var xhr = getXhr();
        //encodeURI暂时不用
        //false:发送同步请求(如果写成异步无法提交)
        xhr.open('get','check_uname.do?uname='+$F('username').strip(),true);
        //绑定函数,函数还没执行
        xhr.onreadystatechange = function(){
           if(xhr.readyState == 4 && xhr.status == 200){
              var txt  = xhr.responseText;
              //alert(txt.length);out.println有回车
              if(txt == 'no'){
                $('username_msg').innerHTML='用户名被占用';
                flag = false;
              }else{
                $('username_msg').innerHTML='可以使用';
                flag = true;
              }
           }
        };
        xhr.send(null);//发请求
        /*
          发送同步请求,此时浏览器不会向下执行任何代码,
          需要等待服务器的响应发送回来才会继续向下执行(会调用上面的内部函数)
        */
        return flag;
      }
      function beforeSubmit(){
        var rs = check_uname();//&& check_password();
        return rs;
      }
    </script>
  </head>

  <body>
  <form action="regist.do" method="post"
   onsubmit="return beforeSubmit();">
    <fieldset>
       <legend>注册</legend>
                  用户名:<input id="username" name="username" onblur="check_uname();"/>

       <!-- 用户名是否被占用提示内容: -->
       <span class="tips" id="username_msg"></span>
                  <br/>
                    密码:<input type="password" name="pwd"/><br/>
       <input type="submit" value="提交"/>
    </fieldset>
  </form>
  </body>
</html>

getNumber.jsp

<%@ page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<html>
  <head>
     <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
     <script type="text/javascript" src="js/my.js"></script>
     <script type="text/javascript">
        function showNumber(){
          var xhr = getXhr();
          //加 ?' + Math.random欺骗IE浏览器,让它以为每次地址都不一样
          //或者直接发post请求
          xhr.open('get','getNumber.do?' + Math.random(),true);
          xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var txt = xhr.responseText;
                    $('d1').innerHTML = txt;
                }
          };
          xhr.send(null);
        }
     </script>
  </head>

  <body style="font-size:30px">
     <a href="javascript:;" onclick="showNumber();">点击此处</a>
     <div id="d1"></div>

  </body>
</html>

ActionServlet.java

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {
    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String uri = request.getRequestURI();
        String action = uri.substring(
                uri.lastIndexOf("/")+1, uri.lastIndexOf("."));
        if("getNumber".equals(action)){
            Random r = new Random();
            int number = r.nextInt(1000);
            System.out.println(number);
            out.println(number);
        }else if("check_uname".equals(action)){
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            String username = request.getParameter("uname");
            System.out.println("username:"+username);
            if("Tom".equals(username)){
                out.print("no");//不要换行
            }else{
                out.print("yes");
            }
        }
        out.close();
    }

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值