java深入探究13-js,ajax

链接：http://pan.baidu.com/s/1c2D0cAs 密码：uwm6

1.js

　　1)三种基本类型：

　　　　var num=100;
　　　　var str="哈哈";
　　　　var flag=true;

　　2）创建函数的三种方式：

　　　　正常模式：

　　　　　　function add(num1,num2){
　　　　　　　　return num1+num2;
　　　　　　}

　　　　构造器模式：

　　　　　　var add=new Function("num1","num2","return num1+num2");

　　　　匿名方式：

　　　　　　var add=function(num1,num2){return num1=num2;}

　　3)js中的对象

　　　　Date;String;Array;Math;自定义对象；window对象；status对象，location对象，history对象　

  <script type="text/javascript">
      //Date
      /* var nowStr=new Date().toLocaleDateString();
      window.alert(nowStr); */
      
      //String
      /* var str="String";
      var length=str.length;
      window.alert(length); */
      
      //Array
      /* var array=new Array("语文","数学","英语",true,123);
      for(var i=0;i<array.length;i++){
          document.write(array[i] + "   ");
      } */
      
      //Math
      /* for(var i=1;i<=10;i++){
          document.write(Math.floor(Math.random()*9)+1 + "<br/>");
      } */
      
      
      //自定义对象
      function Person(id,name,sal){
          this.id=id;
          this.name=name;
          this.sal=sal;
      }
      var p =new Person(1,"小平",70000);
      document.write("编号："+p.id+"<br/>");
      document.write("姓名："+p.name+"<br/>");
      document.write("薪水："+p.sal+"<br/>");
      
      //window对象
      /* var url = "04_images.html";
    window.open(url); */    
    
      //status对象,将当前时间设置到状态栏
      /* var nowStr = new Date().toLocaleString();
    window.status = nowStr; */
      
      //location对象,模拟用户在地址栏输入url访问其它页面的情况
      /* var url="04_images.html";
      window.location.href=url; */
      
      //history
      /* window.history.go(1); */
  </script>

View Code

2.ajax

　　创建ajax通用函数

function createAJAX(){
            var ajax = null;
            try{
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的浏览器不支持ajax，请更换浏览器");
                }
            }
            return ajax;
        }

View Code

　　get方式发送数据给servlet

　　　　需要注意点：get方式数据传输是靠url,所有传输中文时，需要转码，encodeURI();,之后到了后台需要将数据转为byte以ISO8859-1方式，再变为utf-8模式字符串

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
  </head>
  <body>
    
    <form>
        用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/>
        光标移出后，立即检查结果
    </form>
    <hr/>
    <span id="resID"></span>
    
    <script type="text/javascript">
        //创建AJAX异步对象，即XMLHttpRequest
        function createAJAX(){
            var ajax = null;
            try{
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的浏览器不支持ajax，请更换浏览器");
                }
            }
            return ajax;
        }
    </script>
    
    
    <script type="text/javascript">
        //定位文本框，同时提供焦点失去事件
        document.getElementById("usernameID").onblur = function(){
        //获取文本框中输入的值
        var username = this.value;
        //如果用户没有填内容
        if(username.length == 0){
            //提示 
            document.getElementById("resID").innerHTML = "用户名必填";
        }else{
            //对汉字进行UTF-8(U8)的编码
            username = encodeURI(username);
            //NO1)
            var ajax = createAJAX();
            //NO2)
            var method = "GET";
            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
            //alert(url);
            ajax.open(method,url);
            //NO3)
            ajax.send(null);
                
            //--------------------------------------------------------等待
                
            //NO4)
            ajax.onreadystatechange = function(){
                if(ajax.readyState == 4){
                    if(ajax.status == 200){
                        //NO5)
                        var tip = ajax.responseText;
                        //NO6)
                        document.getElementById("resID").innerHTML = tip;
                    }
                }
            }
        }
    }
    </script>
    
  </body>
</html>

View Code

　　post方式发送数据给servlet

