其实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的业务需求了,根本没有必要弄得那么复杂。
我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。
我原创,你原创,我们的内容世界才会更加精彩!
【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】
微信公众号
TechTarget
官方微博
TechTarget中国
相关推荐
-
如何从Web转到移动业务应用
一般移动业务应用只会提供企业Web应用的一部分功能。当从Web转向移动应用时,开发团队的最大挑战是决定为移动应用开发哪些功能以及如何交付这些功能。
-
从Web开发到交付:2015必备深度前端知识
过去这几十年,互联网已被证明是影响技术世界的最复杂最难以预测的系统之一。软件往往是基于部署在本地硬件(或至少本地网络)上的假设来进行设计的。
-
新程序语言将不同Web语言融合在一起
如果你是一名Web开发者,你最喜欢哪种编程语言?CSS?JavaScript?PHP?HTML 5?为什么选择这种语言?
-
PHP终于迎来了自己的正式语言规范
尽管PHP脚本语言早在1995年左右就已经诞生并在Web开发领域占据着重要地位,但其一直没有自己的正式语言规范——只提供广泛的用户说明文档。