Ajax總結-1

基於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方法的情況,大部分都使用這三個方法


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章