1. 程式人生 > >Ajax<二>

Ajax<二>

1.同步和非同步

==>同步/非同步概念

  同步:==順序完成== 第一步--->第二部-->第三部....

  非同步:在完成自己工作時,分擔給另一個人完成部分,事件同時進行

2.timeout和ontimeout

  timeout:請求超時設定.屬性,用來設定等待響應時長,如果超過指定時長,則會結束本次請求,並觸發ontimeout事件

xhr.timeout = 3000;    // 設定等待時長為3秒

  ontimeout:事件,用來設定超過等待時間後的動作

xhr.ontimeout = function () {
    alert('請求超時')
}

  在建立xhr事件之後,來設定timeout屬性;如果設定了timeout屬性,那麼就建議設定ontimeout事件.

3.FormDate表單物件

  FormDate物件優勢就是能顧一次性將表單中的所有資料全部取出,包括檔案域的檔案物件.

1)建立表單

①必須有form標籤,methord和action不重要
②每個表單域需要設定name值

2)傳送Ajax請求

 

①將表單資料取出 --- FormDate
i. 獲取form表單物件     var fm = document.getElementById('form');  //dom物件
ii. 例項化FormDate物件;  var fd -= new FormDate(fm);
② 傳送Ajax請求

 3)在php頁面中,使用$_POST接受資料,檔案資料要用$_FILSE

注意點

①form標籤要給id值,方便獲取form標籤的DOM物件
②每個域都要給name值
③提交按鈕必須用button值,submit會跳轉
④使用formdate物件時,先獲取form的DOM值,再例項化FormDate,並將form的DOM作為引數傳入
⑤必須使用post方法來發送Ajax請求
⑥需要將fd物件作為引數傳入send

 4.檔案上傳進度條

核心事件: ==xhr.uplload.onprogress ==

onprogress事件大約每100ms觸發一次,該事件物件中有loaded和total兩個重要屬性

  loaded:已上傳檔案大小;

  total:檔案總大小