　　　　需要注意点：因为ajax传数据到后台默认是get方式，一般会访问完url就就结束，所以为了能将content数据通过send发过去，需要给ajax设置请求头ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
  </head>
  <body>
    
    <form>
        用户名[POST]：<input id="usernameID" type="text" name="username" maxlength="4"/>
        光标移出后，立即检查结果
    </form>
    <hr/>
    <span id="resID"></span>
    
    <script type="text/javascript">
        //创建AJAX异步对象，即XMLHttpRequest
        function createAJAX(){
            var ajax = null;
            try{
                ajax = new ActiveXObject("microsoft.xmlhttp");
            }catch(e1){
                try{
                    ajax = new XMLHttpRequest();
                }catch(e2){
                    alert("你的浏览器不支持ajax，请更换浏览器");
                }
            }
            return ajax;
        }
    </script>
    
    
    <script type="text/javascript">
        //定位文本框，同时提供焦点失去事件
        document.getElementById("usernameID").onblur = function(){
            //获取文本框中输入的值
            var username = this.value;
            //如果用户没有填内容
            if(username.length == 0){
                //提示 
                document.getElementById("resID").innerHTML = "用户名必填";
            }else{
                var ajax = createAJAX();
                var method = "POST";
                var url = "${pageContext.request.contextPath}/UserServlet";
                //alert(url);
                ajax.open(method,url);
                
                //需要设置ajax请求头，因为这是ajax模式是get方式请求，访问完uri后就不访问,且会自动将请求体重汉字自动转换为UTF-8
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
                var content="username="username;
                //NO3)
                ajax.send(content);
                
                //--------------------------------------------------------等待
                
                //NO4)
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4){
                        if(ajax.status == 200){
                            //NO5)
                            var tip = ajax.responseText;
                            //NO6)
                            document.getElementById("resID").innerHTML = tip;
                        }
                    }
                }
            }
        }
    </script>
    
  </body>
</html>

View Code

3.json

　　将对象转为json对象可用JSONObject（阿里封装的json）

/*
 * Copyright 1999-2101 Alibaba Group.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.alibaba.fastjson;

import static com.alibaba.fastjson.util.TypeUtils.castToBigDecimal;
import static com.alibaba.fastjson.util.TypeUtils.castToBigInteger;
import static com.alibaba.fastjson.util.TypeUtils.castToBoolean;
import static com.alibaba.fastjson.util.TypeUtils.castToByte;
import static com.alibaba.fastjson.util.TypeUtils.castToBytes;
import static com.alibaba.fastjson.util.TypeUtils.castToDate;
import static com.alibaba.fastjson.util.TypeUtils.castToDouble;
import static com.alibaba.fastjson.util.TypeUtils.castToFloat;
import static com.alibaba.fastjson.util.TypeUtils.castToInt;
import static com.alibaba.fastjson.util.TypeUtils.castToLong;
import static com.alibaba.fastjson.util.TypeUtils.castToShort;
import static com.alibaba.fastjson.util.TypeUtils.castToSqlDate;
import static com.alibaba.fastjson.util.TypeUtils.castToTimestamp;

import java.io.Serializable;
import java.lang.reflect.InvocationHandler;
import java.lang.reflect.Method;
import java.math.BigDecimal;
import java.math.BigInteger;
import java.util.Collection;
import java.util.Date;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Set;

import com.alibaba.fastjson.annotation.JSONField;
import com.alibaba.fastjson.parser.ParserConfig;
import com.alibaba.fastjson.util.TypeUtils;

/**
 * @author wenshao[szujobs@hotmail.com]
 */
public class JSONObject extends JSON implements Map<String, Object>, Cloneable, Serializable, InvocationHandler {

    private static final long         serialVersionUID         = 1L;
    private static final int          DEFAULT_INITIAL_CAPACITY = 16;

    private final Map<String, Object> map;

    public JSONObject(){
        this(DEFAULT_INITIAL_CAPACITY, false);
    }

    public JSONObject(Map<String, Object> map){
        this.map = map;
    }

    public JSONObject(boolean ordered){
        this(DEFAULT_INITIAL_CAPACITY, ordered);
    }

