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

符号 阅读:847 2020-10-18 22:04:24 评论:0

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

 

标签:ajax
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号