本以為自己是做.net的,做項目就做技術含量高的,對那些網站前端根本不屑一顧。但最新的web項目只從美工和前端engineer那得到了些演示
demo,光憑這些根本達不到要求,用戶體驗也相當的不爽。美工抽不身,我們幾個搞后臺的只能自己動手,硬著頭皮調css,javascrip,后來發現
ajax 確實挺管用,所以課余時間找了本書看看,閑暇時摘些關鍵橋段全當涂鴉吧。
1.到底什么是Ajax。
Ajax最初是Asynchronous JavaScript+XML (異步JavaScript+XML)的縮寫,后來把允許瀏覽器與服務器通信而無需刷新當前頁面的技術都涵蓋在內了。
傳統的web應用允許用戶填寫表單(form),當提交表單時就向
web服務器發送一個請求。服務器接收并處理傳來的表單,然後返回一個新的
網頁。這個做法浪費了許多帶寬,因為在前後兩個頁面中的大部分HTML代碼往往是相同的。由于每次應用的交互都需要向服務器發送請求,應用的響應時間就依賴于服務器的
響應時間。這導致了用戶界面的響應比本地應用慢得多。
與此不同,AJAX應用可以僅向服務器發送并取回必需的數據,它使用SOAP或其它一些基于XML的web
service接口,并在客戶端采用JavaScript處理來自服務器的響應。因為在服務器和瀏覽器之間交換的數據大量減少,結果我們就能看到響應更快
的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成,所以Web服務器的處理時間也減少了。
2.ajax 的優缺點
ajax動態修改頁面的功能使得瀏覽器無需刷新整個頁面即可完成與服務器的通信操作,避免了服務器回發重復頁面信息,減輕了帶寬負擔,加快了響應速度。也
正因為ajax局部刷新頁面,使得前一狀態的頁面信息無法保存在歷史紀錄中,瀏覽器的后退操作也無法正確獲取歷史頁面。開發人員針對這一問題已想出一些解
決的辦法,例如,將動態頁面放入iframe
中,如何獲得每一個狀態都會有相應的參數保存在靜態的主頁面中,當后退時只需通過這些參數重新獲得歷史狀態的動態頁面。
3.基礎原理
ajax 的關鍵是XMLHttpRequest 對象的應用。
標準交互模式:
1) 觸發ajax 事件
2)建立CMLHttpRequest對象的一個實例。使用open()調用服務器處理程序文件。
3)向服務器發送請求
4)服務器處理程序
5)請求返回瀏覽器
6)對服務器的返回 進行處理
<script type="text/javascript" >
var xmlhttp;
function Createxmlhttp()
{ alert("Start Create");
if(window.ActiveXObject)
{
alert("ActiveXObject");
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest)
{
alert("XMLHttpRequest");
xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("Get","Upload.aspx")
xmlhttp.onreadystatechange=CallBack;
xmlhttp.send(null);
}
function CallBack()
{
alert("Call Back");
}
</script>