ajax的初次使用

拼搏现实的明天。 2022-06-12 12:08 184阅读 0赞

一、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>