    public JSONObject(int initialCapacity){
        this(initialCapacity, false);
    }

    public JSONObject(int initialCapacity, boolean ordered){
        if (ordered) {
            map = new LinkedHashMap<String, Object>(initialCapacity);
        } else {
            map = new HashMap<String, Object>(initialCapacity);
        }
    }

    public int size() {
        return map.size();
    }

    public boolean isEmpty() {
        return map.isEmpty();
    }

    public boolean containsKey(Object key) {
        return map.containsKey(key);
    }

    public boolean containsValue(Object value) {
        return map.containsValue(value);
    }

    public Object get(Object key) {
        return map.get(key);
    }

    public JSONObject getJSONObject(String key) {
        Object value = map.get(key);

        if (value instanceof JSONObject) {
            return (JSONObject) value;
        }

        return (JSONObject) toJSON(value);
    }

    public JSONArray getJSONArray(String key) {
        Object value = map.get(key);

        if (value instanceof JSONArray) {
            return (JSONArray) value;
        }

        return (JSONArray) toJSON(value);
    }

    public <T> T getObject(String key, Class<T> clazz) {
        Object obj = map.get(key);
        return TypeUtils.castToJavaBean(obj, clazz);
    }

    public Boolean getBoolean(String key) {
        Object value = get(key);

        if (value == null) {
            return null;
        }

        return castToBoolean(value);
    }

    public byte[] getBytes(String key) {
        Object value = get(key);

        if (value == null) {
            return null;
        }

        return castToBytes(value);
    }

    public boolean getBooleanValue(String key) {
        Object value = get(key);

        if (value == null) {
            return false;
        }

        return castToBoolean(value).booleanValue();
    }

    public Byte getByte(String key) {
        Object value = get(key);

        return castToByte(value);
    }

    public byte getByteValue(String key) {
        Object value = get(key);

        if (value == null) {
            return 0;
        }

        return castToByte(value).byteValue();
    }

    public Short getShort(String key) {
        Object value = get(key);

        return castToShort(value);
    }

    public short getShortValue(String key) {
        Object value = get(key);

        if (value == null) {
            return 0;
        }

        return castToShort(value).shortValue();
    }

    public Integer getInteger(String key) {
        Object value = get(key);

        return castToInt(value);
    }

    public int getIntValue(String key) {
        Object value = get(key);

        if (value == null) {
            return 0;
        }

        return castToInt(value).intValue();
    }

    public Long getLong(String key) {
        Object value = get(key);

        return castToLong(value);
    }

    public long getLongValue(String key) {
        Object value = get(key);

        if (value == null) {
            return 0L;
        }

        return castToLong(value).longValue();
    }

    public Float getFloat(String key) {
        Object value = get(key);

        return castToFloat(value);
    }

    public float getFloatValue(String key) {
        Object value = get(key);

        if (value == null) {
            return 0F;
        }

        return castToFloat(value).floatValue();
    }

    public Double getDouble(String key) {
        Object value = get(key);

        return castToDouble(value);
    }

    public double getDoubleValue(String key) {
        Object value = get(key);

        if (value == null) {
            return 0D;
        }

        return castToDouble(value);
    }

    public BigDecimal getBigDecimal(String key) {
        Object value = get(key);

        return castToBigDecimal(value);
    }

    public BigInteger getBigInteger(String key) {
        Object value = get(key);

        return castToBigInteger(value);
    }

    public String getString(String key) {
        Object value = get(key);

        if (value == null) {
            return null;
        }

        return value.toString();
    }

    public Date getDate(String key) {
        Object value = get(key);

        return castToDate(value);
    }

    public java.sql.Date getSqlDate(String key) {
        Object value = get(key);

        return castToSqlDate(value);
    }

    public java.sql.Timestamp getTimestamp(String key) {
        Object value = get(key);

        return castToTimestamp(value);
    }
    
    public Object put(String key, Object value) {
        return map.put(key, value);
    }

    public void putAll(Map<? extends String, ? extends Object> m) {
        map.putAll(m);
    }

