基於2013年版本之前的總結:
一:什麼是Ajax?
Ajax的技術產生:
-它被認爲是Asynchronous JavaScript and XML的縮寫,現在,允許瀏覽器與服務器通信
而無需刷新當前頁面的技術都被叫做Ajax。
-它是一種不用刷新整個頁面就可以與服務器進行通訊的辦法:
1.flash
2.java applet
3.框架:如果使用一組框架構造了一個網頁,可以只更新其中一個框架,而不必驚動整個
頁面。
4.隱藏的iframe
5.XMLhttprequest:該對象是對javascript的一個擴展,可以使網頁與服務器進行通訊。
是創建ajax應用的最佳選擇,實際上通常把ajax當成XMLHttpRequest對象的代名詞。
二:ajax的工作原理:
三:ajax工具包
這東西並不是一個新技術,它實際上是幾種技術,每一種技術各自完成一個職能,以一種全新的方式聚合在一起。
-服務器端語言:服務器需要具備向瀏覽器發生特定信息的能力。 ajax與服務端用什麼語言無關。
-xml :一種數據傳輸的格式。ajax程序需要用一種格式化的文本在服務器和客戶端之間進行信息傳遞,xml是其中的一種
-dom :文檔。 實現動態顯示和交互、
-xmlhttp 組件XMLHttpRequest對象進行異步數據讀取
-使用JavaScript綁定和處理所有數據
四:ajax的缺陷
ajax不是完美的技術,使用ajax 它的一些缺陷如下:
-由JavaScript和ajax引擎導致的瀏覽器兼容
-頁面局部刷新,導致後退功能失效
-對流媒體的支持沒有flash javaapplet好
-一些手持設備(如手機、pda等)支持性差
五:XMLHttpRequest介紹
`XMLHttpRequest這玩兒最早是在ie5裏邊以Activex組件的形式實現的,不是w3c標準。
`創建XMLHttpRequest對象(由於它不是標準的,所以實現方法不統一)
-IE把XMLHttpRequest實現爲一個本地的JavaScript對象。
-XMLHttpRequest在不同的瀏覽器上的實現是兼容的。所以可以用同樣的方式訪問XMLHttpRequest實例上的屬性和方法,
而不討論這個實例創建的方法是啥
-------------------------------------說這老半天,這個對象咋創建呢?
創建XMLHttpRequest對象:
爲了每次寫ajax的時候都節約一點時間,可以把對象檢測的內容打包成一個可複用的函數:
function getHTTPObject(){
var xhr=false;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
雖然都能看懂這代碼,還是說明一下吧,
它對window.XMLHttpRequest的調用會返回一個對象或null,if語句會把調用返回的結果看做是true或者false(如果返回對象則爲true,返回null則爲false)。如果XMLHttpRequest對象存在,則把xhr的值設爲該對象的新實例。如果不存在,就去檢測ActiveXObject的實例是否存在,如果答案是肯定的,就把XMLHTTP的新實例賦給xhr。
XMLHttpRequest的方法:
方法() | 描述 |
abort() | 停止當前請求 |
getAllResponseHeaders() | 把HTTP請求的所有響應首部作爲鍵/值對返回 |
getResponseHeader(“header”) | 返回制定首部的串值 |
open(“method”,“url”) | 建立對服務器的調用。Method參數可以使GET、POST或PUT。url參數可以是相對URL或者絕對URL |
send(content) | 向服務器發送請求 |
setRequestHeader(“header”,“value”) | post請求用這個。把指定首部設置爲所提供的值,在設置任何首部之前必須調用open() |
實踐一下:
點擊a標籤,彈出另一個文本的內容
<script>
window.onload=function (){
1.獲取a節點,併爲其添加點擊事件
document.getElementsByTagName("a")[0].onclick=function(){
3.創建一個XMLHttpRequest對象
var request=new XMLHttpRequest()
4.準備發送請求的數據:url
var url =this.href;
var method="GET"
5.調用XMLHttpRequest對象的open方法
request.open(method,url )
6.調用XMLHttpRequest對象的send方法
request.send(null);
7.爲XMLHttpRequest對象添加onreadystatechange響應函數
request.onreadystatechange=function(){
8.判斷響應是否完成:XMLHttpRequest對象的onreadystatechange的屬性值爲4的時候
if(request.readyState==4){
9.再判斷響應是否可用:XMLHttpRequest對象的status屬性值爲200
if(request.status==200||request.status==304){
10.打印響應結果:responseText
alert("request.responseText");
}
}
}
2.取消a節點的默認行爲
return false;
}
}
</script>
<body>
<a href="1.text">點我</a>
</body>
六、ajax的數據格式
。在服務器端Ajax是一門與語言無關的技術,在業務邏輯層使用任何服務器語言都可以。
。從服務器端接收數據的時候,那些數據必須以瀏覽器能夠理解的格式來發送,服務器端的編程語言只能以如下3中格式返回數據
-XML
-JSON
-HTML
解析HTML
。html由一些普通文本組成,如果服務器通過XMLHttpRequest發送HTML,文本將存儲在responseText屬性中
。不必從responseText屬性中讀取數據,它已經是希望的格式,可以直接將它插入到頁面中。
。插入HTML代碼最簡單的方法是更新這個元素的innerHTML屬性。
優點:
1.從服務器端發送的HTML代碼在瀏覽器端不需要用JavaScript進行解析
2.HTML的可讀性好
3.HTML代碼與innerHTML屬性搭配效率高
缺點:
1.如果需要通過ajax更新一篇文檔的多個部分,HTML不合適
2.innerHTML並非DOM標準(問題不大,瀏覽器都支持)
解析XML
。XML格式 ,所以需要使用responseXML 來獲取
。結果不能直接使用,必須先創建對應的節點,再把節點插入到對應的元素裏邊去(說白了就是把XML裏邊的數據,放到html的節點裏邊去)
優點:
1.XML是一種通用的數據格式(它就是爲了數據傳輸而生的)
2.不必把數據強加到已定義好的格式中,而是要爲數據自定義合適的標記
3.利用DOM可以完全掌控文檔
缺點:
1.如果文檔來源於服務器,就必須得保證文檔含有明確的首部信息。如果文檔類型不明確,那responseXML的值就是空的了
2.當瀏覽器接收到長的XML文件後,DOM解析可能會很複雜
json簡介:(JSON(JavaScript Object Notation) 一種簡單的數據格式,比xml更輕巧。JSON是JavaScript原生格式,意味着在JavaScript中處理JSON數據不需要任何特殊的api或工具包)
解析JSON
。JSON只是一種文本字符串,他被存儲在responseText屬性中
。爲了讀取存儲在responseText屬性中的JSON數據,需要根據JavaScript的eval語句,函數eval會把一個字符串當做它的參數,然後這個字符串會被當做JavaScript代碼來執行,因爲JSON的字符串就是由JavaScript代碼構成的,所以它本身是可執行的
。
。JSON提供了json.js包,下載http://www.json.org/json.js後,使用parseJSON()方法將字符串解析成JS對象
優點:
。作爲一種數據傳輸格式,JSON與XML很相似,但是它更加靈巧
。JSON不需要從服務器發送含有特定內容類型的首部信息
缺點:
。語法過於嚴禁
。代碼不易讀
。eval函數存在風險
jquery中的ajax
。jquery對ajax操作進行了封裝,在jquery中最底層的方法是$.ajax(),第二層是load(),$.get()和$.post(),第三層是$.getScript()和$.getJSON()
load方法:
load()方法是jquery中最簡單和常用的ajax方法,能載入遠程的HTML代碼並插入到DOM中
它的結構是load(url,[data],[callback])
總結:
1.什麼是ajax ?不用刷新頁面,但可以和服務器進行通訊的方式,使用ajax的主要方式是XMLHttpRequest對象
2。使用XMLHttpRequest對象實現ajax
3.ajax輸出數據的三種方式:
a.XML:笨重,解析困難,但XML是通用的數據格式
b.HTML:不需要解析可以直接放到文檔中,若僅更新一部分區域
c.小巧,有面向對象的特徵,且有很多第三方的jar包可以把java對象或集合轉換爲json字符串
4.使用jquery完成ajax操作
a.load方法:可以用於HTML文檔的元素節點,把結果直接加爲對應節點的子元素,¥
b.$get,$post,$getJSON:更加靈活,出去使用load方法的情況,大部分都使用這三個方法