|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
大家可以自己去看一看.可以说看得想呕吐.以前有次下了个动网来看.里面连基本内置函数的保护措施(函数没防御性)都没有.难怪经常补这个补那个了.可能现在.NET版会好点吧 在曩昔，因为为了取得新数据而不能不从头加载web页面（或加载其他页面）招致web使用法式开展被限制。固然有其他办法可用（不加载其他页面），然而这些手艺都没有被很好地撑持并且有bug成灾的趋势。在曩昔的几个月里，一个曩昔其实不被普遍撑持的手艺已被愈来愈多的web冲浪者（web surfers??是指阅读器仍是阅读者？）所承受，它给了开辟者更多的自在开辟先辈的web使用法式。这些经由过程javascript来异步获得xml数据的使用法式，被亲热的称为“Ajax使用法式”（Asynchronous javascript and XML applications）。在这篇文章中，我将会注释若何经由过程Ajax来取回一个近程的XML文件并更新一个web page，而且跟着这个系列的持续，我将会商更多的办法，利用ajax手艺将你的web使用法式提拔到一个新的条理. 这第一步就是创立一个带一些数据的XML文件。咱们将这个文件定名为data.xml。它是一个复杂的XML文件，而在一个真实的法式中，它会庞杂很多，但关于咱们的例子来讲，复杂了然是最适合地。
<?xml version="1.0" encoding="UTF-8"?> <root> <data> 这是一些示例数据，它被保留在一个XML文件中，并被javascript取回。 </data> </root>
如今让咱们创立一个复杂的web页面包括一些示例数据。这个页面将是咱们的js剧本地点，而且这个页面将会让用户们会见柄看到Ajax剧本的运转。咱们把它定名为ajax.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>利用ajax开辟web使用法式 - 示例</title>
</head>
<body>
<h1>利用ajax开辟web使用法式</h1>
<p>这个页面演示了AJAX手艺若何经由过程静态读取一个近程文件来更新一个网页的内容－－不需求任何网页的从头加载。注重：这个例子关于制止js的用户来讲没无效果。</p>
<p id="xmlObj">
这是一些示例数据，它是这个网页的默许数据 <a href="data.xml"
title="检查这个XML数据." >检查XML数据.</a>
</p>
</body>
</html>
注重，关于那些没有javascript的用户，咱们直接链接到data.xml文件。关于那些答应运转javascript的用户，函数“ajaxRead”将被运转，这个链接被埋没，其实不会被转向到谁人data.xml文件。函数“ajaxRead”如今还没界说。所以假如你要查验下面的示例代码，你会失掉一个javascript毛病。让咱们持续并界说这个函数（还有其他的），让你可以看到ajax是若何任务的，上面的剧本要放到你的head标签里：
<script type="text/javascript"><!--
function ajaxRead(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('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
这堆代码有点多，让咱们一点点的停止。第一个函数叫做“ajaxRead”－也就是咱们在页面的“检查XML数据”链接中挪用的函数，咱们界说了一个“xmlObj”变量－这将作为客户端（用户正在检查的这个web页面）和办事端（web站点自己）之间的两头件。咱们在一个if/else块中界说这个对象：
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
这只是一个对分歧对象是不是可用的测试－某些阅读器完成了分歧的XMLHttpRequest对象，所以当咱们界说“xmlObj”作为咱们的XMLHttpRequest对象时，咱们不能不依据阅读器所完成的来界说它。假如没有可用的XMLHttpRequest对象，咱们将履行“return”语句停止这个函数以免剧本毛病。在大局部情形下，这个查验将前往一个XMLHttpRequest对象－这局部代码应当可以在绝大局部的阅读器上任务，除少局部对照老的阅读器的异常情形（它可以任务在ie5.01上，然而在netscape4上会使函数终止）。
接上去是这些代码块:
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
每次XMLHttpRequest的形态产生变更，事务“onreadystatechange”就会被触发。经由过程利用“xmlObj.onreadystatechange = function(){...}”咱们可以创立一个函数并让它在这个XMLHttpRequest对象的形态每次产生改动的时分立即运转。这里总共有五个形态，由0走到4。
0 C 还没有初始化（在这个XMLHttpRequest入手下手前）
1 C 加载（XMLHttpRequest初始化一停止）
2 C 加载停止（XMLHttpRequest一从办事器上取得一个回应）
3 C 交互（当XMLHttpRequest对象和办事器毗连中）
4 C 停止（当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节点。数据包括在一个定名为“<data>”的XML节点中，所以咱们的义务很复杂：获得第一个（并且只要这一个）数据节点。因此，xmlObject.responseXML.getElementsByTagName("data")[0]前往XML文件中的第一个<data>节点。
注重：它前往的是XML节点，而不是节点中的数据－这个数据必需经由过程会见XML节点的属性获得，这就是下一步要说的。
接上去，获得数据只需求复杂的指定“firstChild.data”（firstChild指向了谁人被<data>节点包括的文本节点，而这个“data”属性则是这个文本节点的实践文本）。
xmlObj.open ('GET', file, true);
xmlObj.send ('');
这是咱们的ajaxRead函数的最初一个局部。它说了些甚么？嗯，xmlObj的这个“open”办法翻开了一个到办事器（经由过程一个指定的协定，这里指定的是“GET”－你可使用“USE”或其他其余协定）的毗连，去恳求一个文件（在咱们的例子里，变量“file”被作为一个参数赋给ajaxRead函数－data.xml），并且javascript可以同步（false）或异步（true，默许值）的处置恳求。因为这是异步的javascript和XML（AJAX），咱们将利用默许的异步体例－在这个例子中，利用同步体例将不起感化。
这是咱们函数中的最初一行，它复杂的发送一个空字符串回办事器。假如没有这行，xmlObj的readyState永久不会到4，所以你的页面永久不会更新。这个send办法可以用于作其他工作，但明天我只是用来从办事器上获得数据－其实不发送它－所以在这篇文章中我禁绝备参与任何干于send办法的细节。
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
如今再略微注释一下updateObj函数：这个函数利用一个新的值来更新以后页面上任何指定的元素。他的第一个参数，“obj”是以后页面中元素的ID－谁人要被更新的对象；它的第二个参数，“data”是用来将谁人将被交换值的对象（“obj”）的内容交换失落。普通来讲，查验一下并肯定以后页面上的确有一个元素的ID是“obj”是对照明智的，但对咱们的剧本的这个隔离级别来讲校验其实不需要。这个函数更新的体例和咱们之前从XML文件的“data”节点获得数据的体例相似－它定位它要更新的元素（这时候候这个元素的ID取代了它的标签名和在页面中的索引）并设置这个元素的第一个子节点（文本节点）的data属性为新的值。假如你需求利用HTML而不是纯文原本更新一个元素，你也能够利用
document.getElementById(obj).innerHTML = data
这就是全体了
这个概念很复杂，并且代码也不是很难。你可以从某个中央读取一个文件而且不需求从头加载这个web页面。你有足够的天真性来作各类工作，包含从表单发送数据（不需求从头加载web页面）而且利用一个办事端言语来静态生成XML文件。假如你需求更近一步，记得这个毗连是很有效的－哦，还要记得Google是你伴侣。在别的的文章中，我将注释你若何共同办事端手艺利用AJAX来机关壮大的web使用法式。
关于作者
Jonathan Fenocchi(mail:jona#slightlyremarkable.com #换成@)是一个收集开辟者，主攻web设计，客户端剧本，php剧本。
只要你想学,就没什么优缺点,上面那位大哥已经把网上的评论说了,但我认为想学哪个都一样,不然它就不可能在当今时代数字艺术方面存活到今天 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-2-3 23:33:49
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-3-10 13:03:22