大概从2005年迄今 , 在当时几乎非程式人员都不知道ajax , 到现在几乎当红的网站都打着 ajax的名号 , 笔者印象很深刻的是 , 2006年我开始正式接触碰ajax的时候 , 就在ajax版留下「why ajax」的文章 , 虽然没得到什麽回应 . 後来也紧接着就写出属於自己包装过的介面跟试用dojo, 很多东西并不是很难或是很高深莫测 , 有时候就只是差一个「介绍」。 如果还有认为ajax很神秘的朋友 , 这篇文章让我们就ajax本质重新讨论起, 笔者曾经在讨论这个问题时被说成是个ajax基本教义者 ,不过了解工具 , 绝对是能妥善发挥工具威力的必要条件. AJAX = Asynchronous JavaScript and XML 非同步javascript & xml ──────────────────────────────── ＠ ajax 是新东西吗？ 在ajax刚窜起来时 , 大多数人都把它当作一个新技术来讲 , 但是实际上他只是个coding技巧 , 一个类iframe , 类frame的技巧. 事实上你大部分状况可以用iframe达到非常接近的效果 , 它其实存在很久了 , 而之所以很久很久以前没人这样用 ,有其历史性因素. ＠ ajax是什麽？ 我们知道传统网页间沟通的方法是透过 form（表单） 做submit(递交）, 而 ajax 就是允许你不需要透过一个真正的form submit , 而透过发送要求(request) 来模拟一个form进行 get / post的处理 , 并能从request成员取得目标页面的html source 来透过js进行对应的处理. 这代表着我们不再需要那些因为submit而来的页面跳转 , 而只要不断发request , 等待伺服器给我们回应就好 , 在理论上是有可以把网站作成单一页面的能力 , 也的确有网站这麽做 , 但是是不是应该/值得这麽做 , 我们将选择权交给读者 , 在文章末我们会再探讨ajax所带来的问题. 当然 , 以上这些都是都是以 javascript 为基础进行的. ＠ajax的优点 1.即时的互动 2.简化page loading. 将页面切割成零碎的子页面,仅取所需. 3.具多数共用的档案如 核心 js档等 , 可避免多次重复载入或读取. 4.方便工具型（或称application型网页）,同时进行多种任务. 如google doc,gmail等 5.可以跟客户炫耀你用了ajax （误） 底下我们先来聊聊为什麽 ajax 在这几年才比较火热。 ＠ajax历史因素之一：伺服器端技术的成熟度 从cgi留言板流行到现在五花八门的语言 , 甚至做到电子商务跟线上刷卡 , 这些在八九年前笔者及大众还视为洪流猛兽敬而远之 , 伴随着科技的进步 , 伺服器端的支援发展出更多可能性 , 人们的接受度也提高, 很庆幸我们现在生活在这样现代化的社会之中. ajax 的主要优点在於小幅的跨页传输 , 在早期伺服器端没办法提供妥善的资料支援的前题下 , ajax可说是自废武功. 有这种需求的大多投向 flash或applet的怀抱(早期applet是很火热的), 一般而言几乎不会特地用ajax去call一个静态页面. ＠ajax历史因素之二：平台标准不一 另一方面则是ie6及firefox对xmlhttprequest的支援度不一 , 导致要取得一个要求发送者(xmlhttprequest) , 都变成一个很难的任务. 看看底下这段开发者应该不陌生的函式 ,层层包叠的try & catch 就是 每一种支援与不支援的可能性. function getXMLHttpRequest(){ var request; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); return request; } ＠ajax历史因素之三：破碎的网页设计法则尚待训练。 ajax 等於就是把传统一个大网站拆成片段的小网页 , 开始把网页 作成不只是网页 , 而是一个「网块」, 如果没有ajax设计经验的朋友 可以想像一下如 gmail或igoogle那类一块一块进行即时处理的区块. 这样的设计概念并不只是把一个小网页给塞进去 , 而是一种需要全面性去思考的新网页流程 , 让我举一个很有趣的例子. 传统我们常常会送出submit一个页面之後 , 确认完成再导向另一个页面, 但是在ajax情境下 , 如果你透过ajax 非同步submit这样的页面 , 你就很有可能取得导向另一个页面之後的结果！ 就ajax进行而言 , 他比较需要的是是否完成的讯号跟提示讯息, 原本我们用ajax 希望能简化page loading的目的 , 也就达不到了. 为此其实网站开发者都还在摸索 , 希望能找出一个比较实用的开发管道. 我们接下来先介绍ajax本身的用法 , 再来继续讨论延伸的议题. ＠怎麽做 ajax ? (非同步的发出请求） 首先你需要一个request , 你可以透过本篇前文中所叙述的函式来取得. 我们先以比较简单的get方法来做说明就好, 有需要纯js 做post的资料 , 请参考 #15aVHpQB (Ajax) 这篇文章中所用到的方案。 /*取得request*/ var request= getXMLHttpRequest(); /*开启request资料*/ request.open("GET", "target.jsp?param1=hi&param2=hello", true); /*设定当网页读取状况更新时要进行的行为*/ request.onreadystatechange = function(){ /* 4是网页完成时 */ if (request.readyState == 4) { /*正常状况是200 , 找不到网页是404（这数字是不是很熟悉？:p）*/ if (request.status == 200) { /*将取到的资料alert出来*/ alert(request.responseText); } else{ /*如果失败,把失败的页面资讯列出来*/ alert(request.responseText); } } }; /*发送request*/ request.send(null); ＠就这样？ 嗯 , 正如之前所说 , 他并不是个很复杂的概念 , 所以介面上也并不复杂 , 只是因为牵扯到状态 , 所以比较没有那麽单纯. ＠等等 , 我们已经扯了这麽久 , 怎麽 jQuery到现在还没出场啊？？？ 就猜到你会这麽问 , 在这章底下其实流程远比工具重要 , 这也是我们花这麽多篇幅介绍流程跟历史因素的原因 , 当然 jQuery 也有提供简化用的方案 , 我直接介绍最常用的三个, get/post/load 就好 . $.get(url,params,callback) 要达到与之前的script一样的效果,只需要 $.get("target.jsp?param1=hi&param2=hello", function(response){ alert(response); } ); 或者是可以把param独立出来变成 $.get("target.jsp", {param1:"hi",param2:"hello"}, function(response){ alert(response); } ); post的部份 , 也一样简单. 基本上只是把字从get换成post而已. $.post("target.jsp", {param1:"hi",param2:"hello"}, function(response){ alert(response); } ); 而load 则是把某个网页 , load後对特定元素进行html(response)的一个方法. $("#msg").load("target.jsp",{param1:"hi",param2:"hello"}); 这样的话 , 原本的response就会直接被载入到msg里面,适合单纯读取页面用. http://docs.jquery.com/Ajax ＠2008/11/29补充後文 本篇原稿写於 2008/08/19 , 但原先设定内容要探讨的范围实在是过大 , 而且也超过笔者当时甚至是目前所能完全掌握的范围 , 跨到 ajax 以及 server side language 互动的范畴 , 更是涵盖各种网页流程设计的技巧 , 很多设计方针现在都尚未有所定论 , 而且像下棋一样变化万千 , 难以一一列出演进 . 以至於後半段的介绍迟迟难以下笔,於是将写好的部份原稿先贴出来 , 希望有一天能够把这一团思绪好好的整理一下再另辟文章. 笔者认为 ajax 带来的设计模式是一股时代的洪流 , 包含flash等 RIA体系 , 它不是个很复杂的体制 , 但却是一个极大的变革 , 以目前网路环境而言 , 也不全然是能看好的发展. 这篇文章技术成份较低 , 与其说教学或分享 , 倒不如说是代表我对ajax结构的迷惘吧！ :) -- What do you want to have ? / What do you have? 从书本中，你可以发现我的各种兴趣。 从ＣＤ中，你可以了解我所喜欢的偶像明星。 或许从文字你很难以了解一个人，但从物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 221.169.78.140 ※ TonyQ:转录至看板 Web_Design 11/30 17:10