SSH 网站制作之AJAX无刷新动态更新页面
2013-04-28 20:29
483 查看
在做网页时,经常需要根据用户输入信息,进行“局部页面的刷新”也就是要使用所谓的AJAX技术。最近正好也在用,就总结一下。
1.AJAX介绍
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。通过 AJAX,JavaScript 可使用XMLHttpRequest对象来直接与服务器进行通信。通过这个对象,JavaScript 可在不重载页面的情况与WEB服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
2.AJAX用在javascript中的基本模式
2.1创建XMLHttpRequest对象,用于异步传输
2.2写主要的控制函数。包括设置要调用的Action方法或者Selvet方法,传递的参数,回调函数等。
2.3一般后台返回的数据,是XML形式的,需要对其进行解析。下面是一个解析方法,参数xmlString是后台返回的String形式的XML数据。
2.4写callbBack函数,对获取到是XML进行处理,动态更新JSP页面
3.后台Action的处理
在后台的对应的Action中,一般将要返回的数据信息,写成XML格式。
1.AJAX介绍
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。通过 AJAX,JavaScript 可使用XMLHttpRequest对象来直接与服务器进行通信。通过这个对象,JavaScript 可在不重载页面的情况与WEB服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
2.AJAX用在javascript中的基本模式
2.1创建XMLHttpRequest对象,用于异步传输
var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
2.2写主要的控制函数。包括设置要调用的Action方法或者Selvet方法,传递的参数,回调函数等。
function control(){ var url="XXX.do?par1=" + XXX + ""; //这里写上跳转到Action的路径和方法,并把参数传进去 if (xmlhttp!=null){ xmlhttp.onreadystatechange=callBack; //回调函数callBack xmlhttp.open("POST",url,true); //打开请求,写入请求的url,方式(post) xmlhttp.send(null); } else{ alert("Your browser does not support XMLHTTP."); } }
2.3一般后台返回的数据,是XML形式的,需要对其进行解析。下面是一个解析方法,参数xmlString是后台返回的String形式的XML数据。
function loadXML(xmlString) { var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM']; var xmlDoc; for(var i=0;i<xmlDomVersions.length;i++){ try{ xmlDoc = new ActiveXObject(xmlDomVersions[i]); xmlDoc.async = false; xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串 return xmlDoc; } catch(e){ } } }
2.4写callbBack函数,对获取到是XML进行处理,动态更新JSP页面
function callBack() { if (xmlhttp.readyState == 4) { // 判断对象状态 if (xmlhttp.status == 200) { // 信息已经成功返回,开始处理信息; 写入具体的处理模块 } else { //页面不正常 alert("您所请求的页面有异常。"); } } }
3.后台Action的处理
在后台的对应的Action中,一般将要返回的数据信息,写成XML格式。
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); StringBuffer sbuff = new StringBuffer(); //sbuff保存XML文件的具体内容 sbuff.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); sbuff.append("<result>"); sbuff.append(context); //context为要返回的实际内容 sbuff.append("</result>"); response.setHeader("content-type", "text/xml;charset=UTF-8"); PrintWriter out = response.getWriter(); out.println(sbuff.toString()); //写入具体处理内容 out.flush(); //刷新打印流 out.close(); //关闭 return null; }
相关文章推荐
- 实现Web页面中级联菜单的设计/实现动态加载列表框/实现自动刷新页面/实现Web页面的局部动态更新/实现自动完成功能
- ajax 数据库中随机读取5条数据动态在页面中刷新
- 关于ajax局部刷新,从数据库实时更新数据到页面(一般是下订单成功后发送消息到后台)
- ajax实现jsp页面的动态刷新时间
- ASP.NET动态网站开发培训-37.互动论坛制作(五、制作详细内容页面)
- 使用Jquery的Ajax实现无刷新更新,修改,删除页面
- 使用 jQuery+Ajax+MySQL+Servlet 实现不刷新页面数据更新
- Ajax:动态更新Web页面
- Ajax - 动态更新Web页面
- ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
- ASP.NET动态网站开发培训-38.互动论坛制作(六、制作主题发布页面)
- 页面无刷新更新数据(ajax异步加载)
- Struts中利用ajax/jquery页面动态无刷新添加信息
- 利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
- 利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
- AJAX-实现WEB页面局部动态刷新
- 1.MVC框架复习 2.Ajax加强 3.搜索建议 4,三级联动 5、刷新分页 6、Ajax局部动态更新数据
- ajax异步问题导致的刷新页面数据不更新
- Ajax实现动态刷新页面(get)