AJAX工作原理

一、ajax技術的背景一、

ajax技術的背景不可否認，ajax技術的流行得益於對設計的廣泛應用，催生了ajax的流行。而這也讓微軟感到無比的尷尬，因為早在97年，微軟便已經發明了ajax中的關鍵技術，並且在99年IE5推出之時，它便開始支持XmlHttpRequest對象，並且微軟之前已經開始在它的一些產品中應用ajax，比如說MSDN網站選單中的一些應用。遺憾的是，不知道是什麼想法，當時微軟發明了ajax的核心技術之後，並沒有看到它的潛力而加以發展和推廣，而是將它擱置起來。對這一點來說，我個人是覺得非常奇怪的，因為以微軟的資源和它的戰略眼光來說，應該不會看不到ajax技術的前景，唯一的解釋也許就是因為當時它的主要競爭對手Netscape的消失反而使它變得麻痺和遲鈍，畢竟巨人也有打盹的時候，例如IBM曾經在對微軟戰略上的失誤。正是這次的失誤，成就了它現在的競爭對手google在ajax方面的領先地位，而事實上google目前在ajax技術方面的領先是微軟所無法達到的，這一點在後面我講述ajax缺陷的時候也會提到。現在微軟也意識到了這個問題，因此它也開始在ajax領域奮起直追，比如說推出它自己的ajax框架atlas，並且在.NET2.0也提供了一個用來實現異步回調的接口，即ICallBack介面。那麼微軟為什麼對自己在ajax方面的落後如此緊張呢？現在就讓我們來分析一下ajax

二、什麼是

ajax即「Asynchronous Javascript AND XMLXML」（JavaScript和XVML），是一種建立技術互動式應用程式的設計技術。ajax包含使用XHTML和CSS標準實作Web頁面，使用DOM實作動態顯示和互動,使用XML進行資料交換和處理，最後使用javaScript綁定和處理所有資料。ajax將一些伺服器負擔的工作下放至客戶端，利用客戶端的某些能力來處理數據，減少用戶實際和心理上的等待時間，用戶不在遇到因為頁面刷新導致瀏覽器長時間空白，甚至停止回應的糟糕結果，這給了使用者最佳的體驗效果。ajax基於標準化的XML，被廣泛使用並且支持，利於維護和修改。ajax呼叫外部資料很方便，在需要頁面與資料分離的情況下，可以套用
ajax取得資料。

三、ajax

所包含的技術



。它是由下列技術組合而成。1.使用CSS和XHTML來表示。2. 使用DOM模型來互動和動態顯示。3.使用XMLHttpRequest來和伺服器進行非同步通訊。4.使用javaS

四、ajax

對象請求，從伺服器獲得數據，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器取得請求資料。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所了解。 XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理回應，而不阻塞使用者。達到無刷新的效果。透過下圖能更清楚的理解ajax的工作原理
ajax

工作原理">可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。以下是比較標準的建立XMLHttpRequest物件的方法

   
请选择一个省（自治区）
 
 

從XMLHttpRequest的工作流程，我們可以看出，XMLHttpRequest是完全用來向伺服器發出一個請求的，它的作用也局限於此，但它的作用是整個ajaxajax，因為ajax無非是兩個過程，發出請求和回應請求。並且它完全是一種客戶端的技術。而XMLHttpRequest正是處理了伺服器端和客戶端通訊的問題所以才會如此的重要。

我們可以把伺服器端看成一個資料接口，它返回的是一個純文字流，當然，這個文字流可以是XML格式，可以是Html，可以是Javascript程式碼，也可以只是一個字串。這時候，XMLHttpRequest向伺服器端請求這個頁面，伺服器端將文字的結果寫入頁面，這和普通的web開發流程是一樣的，不同的是，客戶端在非同步取得這個結果後，不是直接顯示在頁面，而是先由javascript來處理，然後再顯示在頁面。至於現在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它數據類型，只是將這個過程封裝了的結果，本質上他們並沒有什麼太大的區別。

五、ajax的優缺點

體驗非常好。

2、使用非同步方式與伺服器通信，不需要打斷使用者的操作，具有更迅速的回應能力。

3、可以把以前一些伺服器負擔的工作轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和頻寬的負擔，節約空間和寬帶租用成本。並且減輕伺服器的負擔，ajax的原則是“按需取資料”，可以最大程度的減少冗餘請求，和回應對伺服器造成的負擔。

4、基於標準化的並被廣泛支援的技術，不需要下載插件或小程式。

ajax的缺點:
因為平時我們大多注意的都是ajax給我們所帶來的好處諸如用戶體驗的提升。而對ajax所帶來的缺陷則有所忽視。以下所闡述的ajax的缺陷都是它先天產生的。

