2015年9月3日 星期四

深入淺出Ajax -- 使用ajax [1]


  • Ajax是一種設計及建立網頁的方式，核心觀念是asynchronous request，是一種"發生在背景"的請求，在請求發生的同時，User可以繼續其他工作，就不用一直等待頁面重新刷新。
  • Ajax只會傳送及接收頁面上需要改變的部分，因此有較少的網路交通、較小的更新及較短的等待時間等優點。
  • 請求與回應的速度和server回傳的內容有關，也有可能產生比傳統頁面還要慢的Ajax頁面。
  • Ajax可能產生許多較小的請求，因而導致交通流量的增加。
  • 有時候，瀏覽器可以直接呼叫script當中的function，不用跟server溝通。
  • 由於Ajax所依賴的技術與xhtml的關係，因此會也兼容性(compatibility)的問題。在開發時要記得測試不同的瀏覽器。
  • XMLHttpRequest 是一個請求物件，可以傳送給server及從server取得回應。如果失敗的話可以改用ActiveXObject(Microsoft特有的編程物件)。
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    function createRequest() {
 try {
  request = new XMLHttpRequest();
 }catch(tryMS) {
  try {
   request = new ActiveXObject("Msxml2.XMLHTTP");
  }catch(otherMS) {
   try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(failed) {
    request = null;
   }
  }
 }

 return request;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

function requsetDemo() {
 requset = createRequest();
 ...
 request.onreadystatechange = nextstep;
}

function nextstep() {
 if(request.readyState == 4) { // server has finished the work
  if(request.status == 200) { // OK
   // do something
  }
 }
}

張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)