首頁 > web前端 > js教程 > AJAX的工作流程有哪些? ajax的工作流程介紹(附實例)

AJAX的工作流程有哪些? ajax的工作流程介紹(附實例)

寻∝梦
發布: 2018-09-10 15:51:07
原創
3060 人瀏覽過

本篇文章主要講述了關於ajax的工作流程情況,還有ajax原理,一些常用的屬性介紹,現在讓我們一起來看這篇文章吧

# AJAX全稱為"Asynchronous JavaScript and XML"(非同步JavaScript和XML)。

#

是一種創建互動式網頁應用程式的網頁開發技術。它:
     使用XHTML CSS來表示訊息;
     使用JavaScript操作DOM(Document Object Model)進行動態顯示及互動;
     使用XML和XSLT進行資料物件交換及相關作業;
     使用XML和XSLT進行資料物件交換及相關作業;
     使用XML和XSLT進行資料物件交換及相關操作;## 與Web伺服器進行非同步資料交換;
     使用JavaScript將所有的東西綁定在一起。 AJAX原理:

     AJAX不是指單一的技術,而是有機地利用了一系列相關的技術。它的核心是JavaScript物件XmlHttpRequest,這個物件讓我們可以使用JavaScript向伺服器提出請求並處理回應,而不阻塞使用者。 AJAX採用非同步互動過程,它在使用者與伺服器之間引入一個中間媒介,從而消除了網路互動過程中的處理—等待—處理—等待缺點。使用者的瀏覽器在執行任務時即裝載了AJAX引擎,AJAX引擎以JavaScript語言編寫,通常藏在一個隱藏的框架中。它負責編譯使用者介面及與伺服器之間的互動。 AJAX引擎允許使用者與應用軟體之間的互動過程非同步進行,獨立於使用者與網路伺服器間的交流。現在,可以用Javascript呼叫AJAX引擎來取代產生一個HTTP的使用者動作,記憶體中的資料編輯、頁面導覽、資料校驗這些不需要重新載入整個頁面的需求可以交給AJAX來執行,使用AJAX,可以為JSP、開發人員、終端用戶帶來可見的便利。      既然Ajax的核心是XmlHttpRequest物件那就必須先介紹一下:
常用屬性:

     Onreadystatechange 指定當readyState屬性改變時的事件處理函數。只寫
     readyState  表示Ajax請求的目前狀態。只讀它的值用數字代表。
                    0 代表未初始化。目前還沒有打電話給 open 方法
                    1 代表載入中。 open 方法已被調用,但 send 方法尚未被調用
                    2 所代表已載入。 send 已被調用。請求已經開始
                    3 地為互動中所代表。伺服器正在發送回應
                    4 代表完成。回應寄放完成
                    每次 readyState 值的改變,觸發 readystatechange 事件。
     responseText 將回應訊息作為字串傳回.唯讀。它是一個HTML,XML或普通文本,這取決於伺服器發送的內容。當 readyState 屬性值變成 4 時, responseText 屬性才可用,表示 Ajax 請求已經結束。      responseXML  將回應訊息格式化為Xml Document物件並返回,唯讀,只有伺服器傳送了帶有正確首部資訊的資料時, responseXML 屬性才是可用的。 MIME 類型必須為text/xml

     status   返回目前要求的http狀態碼.唯讀
              ound)
               403 禁止使用(forbidden)
               00 一切正常(ok)
               304 沒有被修改(not modified)(伺服器返回304狀態,表示來源檔案沒有被修改)
     在XMLHttpRequest 物件中,伺服器傳送的狀態碼都保存在status 屬性裡。透過把這個值和 200 或 304 比較,可以確保伺服器是否已發送了一個成功的回應
(想看更多就到PHP中文網
AJAX開發手冊欄位中學習)

常用方法:
     Open  建立一個新的http請求,並指定此請求的方法、URL以及驗證訊息
     Send  發送請求到http伺服器並接收回應如果請求為get不會發送任何資料
     setRequestHeader 單獨指定請求的某個http頭
AJAX工作流程:
1 物件初始化
##

function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }
登入後複製

2 發送請求呼叫XMLHttpRequest物件的open和send方法,依照順序,open調用完畢之後才呼叫send方法。

xmlHttp.open("get","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true)
xmlHttp.send(null);
登入後複製

send的參數如果是以Post方式發出的話,可以是任何想傳給伺服器的內容,但必須先呼叫setRequestHeader方法,修改MIME類別:xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 伺服器接收處理資料並傳回,指定事件處理程序處理傳回訊息
  每次readyState 屬性的改變都會觸發readystatechange 事件只要將對應的處理函數名稱賦給XMLHttpRequest物件的onreadystatechange屬性就可以了

 xmlHttp.onreadystatechange = function(){            if (xmlHttp.readystate == 4) { 
  if (xmlHttp.status == 200 || xmlHttp.status == 304) {//XMLHttpRequest对成功返回的信息有两种处理方式://responseText:
  将传回的信息当字符串使用;//responseXML:将传回的信息当XML文档使用,可以用DOM处理。 
        }            }        };
登入後複製

4 用戶端接收5 修改用戶端頁面內容

這篇文章到這就結束了(想看更多就到PHP中文網AJAX使用手冊欄位學習),有問題的可以在下方留言提問。

以上是AJAX的工作流程有哪些? ajax的工作流程介紹(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板