    public void clear() {
        map.clear();
    }

    public Object remove(Object key) {
        return map.remove(key);
    }

    public Set<String> keySet() {
        return map.keySet();
    }

    public Collection<Object> values() {
        return map.values();
    }

    public Set<Map.Entry<String, Object>> entrySet() {
        return map.entrySet();
    }

    @Override
    public Object clone() {
        return new JSONObject(new HashMap<String, Object>(map));
    }

    public boolean equals(Object obj) {
        return this.map.equals(obj);
    }

    public int hashCode() {
        return this.map.hashCode();
    }

    public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
        Class<?>[] parameterTypes = method.getParameterTypes();
        if (parameterTypes.length == 1) {
            if (method.getName().equals("equals")) {
                return this.equals(args[0]);
            }
            
            Class<?> returnType = method.getReturnType();
            if (returnType != void.class) {
                throw new JSONException("illegal setter");
            }

            String name = null;
            JSONField annotation = method.getAnnotation(JSONField.class);
            if (annotation != null) {
                if (annotation.name().length() != 0) {
                    name = annotation.name();
                }
            }

            if (name == null) {
                name = method.getName();
                
                if (!name.startsWith("set")) {
                    throw new JSONException("illegal setter");
                }

                name = name.substring(3);
                if (name.length() == 0) {
                    throw new JSONException("illegal setter");
                }
                name = Character.toLowerCase(name.charAt(0)) + name.substring(1);
            }

            map.put(name, args[0]);
            return null;
        }

        if (parameterTypes.length == 0) {
            Class<?> returnType = method.getReturnType();
            if (returnType == void.class) {
                throw new JSONException("illegal getter");
            }

            String name = null;
            JSONField annotation = method.getAnnotation(JSONField.class);
            if (annotation != null) {
                if (annotation.name().length() != 0) {
                    name = annotation.name();
                }
            }

            if (name == null) {
                name = method.getName();
                if (name.startsWith("get")) {
                    name = name.substring(3);
                    if (name.length() == 0) {
                        throw new JSONException("illegal getter");
                    }
                    name = Character.toLowerCase(name.charAt(0)) + name.substring(1);
                } else if (name.startsWith("is")) {
                    name = name.substring(2);
                    if (name.length() == 0) {
                        throw new JSONException("illegal getter");
                    }
                    name = Character.toLowerCase(name.charAt(0)) + name.substring(1);
                } else if (name.startsWith("hashCode")) {
                    return this.hashCode();
                } else if (name.startsWith("toString")) {
                    return this.toString();
                } else {
                    throw new JSONException("illegal getter");
                }
            }
            
            Object value = map.get(name);
            return TypeUtils.cast(value, method.getGenericReturnType(), ParserConfig.getGlobalInstance());
        }

        throw new UnsupportedOperationException(method.toGenericString());
    }
}

View Code

　　用法：直接将对象放入就能放回json对象了

　　1)json创建自定义对象

　　　　var p={id:1,name:"爸爸",sal:8000};

　　2）.json创建对象集合

　　　　var ps=[{id:1,name:"呵呵"},{id:2,name:"呵呵1"},{id:3,name:"呵呵3"},];

　　3.创建一个对象，其中一个属性是数组

　　　　var p = {id:1,name:'哈哈',isLove:true,home:['广州','深圳'],show : function(str){alert("你是" + str);}};

　　4.json创建三级联动json+struts

链接：http://pan.baidu.com/s/1nvQEVCd 密码：5n5g

　　　　需要注意的地方：需要引入包

　　　　　　struts2-json-plugin-2.3.1.1.jar

　　　　使用第三方工具，将JavaBean对象/List或Set或Map对象转成JSON

　　　　》commons-beanutils-1.7.0.jar

　　　　》commons-collections-3.1.jar

　　　　》commons-lang-2.5.jar

　　　　　》commons-logging-1.1.1.jar

　　　　　》ezmorph-1.0.3.jar

　　　　　》json-lib-2.1-jdk15.jar

