Ajax请求action全攻略

1.创建xmlhttprequest对象

function createXmlHttpRequest () { var http_request = false; if(window.XMLHttpRequest) { http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return http_request; }

 

已经考虑到了浏览器不同版本兼容性的问题

 

2.请求action

function fetchCorpInfo(index,data) //创建xmlhttprequest,ajax开始 (index为数组下标，主要是为了演示回调函数传参) { data = encodeURI(data); //如果data为中文则需要两次编码 data = encodeURI(data); var url="<%=request.getContextPath()%>/consignOrder/order/atuoFillCorpR.do?data="+data; //要请求的服务端地址 req=createXmlHttpRequest(); //定义变量，用来创建xmlhttprequest对象 if(!req) { alert('<bean:message key="puma.error.createXmlHttp"/>'); return false; } if(req) //成功创建xmlhttprequest { req.open("get",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步) //req.setrequestheader("content-length",postdate.length);//post提交设置项 //req.setrequestheader("content-type","application/x-www-form-urlencoded");//post提交设置项 req.onreadystatechange =function(){ callbackCorp(index);}//给回调函数传参数 req.send(null); //发送请求 } }

 

3.在回调函数中处理返回值

function callbackCorp(index) //回调函数，对服务端的响应处理，监视response状态 { if(req.readyState==4) //请求状态为4表示成功 { if(req.status==200) //http状态200表示OK { DispalyCorp(index); //所有状态成功，执行此函数，显示数据 } else //http返回状态失败 { alert("服务端返回状态" + req.statusText); } } else //请求状态还没有成功，页面等待 { //document .getElementById ("myTime").innerHTML ="数据加载中"; } } function DispalyCorp(index) //接受服务端返回的数据，对其进行显示 { form = document.forms[0]; var info=req.responseText;//服务器端返回的数据，参见第4点 if(info){ info=info.split(","); form.elements("details["+index+"].customerName").value=info[0]; form.elements("details["+index+"].telecom").value=info[1]; form.elements("details["+index+"].city").value=info[2]; form.elements("details["+index+"].address").value=info[3]; form.elements("details["+index+"].contactMan").value=info[4]; form.elements("details["+index+"].postalCode").value=info[5]; form.elements("details["+index+"].corpNo").value=info[6]; form.elements("details["+index+"].customerId").value=info[7]; } }

 

4.action中的处理

private ActionForward performAutoFillCorp(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) { try { response.setContentType("text/html;charset=GBK"); PrintStream out =new PrintStream(response.getOutputStream()); String value=request.getParameter("data"); if(value!=null) value=java.net.URLDecoder.decode(value,"UTF-8");//避免中文乱码 String type=request.getParameter("type"); Map map=null; LocalDispatcher loDispatcher = Utility.getSessionWrapper(request).getDispatcher(); if(UtilValidate.isNotEmpty(value)){ //数据格式很简单，将字段值以逗号分割 如：("id","name","age") map=AjaxDao.fetchCorpInfo(loDispatcher.getDelegator(), value,type); } if(map!=null && map.size()>0){ out.print(map.get("info"));//将数据以流的形式输出 } } catch (IOException e) { e.printStackTrace(); } return null; // 最后返回空路径 }

 

以上为最原始的ajax请求，如果熟悉dwr,jquery等框架就相对简单了