Ajax學習日記(一)

來源:互聯網
上載者:User

1、建立XMLHttpRequest對象的執行個體
      如果瀏覽器支援ActiveX對象,就可以使用ActiveX來建立XMLHttpRequest對象。否則,就要使用本地JavaScript對象技術來建立。
   var xmlHttp;
   function createXMLHttpRequest(){
   if (window.ActiveXObject){
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
   else if(window.XMLHttpRequest){
      xmlHttp=new XMLHttpRequest();
      }
   }
  
   XMLHttpRequest對象的一些方法:
   A、void open(string method,string url,boolean asynch,string username,string password):
   這個方法會建立對伺服器的調用。這是一個初始化一個請求的純指令碼方法。它有兩個必要的參數,還有三個選擇性參數。條提供特定方法(GET、POST、PUT),還有提供所調用資源的URL。另外還可以傳遞一個Boolean值,指示這個調用是非同步還是同步的。預設值為true,表示請求本質上是非同步。如果這個參數為false,處理就會等待,直到從伺服器返迴響應為止。非同步呼叫是使用Ajax的主要優勢。最後兩個參數允許指定一個特定的使用者名稱和密碼。
   B、void send(content):
   這個方法具體向伺服器發出請求。如果請求聲明為非同步,這個方法就會立即返回,否則它會等待直到接收到響應為止。選擇性參數可以是DOM對象的執行個體、輸入資料流,或者串。傳入這個方法的內容會作為請求體的一部分使用。
   C、void setRequestHeader(string header,string value):
   這個方法為HTTP請求中一個給定的首部設定值。它有兩個參數,第一個串表示要設定的首部,第二個串表示要在首部放置的值。需要說明這個方法必須在調用open()之後才能調用。
  
   在所有這些方法中最有可能用到的是open()和send().
   D、void abord():停止請求
   E、string getAllResponseHeaders():
   這個方法返回一個串,其中包含HTTP請求的所有響應首部,首部包括Content-Length、Data和URL。
   F、string getResponseHeader(string header):
   這個方法與getAllResponseHeaders()是對應的,不過它有一個參數表示你希望得到的指定首部值,並且把這個值作為串返回。
  
   XMLHttpRequest對象的屬性:
   onreadystatechange:每個狀態改變時都會觸發這個事件處理器,通常會調用一個JavaScript函數。
   readyState:請求的狀態,有5個可取值:0=未初始化,1=正在載入,2=已載入,3=互動中,4=完成。
   responseText:伺服器的響應,表示為一個串。
   responseXML:伺服器的響應,表示為XML,這個對象可以解析為一個DOM對象。
   status:伺服器的HTTP狀態代碼(200對應OK,404對應Not Found,等等)。
   statueText:HTTP狀態代碼的相應文本(OK或Not Found等等)。
  
   Ajax的標準請求回應程式法:
   A、一個用戶端觸發一個Ajax事件。從簡單的onchange事件到某個特定的使用者動作,很多這樣的事件都可以觸發Ajax事件。
      <input type="text" id="email" name="email" onblue="validateEmail()";>
   B、建立XMLHttpRequest對象的一個執行個體。使用open()方法建立調用,並設定URL以及所希望的HTTP方法(通常是否GET或POST),請求實際上是通過一個send()方法調用觸發。
      var xmlHttp;
      function validateEmail(){
        var email=document.getElementById("email");
        var url="validate?email="+escape(email.value);
        if(window.ActiveXObject){
           xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
        else if(window.XMLHttpRequest){
           xmlHttp=new XMLHttpRequest();
           }
        xmlHttp.open("GET",url);
        xmlHttp.onreadystatechange=callback;
        xmlHttp.send(null);
       }
    C、向伺服器做出請求。可能調用servlet、CGI指令碼、或者任務伺服器端技術。
    D、伺服器可以做你想做的事情,包括訪問資料庫,甚至訪問另一個系統。
    E、請求返回到瀏覽器。Content-Type設定為text/xml——XMLHttpRequest對象只能處理text/html類型的結果。在另外一些更複雜樣本中,響應可能涉及更廣,還包括JavaScript、DOM管理以及其他相關技術。需要說明,你還需要設定另外一些首部,使瀏覽器不會在本機快取結果。為些可以使用下面的代碼:
        response.setHeader("Cache-Control","no-cache");
        response.setHeader("Pragma","no-cache");
    F、在這個樣本中,XMLHttpRequest對象配置為處理返回時要調用callback()函數。這個函數會檢查XMLHttpRequest對象的readyState屬性,然後查看伺服器返回的狀態代碼。如果一切正常,callback()函數就會在用戶端上做些有意思的工作。
        function callback(){
           if(xmlHttp.readyState==4){
              if(xmlHttp.status==200){
                 //do something interesting here
                 }
              }
           }

2、發送簡單請求
向伺服器發送請求以及如何處理伺服器的響應。
最簡單的請求是不要查詢參數或提交表單資料的形式向伺服器發送任何資訊。在實際中,都期望向伺服器發送一些資訊。
使用XMLHttpRequest對象發送請求的基本步驟是:
A、為得到XMLHttpRequest對象的一個引用,可以建立一個新的執行個體,也可以訪問包含有XMLHttpRequest對象的一介變數。
B、告訴XMLHttpRequest對象,那個函數會處理XMLHttpRequest對象狀態的改變,為此要把對象的onreadystatechange屬性設定為指向JavaScript函數的指標。
C、指定請求的屬性。XMLHttpRequest對象的open()方法會指定將發出的請求。open()方法有三個參數:一個是指示所用方法(通常是Get或Post)串;一個是表示目標資源的URL串;一個是Boolean值,表示請求是否是非同步。
D、將請求發送紿伺服器,XMLHttpRequest對象的send()方法把請求發送到指定的目標資源。send()方法接受一個參數,通常是一個串或一個DOM對象。這個參數作為請求體的一部分發送到目標URL。當向send()方法提供參數時,要確保open()中指定的方法是POST。如果沒有資料作為請求體的一部分被發送時,則使用NULL。
       你需要XMLHttpRequest對象的一個執行個體,告訴它如果狀態有變化應該怎麼做,還要告訴它向那裡發送請求以及如何發送請求,最後還需要指導XMLHttpRequest以送請求。

函數指標:
與其它變數類似,只不過它指向的不是像串、數字甚至對象執行個體之類的資料,而是指向一個函數。在JavaScrip中,所有的函數在記憶體中都編在地址,可以使用函數名引用。這就提供了很大的靈活性,可以把函數指標作為參數傳遞紿其它函數,或者在一個對象的屬性中儲存函數指標。

3、簡單請求樣本
simpleResponse.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Simple XMLHttpRequest</title>
<script type="text/javascript">
  var xmlHttp;
 
  function createXMLHttpRequest(){
      if(window.ActiveXObject){
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XNLHttpRequest){
       xmlHttp=new XMLHttpRequest();
   }  
  }
 
  function startRequest(){
       createXMLHttpRequest();
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.open("GET","simpleResponse.xml",true);
    xmlHttp.send(null);
  }
 
  function handleStateChange(){
       if(xmlHttp.readyState==4){
         if(xmlHttp.status==200){
       alert("THe server replied with:" + xmlHttp.responseText);
   }
    }
  }
</script>
</head>

<body>
<form action="#">
  <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();" />
</form>
</body>
</html>

simpleResponse.xml
任意文本
51

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.