其实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(" "); 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的业务需求了,根本没有必要弄得那么复杂。
分享到:
- 2007-11-20 13:16
- 浏览 943
- 评论(0)
- 论坛回复 / 浏览 (0 / 1085)
- 查看更多
相关推荐
在探讨AJAX的核心技术三部曲之前,我们先简要了解一下AJAX的基本概念。AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以实现网页的部分...
使用AJAX进行操作通常分为以下三个主要步骤: 1. **创建 XMLHttpRequest 对象**: 在AJAX的核心是XMLHttpRequest对象,它允许JavaScript与服务器进行异步数据交换。在不同的浏览器中创建这个对象的方式略有不同。...
AJAX(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页内容的技术。它通过在后台与服务器交换数据并局部刷新页面的方式,极大地提升了用户体验,使得网页更加动态化...
例如,Microsoft的Outlook Web Access就是一个早期采用AJAX技术的例子,它实现了邮件的快速查看和操作。 **数据交换格式:JSON** 虽然AJAX中最初使用XML进行数据交换,但后来JSON(JavaScript Object Notation)...
Ajax技术是一种创建交互式网页应用的网页开发技术,也是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的...
AJAX 综合 快速能学懂AJAX AJAX 综合 快速能学懂AJAX AJAX 综合 快速能学懂AJAX AJAX 综合 快速能学懂AJAX AJAX 综合 快速能学懂AJAX AJAX 综合 快速能学懂AJAX AJAX 综合 快速能学懂AJAX AJAX 综合 快速能学懂AJAX ...
总结,"使用JSP/Servlet/Ajax技术开发新闻发布系统"涉及到的技术栈广泛,包括前后端交互、数据库操作、MVC设计模式等多个方面,开发者需要掌握这些技能才能成功构建出高效、用户体验良好的新闻发布平台。
Ajax(Asynchronous JavaScript and XML)是一种创建快速动态网页的技术,它将几种现有的技术(如XMLHttpRequest对象、CSS、DOM、XML和JavaScript)组合起来,实现了在不重新加载整个网页的情况下,通过后台与服务器...
《程序员修炼三部曲之单元测试》是一本深入探讨软件开发中单元测试技术的重要书籍,尤其对于.NET、AJAX、C#、Java和VB.NET等技术领域的开发者来说,更是不可多得的参考资料。单元测试是软件开发过程中的一个重要环节...
综上所述,Ajax技术使得Web应用能够提供更流畅、响应更快的用户体验,而ExtJS这样的框架则进一步简化了Ajax的使用,让开发者能更专注于业务逻辑而不是底层通信细节。通过深入学习和实践,你可以构建出高效、动态的...
AJAX购物车是这种技术的一个典型应用,通过异步通信,实现了用户在添加、删除商品到购物车时,页面无需跳转即可完成操作,极大地提升了用户体验。 **一、AJAX基础概念** 1. **异步通信**:AJAX的核心是...
在当今互联网技术快速发展的时代,AJAX(Asynchronous JavaScript and XML)已经成为构建高效、互动性极强的Web应用的重要技术。本项目"基于AJAX技术的博客系统设计与实现",旨在利用AJAX的优势,为用户提供无需刷新...
AJAX技术之所以能够快速流行,并成为近两年最热门的话题之一,很大程度上得益于它的名称。在中国,“阿贾克斯”这个名字与一个著名的足球队名称相似,易于记忆且朗朗上口,从而促进了该技术的普及。实际上,在...
4. 使用jQuery简化Ajax:jQuery库提供了方便的Ajax方法,如$.ajax()、$.get()和$.post(),简化了Ajax操作。 总结,Ajax技术通过JavaScript实现了网页的异步更新,提高了用户体验,而ADO.NET作为强大的数据访问工具...
这个框架封装了 Ajax 技术,使得开发人员可以轻松地使用 Ajax 技术,实现快速开发、高效维护和扩展。 在这个框架中,数据传输交换格式透明化处理是关键,使用 AjaxRequest 请求参数对象和 AjaxResponse 结果响应...
【标题】"使用JSP/Servlet/Ajax技术开发新闻发布系统2"所涵盖的知识点主要集中在构建动态Web应用程序的三个核心技术上:JavaServer Pages (JSP)、Servlet和Asynchronous JavaScript and XML (Ajax)。这些技术在开发...
在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...
ajax技术报告,关于ajax的介绍