ajax的初次使用

一、get请求需注意几点：
    1、如果需要提起多个请求，需要创建多个XMLHttpRequest对象
    2、了解XMLHttpRequest对象中open、onreadystatechange、readystate、responseText、status属性和方法的含义,及引擎的五种状态：未初始化、装载中、已装载、交互中、完成
    3、使用ajax需要清除缓存，否则会产生莫名的错误，具体有两种方法：
        a、采用URL后跟上时间戳来防止浏览器缓存，如：
             var url = "user_validate.jsp?userId=" + trim(field.value) + "&timestampt=" + new Date().getTime();
        b、user_validate.jsp中增加清除缓存代码：
             response.setContentType("text/html");
             response.setHeader("Cache-Control","no-store");    //HTTP1.1
             response.setHeader("Pragma","no-store");                    //HTTP1.0
             response.setDateHeader("Expires",0);
    
    增加用户id时判断是否重复采用ajax流程：
    1、创建Ajax引擎对象XMLHttpRequest
    2、调用open方法与Ajax引擎建立连接，并告诉Ajax引擎请求方式为get，请求的url及采用异步的方式
    3、告诉Ajax引擎处理完成后如何把结果反馈给我们，我们通常指定一个方法句柄，那么Ajax就会调用我们指定的方法，从而就可以得到Ajax引擎返回的数据(就是回调机制)
    4、调用send方法把步骤2和3设置的参数发送给Ajax引擎
    
    AJAX代码示例：   
       1、servlet中代码：
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=GB18030");
        String clientId = request.getParameter("clientId");
        boolean flag = ClientManager.getInstance().findClientByClientId(clientId);
        if (flag) {
            response.getWriter().print("分销商代码已经存在");
        }
    }
    2、jsp的script中代码：
    function validateClientId(field) {
        if (trim(field.value) != "") {
            var xmlHttp = null;
            //表示当前浏览器不是ie,如ns,firefox
            if(window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var url = "servlet/ClientIdValidateServlet?clientId=" + trim(field.value);        //此处的url路径与web.xml中servlet-mapping对应的url-pattern里的路径一致。
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange=function() {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        if (trim(xmlHttp.responseText) != "") {
                            document.getElementById("spanClientId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
                        }else {
                            document.getElementById("spanClientId").innerHTML = "";
                        }
                    }else {
                        alert("请求失败，错误码=【" + xmlHttp.status + "】");
                    }
                }
            };
            xmlHttp.send(null);
        }else {
            document.getElementById("spanClientId").innerHTML = "";
        }
    }

    
    以上是get请求，如果出现乱码
    javascript中：open方法中的url里的参数进行二次编码：encodeURIComponent("xxxx") 或 encodeURI(encodeURI("xxxx")) 两种写法都可以
    servlet中：      String userName = URLDecoder.decode(request.getxxxx, "UTF-8");
        
    ajax的接受返回数据
    ajax一般情况下返回的String字符串用xmlHttpRequest对象的responseText来接受，但如果这个String字符串由XML文件组成的话则用responseXML来接受，
    参照drp中的SelectProvServlet和client_level_chart.jsp
   

二、post请求：
    如果要传文件或post内容给服务器，必须在send方法前调用setRequestHeader方法，如下：
    xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlenoded")
    这时send的参数不为空，例如：
    send(name=value&anothername=othervalue&so=on);
    
    
三、js与json:
        var o = {"name":"value"}
        o.name和o["name"]都可以取到value的值
        ajax中处理返回的json字符串,将它转化为js对象：
        例：eval("("+xhr.responseText+")");

四、省市级联
        省市级联时通过Arrays.asList方法将市的数组转化为list，应用如下：
        业务逻辑层：
        public class RegionService{
            private Map<String,List<String>> map= new HashMap<String,List<String>>();
            public RegionService(){
                String[] c1 = new String[]{"成都","洛阳","广安","德阳"};
                String[] c2 = new String[]{"海淀","昌平","朝阳"};
                map.put("四川",Arrays.asList(cl));
                map.put("北京",Arrays.asList(c2));
            }
            public List<String> loadProvices(){
                return new ArrayList<String>(map.keySet());    //通过kekSet方法得到map里的省份
            }
            public List<String> loadCitys(String province){
                return map.get(province);    //得到省份对应的城市
            }
        }
        表示层：
        public class LoadProvicesServlet extends HttpServlet{
            private static final long serialVersionUID = 1L;
            private IRegionService service = new RegionServiceImpl();
            protected void doGet(HttpServletRequest request, HttpServletResponse response){
                List<String> list = service.loadProvices();
                StringBuffer s = new StringBuffer("[");    //通过拼串的方式变为数组格式
                for(int i=0;i<list.size();i++){
                    s.append("\"").append(list.get(i)).append("\"");
                    if(i<list.size()-1)
                        s.append(",");
                s.append("]");
                response.setContentType("text/html;charset=UTF-8");    //设置返回的编码格式，否则会出现乱码
                response.getWriter().println(s.toString());
                }
            }
        }
        jsp中:
        <script>
            var xmlHttp;    
            function createXMLHttpRequest() {
                //表示当前浏览器不是ie,如ns,firefox
                if(window.XMLHttpRequest) {
                    xmlHttp = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }    
            function loadProvice() {
                //alert(document.getElementById("userId").value);
                //alert(field.value);
                if (trim(field.value).length != 0) {
                    //创建Ajax核心对象XMLHttpRequest
                    createXMLHttpRequest();            
                    var url = "servlet/LoadProvicesServlet" + "&time=" + new Date().getTime();    //url里的是xml中的相对路径
                    xmlHttp.open("GET", url, true);        
                    xmlHttp.onreadystatechange=function {
                    if (xmlHttp.readyState == 4) {
                        if (xmlHttp.status == 200) {
                            var ret = eval("("+ xmlHttp.responseText +")");
                        }else {
                            alert("请求失败，错误码=" + xmlHttp.status);
                        }
                    }
                }            
                    //将设置信息发送到Ajax引擎
                    xmlHttp.send(null);
                }
            }    
            window.οnlοad=loadProvice;    //页面加载时发送ajax请求
      </script>