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

2019-11-17 03:27:46

字体：大中小

来源：转载

供稿：网友

　　在做网页时，经常需要根据用户输入信息，进行“局部页面的刷新”也就是要使用所谓的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;    }