分享Ajax與jsonp的實例教程

1.ajax

Asynchronous JavaScript and XML (Ajax ) 是驅動新一代Web 網站（流行術語為Web 2.0 網站）的關鍵技術。 Ajax 允許在不干擾 Web 應用程式的顯示和行為的情況下在背景進行資料擷取。使用 XMLHttpRequest 函數取得數據，它是一種 API，允許客戶端 JavaScript 透過 HTTP 連接到遠端伺服器。 Ajax 也是許多 mashup 的驅動力，它可將來自多個地方的內容集成為單一 Web 應用程式。

 

不過，由於瀏覽器的限制，此方法不允許跨域通訊。如果嘗試從不同的網域請求數據，會出現安全性錯誤。如果能控制數 據駐留的遠端伺服器且每個要求都前往同一網域，就可以避免這些安全錯誤。但是，如果僅停留在自己的伺服器上，Web 應用程式還有什麼用處呢？如果需要從多個第三方伺服器收集資料時，又該怎麼辦？

2、工作原理

#　　A 、ajax就是js透過一個網站去載入數據，這個過程通常是使用者不可見的。

　　B、傳統的網頁(不適用ajax)如果需要更新內容，必須重新載入整個網頁。

3、關於同步與非同步

#　　同步需要等待回傳結果才能繼續，非同步不必等待，一般需要監聽異步的結果。

　　同步是在一條直線上的隊列，非同步不在一個隊列上，各走各的

　　例如：

　　　　新增購物車問題。採取同步方式，每加入一項購物車，則需要等待頁面重新載入後再執行其他操作。

　　　　而使用非同步方式，則只需監聽，無需等待即可執行其他操作。相對而言，非同步加載優勢更大，ajax優勢由此可見。

4、建立ajax物件(以及相容)

　(1)建立XMLHttpRequest物件

1 if(window.XMLHttpRequest){2     var xhr=new XMLHttpRequest();3 }else{4     var xhr=new ActiveXObject("Microsoft.XMLHTTP");5 };

 

　(2)開啟與伺服器的連結

#　　　open(method,url,asyn)

#　　　參數：

　　　　method：string，請求的類型get或post

　　　　url：string，檔案在伺服器上的位置

　　　　url：string，檔案在伺服器上的位置

#　　　　asyn：Boolean，true(非同步)或false（同步）

　　　　　　同步需要等待返回結果

##　(3)發送給伺服器

　　　xhr.send()將請求傳送到伺服器(get請求)

##　　　xhr。 send(string) 僅用於post請求

　(4)偵測伺服器的請求狀態

　　　onreadystatechange事件(對應就緒狀態)

　　　　》　readyState 改變時就會觸發onreadystatechange 事件　　　readyState 改變時就會觸發onreadystatechange #　　　readyState從0到4發生變化

#　　　　0：請求未初始化

　　　　1：伺服器連線已建立

　　　　1：伺服器連線已建立

　　　　2：請求已接收

　　　　3、請求處理中

#　　　　4、請求已完成

　　　　4、請求已完成

　　　　4、請求已完成

　　status等於200：「OK」  

　　　　   等於404：未找到頁面

#　　當等當且status為200時，表示對應已就緒。

5、XMLHttpRequest物件的重要性

　　如需取得來自伺服器的回應，請使用XMLHttpRequest物件的：　　　　responseText或responXML屬性

　　　　responseText取得字串形式的回應資料　
#　。取得XML形式的回應資料

　　　　如來自伺服器的回應並非XML，用responseText屬性reponseText傳回字串形式的回應，可以這樣使用：Div.innerHTML = xhr.responseText;

6、關於ajax請求方式get和post的區別：

　　GET：更常用，更方便；效能好；明文發送數據，沒有post安全；數傳輸大小有限制，數據聽過URL傳遞，但是URL有一定的長度限制。 、

　　POST：使用相對較少；效能只有get的1/3左右；比get稍微安全一點；沒有資料大小限制；

7、關於跨域

######　　#########跨域可以簡單的理解為從一個網域存取另一個域名，處於安全考慮，瀏覽器不允許這麼做;############　　　　備註：img、script、iframe等元素的src屬性可以直接跨域請求資源。 ##################8、ajax跨網域################　　1、可以讓伺服器去別的網站取得內容返回頁############　　2、給頁面的ajax一個url，ajax把這個url傳給伺服器，由伺服器去存取位址。 ###############9、jsonp跨域################　　jsonp就是利用script標籤的跨域能力請求資源，顯然目的還是json，而且是跨域獲取利用js建構一個script標籤，把json的url賦給script的src屬性，把這個script插入到dom裡，讓瀏覽器去獲的到，callback({"name":"jack "})，callback是頁面存在的回呼方法，參數就是得到想得到json回呼方法要遵從服務端的月sing一般使用callback或cb.######### ####

以上是分享Ajax與jsonp的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！