一个最简单的AJAX实例及解析
2011-11-21 20:45
337 查看
关会用dwr了 把最一开始的给忘了。。。罪过罪过 原帖地址 首先,演示一下实际运行的效果。点击弹出新页面中的“See Author”链接,你将会看到该页面作者。从页面提交到显示从服务器获得的结果,这段过程你将不会发现页面的重刷新。 下面给出该示例的代码: 1. ajax.html < html> < head> < meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> < title>A simple AJAX example< /title> < script type="text/javascript">< !-- function findAuthor(file){ var xmlObj = null; if(window.XMLHttpRequest){ xmlObj = new XMLHttpRequest(); } else if(window.ActiveXObject){ xmlObj = new ActiveXObject("Microsoft.XMLHTTP"); } else { return; } xmlObj.onreadystatechange = function(){ if(xmlObj.readyState == 4){ updateObj('author', xmlObj.responseXML.getElementsByTagName('name')[0].firstChild.data); } } xmlObj.open ('GET', file, true); xmlObj.send (''); } function updateObj(obj, data){ var textNode = document.createTextNode(data); document.getElementById(obj).appendChild(textNode); } //-->< /script> < /head> < body> < h1>A simple AJAX program< /h1> < p id="obj">This page is powered by < a id='link' href="data.xml" title="View the author." onclick="findAuthor('data.xml'); this.style.display='none'; return false">See Author.< /a>< span id="author" style="color: olive; font-weight: bolder">< /span>< /p> < /body> < /html> 2.data.xml < ?xml version="1.0" encoding="UTF-8"?> < author> < name>www.jsfchina.org< /name> < /author> 解析下。 该例应该算是最简单的ajax应用了。为了尽求简单性,这里没有使用到任何服务器端技术,诸如servlet,cgi等等。这里并没有使用到任何业务方法,而是直接从服务器的一个xml文档(data.xml)中读取数据。为了简洁性,本例将JavaScript文件也集成到了ajax.html中,实际应用中完全可以独立出去使用。 该例通过点击链接,激发了一个javascript的方法然后进行交互处理。 AJAX的核心是XMLHttpRequest,本例通过下列代码创建这个对象 var xmlObj = null; if(window.XMLHttpRequest){ xmlObj = new XMLHttpRequest(); } else if(window.ActiveXObject){ xmlObj = new ActiveXObject("Microsoft.XMLHTTP"); } else { return; } if(window.XMLHttpRequest)处理了浏览器是mozilla的情况,而if(window.ActiveXObject)则处理了浏览器为IE的情况,目的都是一个:创建了一个XMLHttpRequest对象。创建这个对象的目的就是让XMLHttpRequest对象与服务器交互,而不影响用户正在浏览的页面。这也是AJAX称谓的由来,异步javascript交互xml处理。 创建好XMLHttpRequest对象之后,调用的函数将会监听该对象状态的变化,即onreadystatechange属性。XMLHttpRequest对象有5个状态,从0-4的整数,也就是说onreadystatechange调用的函数(示例中function(){...})将会执行4次。示例中我们在该对象处于完成状态(readyState=4)时进行处理(此时服务器已经传回所有信息),为id为“author”的span对象添加了一个textNode节点,该textNode是data.xml文档中name节点的第一个子元素的值。 好了,这就是完成一次异步交互所需要的步骤。 以下是一些注意点。 第一,本例中使用的http的GET方法,你也可以使用POST,但是要设定Content-Type值,即xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),这个方法用来设置了MIME类型。还有一点要注意,这些方法最好都大写,否则在firefox下将没有作用。 第二,xmlObj.open ('GET', file, true)。该方法会建立与服务器的链接,‘GET’指明了http调用方法;file指明了调用的url;true指明了该调用是异步处理,可以省略,默认为'true'。 第三,xmlObj.send(para)向服务器发出请求。是以POST向服务器发出request,其参数格式为:name=namevalue&so=on。 |
相关文章推荐
- 一个最简单的AJAX实例及解析
- 一个最简单的AJAX实例及解析
- 一个最简单的ajax实例及解析
- 通过一个简单的AJAX实例,了解其大致步骤
- php+jquery+ajax+json的一个最简单实例
- 一个简单的ajax+servlert+jsp的完整实例
- 一个简单的ajax实例
- 一个简单的AJAX实例
- 一个简单的ajax实例:异步请求的例子
- 一个简单的兼容IE与firefox的ajax实例
- 东软学习,AJAX的一个简单验证用户名实例
- 【转】一个简单的Ajax请求实例
- 一个简单的Ajax实例
- 无刷新提交表单(php+jquery+ajax+json的一个最简单实例 )
- java实现一个简单的Web服务器实例解析
- 一个简单的ajax实例:ajax与struts2实例
- ASP.NET AJAX的一个简单实例
- 一个简单的ajax实例
- 一个简单Ajax类库及使用方法实例分析
- php+jquery+ajax+json的一个最简单实例