如何使用Ajax技术开发Web应用程序1Word文档下载推荐.docx
- 文档编号:1482159
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:16
- 大小:24.98KB
如何使用Ajax技术开发Web应用程序1Word文档下载推荐.docx
《如何使用Ajax技术开发Web应用程序1Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《如何使用Ajax技术开发Web应用程序1Word文档下载推荐.docx(16页珍藏版)》请在冰点文库上搜索。
http:
//www.w3.org/TR/html4/strict.dtd"
htmllang="
zh"
dir="
ltr"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
title>
使用ajax开发web应用程序-示例<
/title>
/head>
body>
h1>
使用ajax开发web应用程序<
/h1>
p>
这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容--不需要任何网页的重新加载。
注意:
这个例子对于禁止js的用户来说没有效果。
/p>
pid="
xmlObj"
这是一些示例数据,它是这个网页的默认数据<
ahref="
data.xml"
title="
查看这个XML数据."
onclick="
ajaxRead('
data.xml'
);
this.style.display='
none'
;
returnfalse"
查看XML数据.<
/a>
/body>
/html>
注意,对于那些没有javascript的用户,我们直接链接到data.xml文件。
对于那些允许运行javascript的用户,函数“ajaxRead”将被运行,这个链接被隐藏,并不会被转向到那个data.xml文件。
函数“ajaxRead”现在还没定义。
所以如果你要检验上面的示例代码,你会得到一个javascript错误。
让我们继续并定义这个函数(还有其他的),让你能够看到ajax是如何工作的,下面的脚本要放到你的head标签里:
scripttype="
text/javascript"
--
functionajaxRead(file){
varxmlObj=null;
if(window.XMLHttpRequest){
xmlObj=newXMLHttpRequest();
}elseif(window.ActiveXObject){
xmlObj=newActiveXObject("
Microsoft.XMLHTTP"
}else{
return;
}
xmlObj.onreadystatechange=function(){
if(xmlObj.readyState==4){
updateObj('
xmlObj'
xmlObj.responseXML.getElementsByTagName('
data'
)[0].firstChild.data);
xmlObj.open('
GET'
file,true);
xmlObj.send('
'
functionupdateObj(obj,data){
document.getElementById(obj).firstChild.data=data;
//-->
/script>
这堆代码有点多,让我们一点点的进行。
第一个函数叫做“ajaxRead”-也就是我们在页面的“查看XML数据”链接中调用的函数,我们定义了一个“xmlObj”变量-这将作为客户端(用户正在查看的这个web页面)以及服务端(web站点本身)之间的中间件。
我们在一个if/else块中定义这个对象:
if(window.XMLHttpRequest){
}elseif(window.ActiveXObject){
}else{
}
这只是一个对不同对象是否可用的测试-某些浏览器实现了不同的XMLHttpRequest对象,所以当我们定义“xmlObj”作为我们的XMLHttpRequest对象时,我们不得不根据浏览器所实现的来定义它。
如果没有可用的XMLHttpRequest对象,我们将执行“return”语句结束这个函数以避免脚本错误。
在大部分情况下,这个检验将返回一个XMLHttpRequest对象-这部分代码应该能够在绝大部分的浏览器上工作,除了少部分比较老的浏览器的异常情况(它能够工作在ie5.01上,但是在netscape4上会使函数终止)。
接下来是这些代码块:
xmlObj.onreadystatechange=function(){
每次XMLHttpRequest的状态发生变化,事件“onreadystatechange”就会被触发。
通过使用“xmlObj.onreadystatechange=function(){...}”我们能够创建一个函数并让它在这个XMLHttpRequest对象的状态每次发生改变的时候立刻运行。
这里总共有五个状态,由0走到4。
0–尚未初始化(在这个XMLHttpRequest开始前)
1–加载(XMLHttpRequest初始化一结束)
2–加载结束(XMLHttpRequest一从服务器上获得一个回应)
3–交互(当XMLHttpRequest对象和服务器连接中)
4–结束(当XMLHttpRequest被告知它已经完成了所有人物并结束运行)
这第五个状态(数字4)就是我们能够确定数据已经可用的标志,所以我们检验这个xmlObj.readyState是否等于“4”来确定数据是否可用,如果是4,我们运行updateObj函数。
这个函数带两个参数:
一个当前web页面的元素ID(当前web页面中要更新的元素)以及用于填充这个元素的数据。
这个函数的运行方式在稍后将更详细地解释。
我们的web页面的p元素有一个id“xmlData”,这就是我们准备更新的段落。
我们正在取得的数据来自于XML文件,但它有点复杂。
这里是它如何工作的原理。
xmlObj.responseXML属性是一个DOM对象-它很象“document”对象,除了它来自远程的XML文件。
换句话说,如果你在data.xml中运行脚本,那xmlObj.responseXML就是一个“document”对象。
因为我们知道这些,我们能够通过“getElementsByTagName”方法取得任何XML节点。
数据包含在一个命名为“<
”的XML节点中,所以我们的任务很简单:
取得第一个(而且只有这一个)数据节点。
因而,xmlObject.responseXML.getElementsByTagName("
data"
)[0]返回XML文件中的第一个<
节点。
注意:
它返回的是XML节点,而不是节点中的数据-这个数据必须通过访问XML节点的属性取得,这就是下一步要说的。
接下来,取得数据只需要简单的指定“firstChild.data”(firstChild指向了那个被<
节点包含的文本节点,而这个“data”属性则是这个文本节点的实际文本)。
xmlObj.open('
xmlObj.send('
这是我们的ajaxRead函数的最后一个部分。
它说了些什么?
嗯,xmlObj的这个“open”方法打开了一个到服务器(通过一个指定的协议,这里指定的是“GET”-你可以使用“USE”或者其他别的协议)的连接,去请求一个文件(在我们的例子里,变量“file”被作为一个参数赋给ajaxRead函数-data.xml),而且javascript可以同步(false)或者异步(true,默认值)的处理请求。
由于这是异步的Javascript和XML(AJAX),我们将使用默认的异步方式-在这个例子中,使用同步方式将不起作用。
这是我们函数中的最后一行,它简单的发送一个空字符串回服务器。
如果没有这行,xmlObj的readyState永远不会到4,所以你的页面永远不会更新。
这个send方法能够用于作其他事情,但今天我只是用来从服务器上取得数据-并不发送它-所以在这篇文章中我不准备介入任何关于send方法的细节。
functionupdateObj(obj,data){
现在再稍微解释一下updateObj函数:
这个函数使用一个新的值来更新当前页面上任何指定的元素。
他的第一个参数,“obj”是当前页面中元素的ID-那个要被更新的对象;
它的第二个参数,“data”是用来将那个将被替换值的对象(“obj”)的内容替换掉。
一般来说,检验一下并确定当前页面上确实有一个元素的ID是“obj”是比较明智的,但对我们的脚本的这个隔离级别来说校验并不必要。
这个函数更新的方式和我们之前从XML文件的“data”节点取得数据的方式类似-它定位它要更新的元素(这时候这个元素的ID代替了它的标签名和在页面中的索引)并设置这个元素的第一个子节点(文本节点)的data属性为新的值。
如果你需要使用HTML而不是纯文本来更新一个元素,你也可以使用
document.getElementById(obj).innerHTML=data
这就是全部了
这个概念很简单,而且代码也不是很难。
你能够从某个地方读取一个文件并且不需要重新加载这个web页面。
你有足够的灵活性来作各种事情,包括从表单发送数据(不需要重新加载web页面)并且使用一个服务端语言来动态生成XML文件。
如果你需要更近一步,记得这个连接是很有用的-哦,还要记得Google是你朋友。
在另外的文章中,我将解释你如何配合服务端技术使用AJAX来构造强大的web应用程序。
发表于@2006年02月12日5:
10PM|评论(0)
如何使用Ajax技术开发Web应用程序
(2)
在上一篇文章中,我们讨论了如何通过javascript从一个远程XML文件中取得数据。
在这篇文章中,我们将学会怎样对数据作更复杂的处理。
作为一个示例,我们会准备一组XML数据,将数据分割成独立的片断并以不同的方式展示这些片断(取决于它们是如何被标识的)。
这篇文章是建立在上一篇文章中构造的示例代码的基础之上,所以如果你不能理解我们现在的代码,你可以回过头去读第一篇文章(sheneyan注:
就在上面)。
开始~
让我们开始我们的第一步:
构造XML。
我们准备写一个XML文档,它组织了一系列准备让javascript处理的数据,所以我们将一起组织一些节点和子节点(或者,元素和子元素)。
在这个例子里,我们将使用一些家庭宠物的名字:
pets>
pet>
猫<
/pet>
狗<
鱼<
/pets>
在上面,我们有这个XML声明(标明这个文档是一个XML1.0文档,使用UTF-8编码),一个根元素(<
)将下面所有的元素组合在一起,一个<
元素组织了所有的宠物,然后一个<
节点对应一只宠物。
为了指定每一只宠物是什么类型的动物,我们在<
元素中设置了文本节点:
猫,狗,鱼。
使用Ajax开发Web应用程序-示例<
functionajaxRead(file){
processXML(xmlObj.responseXML);
functionprocessXML(obj){
vardataArray=obj.getElementsByTagName('
pet'
vardataArrayLen=dataArray.length;
varinsertData='
tablestyle="
width:
150px;
border:
solid1px#000"
tr>
th>
+'
Pets<
/th>
/tr>
for(vari=0;
i<
dataArrayLen;
i++){
insertData+='
td>
+dataArray[i].firstChild.data+'
/td>
/table>
document.getElementById('
dataArea'
).innerHTML=insertData;
使用Ajax开发web应用程序<
这个页面将演示如从取回并处理成组的XML数据。
被取回的数据将会以表格形式输出到底下。
#"
data_2.xml'
查看演示<
.<
divid="
dataArea"
/div>
你会注意到我们和上次一样以同样的方式(通过一个超链接)调用了这个函数,而且我们将数据放入一个DIV(这次这个东东叫做“dataArea”)。
这个ajaxRead()函数和上次很接近,除了一点不同:
onreadystatechange函数。
让我们先看一下这个函数:
我们取消了updateObj函数并用一个叫做processXML()的新函数来代替它。
这个函数将得到XML文档本身(也就是被ajaxRead函数取回的)并处理它。
(这“XML文档本身”我指的是参数“xmlObj.responseXML”)
现在让我们分析一下这个函数processXML。
下面是它的代码:
}
首先,我们定义了一些变量。
“dataArray”作为所有<
节点的数组(不是节点数据,只是节点)。
“dataArrayLen”是这个数组的长度,用于我们的循环。
“insertData”则是一个表格的开头的HTML。
我们的第二步则是遍历所有的<
元素(通过变量“dataArray”)并将数据添加到变量insertData中。
这里我们会创建一个表格行,插入一个表格数据节点(td)进去,再将每一个<
元素的文本包含进这个表格数据节点,并将这些都添加进变量“insertData”。
因此,每循环一次,变量insertData将添加一行包含三个宠物中之一名称的新数据。
新数据行添加完后,我们插入一个“<
”结束标签到变量“insertData”。
这完成了这个表格,然后我只剩这最后一步来达成我们的目标:
我们需要将这个表格放到页面上。
幸运的是,我们得感谢innerHTML属性,这很简单。
我们通过函数document.getElementById()取得DIV“dataArea”并将变量“insertData”中的HTML插进去。
嗯,这个表格冒出来了!
我们继续之前……
我得指出两点:
首先,你会注意到我们并没有使用节点<
。
这事因为我们只有一个数据组(<
)以及后来所有的元素(每一个<
元素);
这些子节点包含了不同的数据但它们有相同的名字。
在这个例子中,这个节点能够被忽略。
然而,将所有的元素<
放进<
元素还是比较好,而不是让这些<
元素自己散放(但仍然在data元素里面)。
另外一种方式是给每一个宠物放一个指定的标签,比如:
猫/>
狗/>
鱼/>
然后我们能够遍历元素<
里的节点。
这个processXML函数看起来就像这样:
pets'
)[0].childNodes;
if(dataArray[i].tagName){
+dataArray[i].tagName+'
这里所作的修改就是我们指向了<
组元素(这个“[0]”意味这是第一个,即使它就是唯一的那一个)以及它的子节点(元素<
,<
)。
因为文本元素分割了这几个元素(空格被认为是一个节点),我们需要确定只有那些有标签名的节点(嗯,也就是只有标签)通过。
然后我们输出每一个标签的名字。
因为每一个标签名是一个宠物,我们不需要取得每一个节点的数据-节点名本身已经足够。
去看一下它是怎么工作的吧。
还有另外一种方式来完成我们上面的工作,就是给每一个<
节点设置一个属性值。
你的XML文档看起来就像这样:
pettype="
猫"
/>
狗"
鱼"
你只需要稍微修改一下你的processXML函数,它变成这样子了:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 使用 Ajax 技术开发 Web 应用程序