各自公用

（1）JavaBean----->JSON
        》JSONArray jsonArray = JSONArray.fromObject(city);
        》String jsonJAVA = jsonArray.toString();
   （2）List<JavaBean>----->JSON 
        》JSONArray jsonArray = JSONArray.fromObject(cityList);
        》String jsonJAVA = jsonArray.toString();
   （3）List<String>----->JSON 
        》JSONArray jsonArray = JSONArray.fromObject(stringList);
        》String jsonJAVA = jsonArray.toString(); 
   （4）Set<JavaBean>----->JSON 
        》JSONArray jsonArray = JSONArray.fromObject(citySet);
        》String jsonJAVA = jsonArray.toString();
   （5）Map<String,Object>----->JSON 
        》JSONArray jsonArray = JSONArray.fromObject(map);
        》String jsonJAVA = jsonArray.toString();
        最后一个例子切记，将来jQuery-EasyUI-DataGrid组件时我们还要用到
        将来，在企业中，就算脱离struts2的环境，也能用第三方工具，将Java类型转成JSON文本

View Code

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

    <package name="myPackage" extends="json-default" namespace="/">
        
        <!-- 全局结果类型 -->
        <global-results>
            <result name="success" type="json"/>
        </global-results>
        
        
        
        <action 
            name="checkRequest" 
            class="cn.itcast.javaee.js.checkcode.CheckcodeAction" 
            method="check">
        </action>
        
        
        

        
        <!-- 省份->城市 -->
        <action 
            name="findCityByProvinceRequest" 
            class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction" 
            method="findCityByProvince">
        </action>
        
        
        <!-- 城市->区域 -->
        <action 
            name="findAreaByCityRequest" 
            class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction" 
            method="findAreaByCity">
        </action>
        
        
        
    
    </package>

</struts>

View Code

provinceCityArea.jsp

//provinceCityArea.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省份-城市-区域三级联动【Struts2 + JSON版】</title>
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
    
    <select id="provinceID" style="width:111px">
        <option>选择省份</option>
        <option>湖北</option>
        <option>湖南</option>
        <option>广东</option>
    </select>
    
    <select id="cityID" style="width:111px">
        <option>选择城市</option>
    </select>
    
    <select id="areaID" style="width:111px">
        <option>选择区域</option>
    </select>
    
    
    
    
    <!-- 省份->城市 -->
    <script type="text/javascript">
        document.getElementById("provinceID").onchange = function(){
            //清空城市下拉框
            var cityElement = document.getElementById("cityID");
            cityElement.options.length = 1;
            //清空区域下拉框
            var areaElement = document.getElementById("areaID");
            areaElement.options.length = 1;
            
            var province = this[this.selectedIndex].innerHTML;
            if("选择省份" != province){
                //NO1)
                var ajax = createAJAX();
                //NO2)
                var method = "POST";
                var url = "${pageContext.request.contextPath}/findCityByProvinceRequest?time="+new Date().getTime();
                ajax.open(method,url);
                //NO3)
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
                //NO4)
                var content = "bean.province=" + province;
                ajax.send(content);
                
                //-------------------------------------------等待
                
                //NO5
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4){
                        if(ajax.status == 200){
                            //NO6)返回JAVA格式的JSON文本
                            var jsonJAVA = ajax.responseText;
                            
                            //p所代表的是java格式的json文本，是不能直接被js执行的
                            //解决方案：将java格式的json文本，转成js格式的json文本
                            //如何做：用js提供的一个函数搞定
                            var jsonJS = eval("("+jsonJAVA+")");
                            
                            var array = jsonJS.cityList;
                            var size = array.length;
                            for(var i=0;i<size;i++){
                                var city = array[i];
                                var option = document.createElement("option");
                                option.innerHTML = city;
                                cityElement.appendChild(option);
                            }
                        }
                    }            
                }
            }
        }
    </script>

    
    <!-- 城市->区域 -->
    <script type="text/javascript">
        document.getElementById("cityID").onchange = function(){
            var areaElement = document.getElementById("areaID");
            areaElement.options.length = 1;
            var city = this[this.selectedIndex].innerHTML;
            if("选择城市" != city){
                //NO1)
                var ajax = createAJAX();
                //NO2)
                var method = "POST";
                var url = "${pageContext.request.contextPath}/findAreaByCityRequest?time="+new Date().getTime();
                ajax.open(method,url);
                //NO3)
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
                //NO4)
                var content = "bean.city=" + city;
                ajax.send(content);
                
                //------------------------------------------等待
                
                //NO5)
                ajax.onreadystatechange = function(){
                    
                    if(ajax.readyState == 4){
                        if(ajax.status == 200){    
                            //NO6)
                            var jsonJAVA = ajax.responseText;
                            var jsonJS = eval("("+jsonJAVA+")");
                            var array = jsonJS.areaList;
                            var size = array.length;
                            for(var i=0;i<size;i++){
                                var area = array[i];
                                var option = document.createElement("option");
                                option.innerHTML = area;
                                areaElement.appendChild(option);
                            }
                        }
                    }
                }
                
            }
        }
    </script>
    

  </body>
