ajax的初次使用 拼搏现实的明天。 2022-06-12 12:08 168阅读 0赞 一、get请求需注意几点: 1、如果需要提起多个请求,需要创建多个XMLHttpRequest对象 2、了解XMLHttpRequest对象中open、onreadystatechange、readystate、responseText、status属性和方法的含义,及引擎的五种状态:未初始化、装载中、已装载、交互中、完成 3、使用ajax需要清除缓存,否则会产生莫名的错误,具体有两种方法: a、采用URL后跟上时间戳来防止浏览器缓存,如: var url = "user\_validate.jsp?userId=" + trim(field.value) + "×tampt=" + 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>
还没有评论,来说两句吧...