开发者社区> 旭东的博客> 正文

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

简介:   在做网页时,经常需要根据用户输入信息,进行“局部页面的刷新”也就是要使用所谓的AJAX技术。最近正好也在用,就总结一下。   1.AJAX介绍       AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
+关注继续查看

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
$utils使用全指南----持续更新
顾名思义:$utils是基于Jquery的拓展工具函数库,是本人封装的一些常用且实用的方法。 在此只列出使用方式,源码不公开。 1. $.createSelect(数组)------创建选择型表单: 返回:该选择型表单的jQuery对象 let $s1 = $.
679 0
SSH 网站制作之AJAX无刷新动态更新页面
  在做网页时,经常需要根据用户输入信息,进行“局部页面的刷新”也就是要使用所谓的AJAX技术。最近正好也在用,就总结一下。   1.AJAX介绍       AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
970 0
.net网站建设页面提交后css失效的问题
问题描述:.net网站建设在提交后出现css部分失效,如div位置,字体大小。问题解决:原因是,过去的提示语句我们一律使用了Response.write("alert("***")"),用了.write输出 js脚本.alert等破坏了css 加载。
913 0
博客园页面css样式
#sideBar,#blog_post_info_block { display: none; } #under_post_news { display: none; } /*评论框大小*/ #tbCommentBody.
1015 0
在Android中实现service动态更新UI界面
之前曾介绍过Android的UI设计与后台线程交互,据Android API的介绍,service一般是在后台运行的,没有界面的。那么如何实现service动态更新UI界面呢?案例:通过service向远程服务器发送请求,根据服务器返回的结果动态更新主程序UI界面,主程序可实时关闭或重启服务。
553 0
将jQuery Pagination分页插件用于不使用AJAX加载数据的页面
将jQuery Pagination分页插件用于不使用AJAX加载数据的页面,项目使用SpringMVC,使用Freemarker绑定数据,但分页显示样式不想自己处理,所以使用jQuery Pagination分页插件。
760 0
C#抓取AJAX页面的内容
原文 C#抓取AJAX页面的内容 现在的网页有相当一部分是采用了AJAX技术,所谓的AJAX技术简单一点讲就是事件驱动吧(当然这种说法可能很不全面),在你提交了URL后,服务器发给你的并不是所有是页面内容,而有一大部分是JS脚本,即用
788 0
使用WCF实现SOA面向服务编程——使用AJAX+WCF服务“.NET技术”页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
922 0
+关注
旭东的博客
从事互联网开发工作,写博客,记录问题与学习支持,并分析
194
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载