ajax中XMLHttpRequest對象詳解

                                                                                              ajax中XMLHttpRequest對象詳解

        ajax技術的核心或者說負責ajax進行同步或者異步服務器請求是XMLHttpRequest對象。在用使用ajax技術時,其實就是操作XMLHttpRequest進行相應的業務。
 
 方法: 
  1創建XMLHttpRequest對象
    ajax本身還是js寫成的,所以在使用XMLHttpRequest,是按照js語法的。
生成一個XMLHttpRequest對象如下:var xhr=new XMLHttpRequest();
注意IE瀏覽器9以下的版本都不支持,IE是在9版本後才歸於主流,支持w3c標準的。 
考慮到兼容性,我們可以這樣寫。
function createXHR()
{
   var xhr=null;
  if(window.XMLHttpRequest)  //要是支持XMLHttpRequest的則採用XMLHttpRequest生成對象
     xhr=new XMLHttpRequest();
  else if(window.ActiveXobiect)//要是支持win的ActiveXobiect則採用ActiveXobiect生成對象。
    xhr=new ActiveXobiect('Microsoft.XMLHTTP');
   return xhr;
}
  2.如何利用XMLHttpRequest對象打開請求
        xhr.open('請求方式','請求url',是異步|同步)
我們通過XMLHttpRequest對象的open函數打開對服務器的連接,設置請求方式如GET POST OPTION DELETE等,請求路徑,同步請求或者是異步請求(true表示異步請求,false表示同步請求)


  3. send() 
     發送請求,不傳值時可以寫null,get或者post請求傳值時可以鍵值對寫 username=zhangsan&pwd=12345
POST請求時,一定要注意要設置 Content-Type: application/x-www-form-urlencoded 不然無法解析&分隔符。
 
  4. abort()
     終止請求
 
  5. setRequestHeader(key,value);
     設置請求頭信息
  
  6. getResponseHeader(key)
     獲取某個頭信息
  
  7. getAllResponseHeaders()
     獲取所有的頭信息

屬性:
  1. responseText
     文本返回值,可以通過對象的responseText屬性,獲得返回的主體內容。

  2. onreadystatechange
     監測xhr對象發送接收狀態變化的事件屬性。xhr對象在發送到接收會有一系列狀態的變化,這些狀態變化時,會觸發該對象的onreadystatechange回調函數,
一般我們是通過自定義一個匿名函數,在這個函數中進行我們想要的處理,將其賦給onreadystatechange事件屬性,一旦觸發就可以執行我們需要的操作。
 
  3. readyState
     表示自身狀態,值爲0~4  其中4表示返回成功。 0表示xhr對象創建成功 1表示調用open函數成功  2對方接收完頭信息
     3對方接受完主體信息  4成功斷開連接
  4. status
     響應行的狀態碼,200表示成功,403表示禁止,404表示未找到,50X系列表示服務器內部錯誤。
  5.statusText
     服務器返回狀態,對應的文字說明
 
  
  5.響應行的 狀態文字 statusText
  
  6.responseXML
    對於大量格式化文檔時,或者xml文件時,回傳的值。

   注意,ajax不能跨域請求,只能是請求本域內文件或後臺程序。
        

         在html5中支持,使用ajax實現文件的異步上傳,這一功能的實現主要是靠新增的兩個對象完成
FormData和files對象。FormData主要是用來獲得表單提交的信息,例如tform是一個表單的js中的dom對象,
var fd=new FormData(tform); 則生成的FormData對象就將表單對象中提交的信息全部加載如fd對象中了,
之後只要使用XMLHttpRequest對象的send()函數放送fd即可。當然FormData可以通過自身的append()函數手動加載鍵值對
如 fd.append('username','zhangsan');
         files是<input type='file' name='' />標籤dom對象下的一個文件列表對象,可以獲得上傳文件的所有信息。html5支持多文件上傳。在使用異步上傳文件時,我們通過fd.append('name',files[0])異步上傳文件。
















  

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