1、ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞。後退按鈕是一個標準的web站點的重要功能，但是它沒辦法和js進行很好的合作。這是ajax所帶來的一個比較嚴重的問題，因為使用者往往是希望能夠透過後退來取消前一次的操作。那麼對於這個問題有沒有辦法呢？答案是肯定的，用過Gmail的知道，Gmail下面採用的ajax技術解決了這個問題，在Gmail下面是可以後退的，但是，它也並不能改變ajax的機制，它只是採用的一個比較笨但是有效的辦法，即使用者點擊後退按鈕存取歷史記錄時，透過建立或使用一個隱藏的IFRAME來重現頁面上的變更。 （例如，當用戶在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜索，然後將搜索結果反映到ajax元素上，以便將應用程式狀態恢復到當時的狀態。 ）但是，雖然說這個問題是可以解決的，但是它所帶來的開發成本是非常高的，和ajax框架所要求的快速開發是相背離的。這是ajax所帶來的一個非常嚴重的問題。

2、安全問題
技術同時也對IT企業帶來了新的安全威脅，ajax技術就如同對企業資料建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。ajax的邏輯可以對客戶端的安全掃描技術隱藏起來，讓駭客可以從遠端伺服器建立新的攻擊。還有ajax也難以避免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於credentials的安全漏洞等。
3、對搜索索引擎的支援比較弱。
4、破壞了程式的異常機制。至少從目前看來，像ajax.dll，ajaxpro.dll這些ajax框架是會破壞程式的異常機制的。關於這個問題，我曾經在開發過程中遇到過，但是查了一下網路上幾乎沒有相關的介紹。後來我自己做了一次試驗，分別採用ajax和傳統的form提交的模式來刪除一條數據……給我們的調試帶來了很大的困難。
5、另外，像其他方面的一些問題，比如說違背了url和資源定位的初衷。例如，我給你一個url地址，如果採用了ajax技術，也許你在該url地址下面看到的和我在這個url地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。
6、一些手持設備（如手機、PDA等）現在還不能很好的支援ajax，比如說我們在手機的瀏覽器上打開採用ajax技術的網站時，它目前是不支持的，當然，這個問題跟我們沒太多關係。

六、ajax的幾個框架

目前我们采用的比较多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微软的atlas框架。ajax.dll和ajaxpro.dll这两个框架差别不大，而magicajax.dll只是封装得更厉害一些，比如说它可以直接返回DataSet数据集，前面我们已经说过，ajax返回的都是字符串，magicajax只是对它进行了封装而已。但是它的这个特点可以给我们带来很大的方便，比如说我们的页面有一个列表，而列表的数据是不断变化的，那么我们可以采用magicajax来处理，操作很简单，添加magicajax之后，将要更新的列表控件放在magicajax的控件之内，然后在pageload里面定义更新间隔的时间就ok了，atlas的原理和magicajax差不多。但是，需要注意的一个问题是，这几种框架都只支持IE，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就可以知道。
除了这几种框架之外，我们平时用到的比较多的方式是自己创建xmlHttpRequest对象，这种方式和前面的几种框架相比更具有灵活性。另外，在这里还提一下aspnet2.0自带的异步回调接口，它和ajax一样也可以实现局部的无刷新，但它的实现实际上也是基于xmlhttprequest对象的，另外也是只支持IE，当然这是微软的一个竞争策略。

七、ajax简单示例

示例实现的功能是当用户在WEB页面的下拉列表框中选择某个省的名称时，会在页面上显示该省的省会名称，而此时页面并不刷新。省会名称将由服务端传送至浏览器。这个示例包含三个部分（这里的服务端是PHP程序）

1、HTML页面，包含下拉列表框和要显示省会名称的位置

2、JavaScript程序，实现发送请求和处理响应。

3、服务端的PHP程序，用来接受浏览器的请求，向浏览器传送结果数据。

（客户端）HTML页面：

   
请选择一个省（自治区）
 
 

'合肥', 'fj'=>'福州', 'gs'=>'兰州', 'gx'=>'南宁', 'gd'=>'广州', 'gz'=>'贵阳', 'hn'=>'海口', 'hb'=>'石家庄', 'hh'=>'郑州', 'hlg'=>'哈尔滨', ); if (empty($_GET['prov'])) { echo iconv("UTF-8", "UTF-8", '您还没有选择省（自治区）'); //注意：你的PHP文件使用的是GB2312编码保存的话，那iconv('GB2312','UTF-8','您还没有选择省（自治区）'); } else { $prov = $_GET['prov']; $city = $city_arr[$prov]; echo iconv("UTF-8", "UTF-8", '所选省（自治区）省会（首府）为：'.$city); //注意：你的PHP文件使用的是GB2312编码保存的话，那iconv('GB2312','UTF-8','所选省（自治区）省会（首府）为：'.$city);  } ?>

以上就介绍了AJAX工作原理，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。