知识大全快速、简便的使用AJAX技术操作的三部曲

Posted 2022-07-19 知

篇首语：人还是要乐观，心碎了就对自己说，碎碎平安。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全快速、简便的使用AJAX技术操作的三部曲相关的知识，希望对你有一定的参考价值。

快速、简便的使用AJAX技术操作的三部曲 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　其实AJAX并不复杂自从AJAX技术出来后天花乱坠的框架纷纷出台搞得技术开发人员无从下手 baidu google里也有很多例子大都是非常复杂

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

　　第一步

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

　　public String hotWeek() throws Exception HttpServletResponse response = ServletActionContext getResponse(); response setContentType( text/xml; charset=gb ); 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 == ) if(xmlHttp status == ) var nodeId = xmlHttp responseText; if (nodeId== noPermission ) alert( 你没有权限访问此操作! ); else if( (falseIndex = nodeId indexOf( false|| ))!= ) alert( 操作失败可能的原因为: + nodeId substring( falseIndex+ 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 l( 页面加载中 ); startAjaxRequest( GET true actionUrl ); );

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

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

　　第三步

　　后台返回后的处理方法

　　function getResult(nodeId) $( body l(nodeId);

cha138/Article/program/Java/hx/201311/26947

知识大全 快速、简便的使用AJAX技术操作的三部曲

知识大全快速、简便的使用AJAX技术操作的三部曲