博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
SSH 网站制作之AJAX无刷新动态更新页面
阅读量:6242 次
发布时间:2019-06-22

本文共 2324 字,大约阅读时间需要 7 分钟。

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

    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("
"); sbuff.append("
"); sbuff.append(context);  //context为要返回的实际内容 sbuff.append("
"); response.setHeader("content-type", "text/xml;charset=UTF-8"); PrintWriter out = response.getWriter(); out.println(sbuff.toString()); //写入具体处理内容 out.flush(); //刷新打印流 out.close(); //关闭 return null; }

 

转载于:https://www.cnblogs.com/xudong-bupt/archive/2013/04/28/3041786.html

你可能感兴趣的文章
Linux -- Ubuntu搭建java开发环境
查看>>
MVC视图中Html常见的辅助方法
查看>>
分享一下刚刚HP电话面试。。。。。。。。我估计我挂了,不过还是要来分享一下...
查看>>
PT 转 PX
查看>>
平凡世界里的万千思绪
查看>>
(二)java环境搭建
查看>>
深入推荐引擎相关算法 - 协同过滤2
查看>>
mybatis逆向工程之配置
查看>>
使用.NET 4.0+ 操作64位系统中的注册表
查看>>
剑指offer——面试题26:判断二叉树B是否为二叉树A的子结构
查看>>
scrapy主动退出爬虫的代码片段
查看>>
ny12 喷水装置(二)
查看>>
C\C++语言细节(2)
查看>>
Jenkins持续部署-自动生成版本号
查看>>
设计模式--代理模式
查看>>
javascript基础知识--最基础的
查看>>
[转] vue自定义组件(通过Vue.use()来使用)即install的使用
查看>>
[转] 函数声明和函数表达式——函数声明的声明提前
查看>>
敢死队2影评
查看>>
浅析 JavaScript 中的 apply 和 call 用法的差异
查看>>