</html>

View Code

action

package cn.itcast.javaee.js.provincecityarea;

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

import com.opensymphony.xwork2.ActionSupport;

/**
 * 省份-城市-区域三级联动【Struts2 + JSON版】
 * @author AdminTC
 */
public class ProvinceCityAreaAction extends ActionSupport{
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    private Bean bean;
    public Bean getBean() {
        return bean;
    }
    public void setBean(Bean bean) {
        this.bean = bean;
    }
    /**
     * 根据省份获取城市 
     */
    public String findCityByProvince() throws Exception {
        cityList = new ArrayList<String>();
        if("湖北".equals(bean.getProvince())){
            cityList.add("武汉");
            cityList.add("赤壁");
        }else if("湖南".equals(bean.getProvince())){
            cityList.add("郴州");
            cityList.add("张家界");
            cityList.add("浏阳");
        }else if("广东".equals(bean.getProvince())){
            cityList.add("阳江");
            cityList.add("清远");
            cityList.add("佛山");
            cityList.add("湛江");
        }
        //让struts2框架帮你将List/Set/Map<String>转成JSON文本
        return SUCCESS;
    }
    
    
    /**
     * 根据城市获取区域 
     */
    public String findAreaByCity() throws Exception {
        areaList = new ArrayList<String>();
        if("阳江".equals(bean.getCity())){
            areaList.add("AA");
            areaList.add("BB");
        }else if("清远".equals(bean.getCity())){
            areaList.add("CC");
            areaList.add("DD");;
        }else if("佛山".equals(bean.getCity())){
            areaList.add("EE");
            areaList.add("FF");
        }else if("湛江".equals(bean.getCity())){
            areaList.add("GG");
            areaList.add("HH");
        }
        return SUCCESS;
    }
    private List<String> areaList;//区域的集合
    private List<String> cityList;//城市的集合
    public List<String> getCityList() {
        return cityList;
    }
    public List<String> getAreaList() {
        return areaList;
    }
    
    
    
}

View Code

4.例子：js例子

验证码:image.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg"  import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
    public Color getColor(){
        Random random = new Random();
        int r = random.nextInt(256);//0-255
        int g = random.nextInt(256);
        int b = random.nextInt(256);
        return new Color(r,g,b);
    }
    public String getNum(){
        String str = "";
        Random random = new Random();
        for(int i=0;i<4;i++){
            str += random.nextInt(10);//0-9
        }
        return str;
    }
