SSH 网站制作之AJAX无刷新动态更新页面

王朝学院·作者佚名  2016-04-26
窄屏简体版  字體: 小  |  中  |  大  |  超大  

在做网页时,经常需要根据用户输入信息,进行“局部页面的刷新”也就是要使用所谓的Ajax技术。最近正好也在用,就总结一下。

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;

}

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航