Web---Ajax(非同步的JavaScript和Xml)
阿新 • • 發佈:2018-12-12
學習前不妨看一下隱藏幀技術,Ajax原理其實就是採用隱藏幀技術隱藏幀技術入門
AJAX
- AJAX = Asynchronous JavaScript and XML(非同步的 JavaScript 和 XML)。
- AJAX 不是新的程式語言,而是一種使用現有標準的新方法。
- AJAX 最大的優點是在不重新載入整個頁面的情況下,可以與伺服器交換資料並更新部分網頁內容。
- AJAX 不需要任何瀏覽器外掛,但需要使用者允許JavaScript在瀏覽器上執行。
AJAX應用
-
運用XHTML+CSS來表達資訊;
-
運用JavaScript操作DOM(Document Object Model)來執行動態效果;
-
運用XML和XSLT操作資料;
-
運用XMLHttpRequest或新的Fetch API與網頁伺服器進行非同步資料交換;
-
注意:AJAX與Flash、Silverlight和Java Applet等RIA技術是有區分的。
AJAX核心
XMLHttpRequest 物件
- 所有現代瀏覽器均支援 XMLHttpRequest 物件(IE5 和 IE6 使用 ActiveXObject)。
- XMLHttpRequest 用於在後臺與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
建立 XMLHttpRequest 物件
所有現代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內建 XMLHttpRequest 物件;老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 物件。
為了應對所有的現代瀏覽器,包括 IE5 和 IE6,請檢查瀏覽器是否支援 XMLHttpRequest 物件。如果支援,則建立 XMLHttpRequest 物件。如果不支援,則建立 ActiveXObject。
var xhr; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼 xhr=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行程式碼 xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
AJAX - 向伺服器傳送請求請求
GET 還是 POST?
與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能用。
然而,在以下情況中,請使用 POST 請求:
- 無法使用快取檔案(更新伺服器上的檔案或資料庫)
- 向伺服器傳送大量資料(POST 沒有資料量限制)
- 傳送包含未知字元的使用者輸入時,POST 比 GET 更穩定也更可靠
自定義一個Ajax函式物件,帶有get()和post()方法
//定義一個Ajax 函式
function Ajax() {
//定義一個get方法
this.get=function(url,success,failure) {
//獲取 XMLHttpRequest物件
var xhr = null;
//相容常見瀏覽器
if( XMLHttpRequest ){ //高版本IE、火狐、谷歌 等
xhr = new XMLHttpRequest();
}else{ //低版本IE 等
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//設定請求方式
xhr.open("GET",url,true);
//設定回撥函式
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){ //接收完成
if( xhr.status == 200 ){ //成功響應
success(xhr.responseText); //回撥成功方法
}else{
failure(xhr.status) //回撥失敗方法
}
}
}
//開始請求
xhr.send(); //GET不需要請求體,引數在url中
}
//定義個post方法
this.post=function(url,data,success,failure){
//獲取 XMLHttpRequest物件
var xhr = null;
//相容常見瀏覽器
if( XMLHttpRequest ){ //高版本IE、火狐、谷歌 等
xhr = new XMLHttpRequest();
}else{ //低版本IE 等
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//設定請求方式
xhr.open("POST",url,true);
//設定回撥函式
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){ //接收完成
if( xhr.status == 200 ){ //成功響應
success(xhr.responseText); //回撥成功方法
}else{
failure(xhr.status) //回撥失敗方法
}
}
}
//設定請求頭---post 必須設定請求頭
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//傳送請求
xhr.send(data); //post 需要請求體
}
}