logo 广告
Loading...
 导航 所在位置:论坛首页 -> ┈┋电脑网络┋┈ -> 网页制作技术 -> 快速简便的使用AJAX技术操作的介绍
回复
标题:快速简便的使用AJAX技术操作的介绍收藏 编辑 删除 楼主 | 上一篇 下一篇
496020685
头像
等级:大侠
权限:普通用户
积分:101
金钱:5640
声望:147
经验:147
发帖数:1385
注册:2006年9月30日
资料 短消息2008-7-12 10:02:10
其实AJAX并不复杂,自从AJAX技术出来后,天花乱坠的框架纷纷出台,搞得技术开发人员无从下手,baidu google里也有很多例子,大都是非常复杂。

    其实就web开发而言,AJAX技术只是一个配合,完全没有必要本末倒置,是一种页面优化的技术,也就是说,如何去优化我们的web页面才是AJAX的重头戏。下面我举个很简单的例子,可以满足大部分的业务需求。(当然,如果是很专业的页面要求,可以去参考那些复杂的框架)

    第一步:

    写一个后台的“接口”,这个可以用任何语言来实现,只要能返回http报文就可以了,我这里以webwork后台代码举个例子

  public String hotWeek() throws Exception{

    HttpServletResponse response = ServletActionContext.getResponse();
    response.setContentType("text/xml; charset=gb2312");

    PrintWriter out = response.getWriter();

    StringBuffer insertHotHtml = new StringBuffer();

    insertHotHtml.append(" cellspacing=0> ");

    insertHotHtml.append("
     ");
    insertHotHtml.append("
      ");
    insertHotHtml.append("

    ");

    insertHotHtml.append("
     ");


    out.print(insertHotHtml.toString()); //返回一个有表格的HTTP报文


    return null;

    }
 

  
    不用java的朋友根本不用管这些,只要记住,能返回一个HTTP报文,比如一个静态网页也可以。

    第二步 :


    在页面里加入下面这段javascript代码

 var xmlHttp;

    function createXMLHttpRequest(){

    if (window.ActiveXObject){

    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else if (window.XMLHttpRequest){

    xmlHttp = new XMLHttpRequest();

    }

    }

    function startAjaxRequest(method,async,actionUrl,data, invokeMethod){

    createXMLHttpRequest();

    xmlHttp.open(method, actionUrl, async);

    xmlHttp.onreadystatechange = handleStateChange;

    xmlHttp.send(data);


    function handleStateChange(){

    if(xmlHttp.readyState == 4){

    if(xmlHttp.status == 200){

    var nodeId = xmlHttp.responseText;

    if (nodeId=='noPermission'){

    alert('你没有权限访问此操作!');

    }else if( (falseIndex = nodeId.indexOf("false||"))!= -1 ){

    alert('操作失败,可能的原因为:' + nodeId.substring(

    falseIndex+7, nodeId.length) + "!");

    }else if(nodeId=='false'){

    alert('操作失败,请和管理员联系!');

    }else ...{

    if (invokeMethod == undefined){

    getResult(nodeId);

    } else {

    invokeMethod(nodeId);

    }

    }

    }

    }

    }

    }
 


    我们要用的就是startAjaxRequest(method,async,actionUrl,data, invokeMethod) 这个方法,具体实现,也不可以不用理会,对于IE和firefox都可以兼容,method 要么是GET,要么是POST,async我们一般都设置为true就可以了,data用来传数据给后台,invokeMethod是指后台返回数据后,前台自动调用什么方法,如果为空,那么就默认调用 invokeMethod(nodeId)这个方法。

     $(document).ready(function(){
    var actionUrl = "./provider!hotWeek.action";

    $('body').html("页面加载中...");

    startAjaxRequest("GET",true,actionUrl,'');


    });
 


    这里我是用jQuery的,一个很好用的javascript框架。


    "./provider!hotWeek.action" 就是我们获取HTTP报文的地址,大家完全可以用 比如 myTable.asp myTable.php只要返回的HTTP报文是符合XML规则的HTML语言就可以了。

    第三步:

    后台返回后的处理方法

     function getResult(nodeId){
    $('body').html(nodeId);

    }
 


    总结起来,其实只要 startAjaxRequest("GET",true,actionUrl,'') 这么一个方法就可以去满足大部分AJAX的业务需求了,根本没有必要弄得那么复杂

签名

2008-7-12 10:02:10 顶部
第1页 共页 共0个回复     <<    >>    
 快速回复
  • 支持UBB,HTML标签

  • 高级回复

  • 操作选项:评分 加精 解精 奖惩 设专题 设公告 解公告 固顶 总固顶 解固顶 结帖 解结帖 锁帖 解锁 移帖 删帖
      首页 | 购买指南 | 虚拟主机 | 特色介绍 | 下载中心 | 支付方式
    Copyright 2004-2008 BBSGood.com Powered By: BBSGood.Speed Version 5.0
      咨询电话:0575-85513832、0575-85513825(传真)、7*24小时咨询服务:13606552007 不良信息举报中心 浙ICP备05029817号
      业务QQ:38958768、客服QQ1:415896239、客服QQ2:343896043、MSN:jccsxx@hotmail.com