%>
<%
    response.setHeader("pragma", "mo-cache");
    response.setHeader("cache-control", "no-cache");
    response.setDateHeader("expires", 0);
    
    BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
    
    Graphics g = image.getGraphics();
    g.setColor(new Color(200,200,200));
    g.fillRect(0,0,80,30);
    
    
    for (int i = 0; i < 30; i++) {
        Random random = new Random();
        int x = random.nextInt(80);
        int y = random.nextInt(30);
        int xl = random.nextInt(x+10);
        int yl = random.nextInt(y+10);
        g.setColor(getColor());
        g.drawLine(x, y, x + xl, y + yl);
    }
    
    
    g.setFont(new Font("serif", Font.BOLD,16));
    g.setColor(Color.BLACK);
    String checkNum = getNum();//"2525"
    
    StringBuffer sb = new StringBuffer();
    for(int i=0;i<checkNum.length();i++){
        sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
    }
    g.drawString(sb.toString(),15,20);
    
    session.setAttribute("CHECKNUM",checkNum);//2525
    
    ImageIO.write(image,"jpeg",response.getOutputStream());
    out.clear();
    out = pageContext.pushBody();
%>

View Code

jsp使用这个验证码的例子：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>验证码检查</title>
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
    
    <form>
        <table border="0" align="center">
            <tr>
                <th>验证码：</th>
                <td><input size="2" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td>
                <td><img src="01_image.jsp"/>
                <td id="res"></td>
            </tr>
        </table>
    </form>
    
    <script type="text/javascript">
        //去掉二边的空格
        function trim(str){"  zhaojun  "
            str = str.replace(/^\s*/,"");//"zhaojun  "     
            str = str.replace(/\s*$/,"");//"zhaojun"
            return str;     
        }
    </script>
    
    <script type="text/javascript">
        document.getElementById("checkcodeID").onkeyup = function(){
            var checkcode = this.value;
            checkcode = trim(checkcode);//2525
            if(checkcode.length == 4){
                //NO1)
                var ajax = createAJAX();
                //NO2)
                var method = "POST";
                var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
                ajax.open(method,url);
                //NO3)
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
                //NO4)
                var content = "checkcode=" + checkcode;
                ajax.send(content);
            
                //--------------------------------------------------------等待
                
                //NO5)
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4){
                        if(ajax.status == 200){
                            //NO6)
                            var tip = ajax.responseText;
                            
                            //NO7)
                            var img = document.createElement("img");
                            img.src = tip;
                            img.style.width = "14px";
                            img.style.height = "14px";
                            var td = document.getElementById("res");
                            td.innerHTML = "";
                            td.appendChild(img);
                        }
                    }
                }
            }else{
                //清空图片
                var td = document.getElementById("res");
                td.innerHTML = "";
            }
        }
    </script>    

  </body>
</html>


action:
package cn.itcast.javaee.js.checkcode;

import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 验证码检查
 * @author AdminTC
 */
public class CheckcodeAction extends ActionSupport{
    //客户端验证码
    private String checkcode;//2525
    //注入客户端验证码
    public void setCheckcode(String checkcode) {
        this.checkcode = checkcode;
    }
    /**
     * 验证
     */    
    public String check() throws Exception {
        //图片路径
        String tip = "images/MsgError.gif";
        //从服务器获取session中的验证码
        String checkcodeServer = (String) ActionContext.getContext().getSession().get("CHECKNUM");
        //将客户端的验证码与服务端的验证码进行比较
        if(checkcode.equals(checkcodeServer)){
            tip = "images/MsgSent.gif";
        }
        //以IO流的方式将tip变量的值输出到AJAX异步对象中
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
        //以下方式不是最好的，但可以完成AJAX异步交互
        return null;
    }
}

View Code

创建ajax

//创建AJAX异步对象，即XMLHttpRequest
function createAJAX(){
    var ajax = null;
    try{
        ajax = new ActiveXObject("microsoft.xmlhttp");
    }catch(e1){
        try{
            ajax = new XMLHttpRequest();
        }catch(e2){
            alert("你的浏览器不支持ajax，请更换浏览器");
        }
    }
    return ajax;
}

View Code

去String空白

function trim(str){
            str=str.replace(/^\s*/,"");
            str=str.replace(/\s*$/,"");
            return str;
        }

View Code

posted @ 2017-06-02 15:14 王吉平阅读(209) 评论(0) 编辑收藏举报

刷新页面返回顶部

小平1993

java深入探究13-js,ajax

公告