ajax 第四步

時間  2019-12-01
標籤 ajax 第四 欄目 Ajax 简体版
原文   原文鏈接

Ajax和XMLHttpRequest詳述

  (2011-12-10 16:40:23)
轉載▼
標籤： 

ajax

 

xmlhttprequest

 分類： Web
Ajax： Asynchronous Javascript and XML（異步的Javascript和XML），是基於Javascript和Http請求的
功能是快速建立動態網頁，即 在不從新載入整個頁面的狀況下，對網頁的某部分進行更新。
 
使用Ajax的例子：新浪微博，人人網，Google地圖。
 
 
Ajax的基礎是XMLHttpRequest，這個以前也講過一些。。。
簡單來講，就是
  1. 首先建立一個XMLHttpRequest對象
  2. 而後利用該對象向服務器發送請求"（在此時能夠經過參數傳遞的方式向服務器端發送數據），讀取服務器端的文件（xml、asp、php等）
  3. 最後根據讀取的文件內容來更新當前頁面的部分區域的內容
 
下面詳細看看這三個步驟：
 
1、 XMLHttpRequest對象的建立：
在 IE中： 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
Firefox等其餘瀏覽器中：
xmlhttp = new XMLHttpRequest()
 
2、 向服務器發送請求：
XMLHttpRequest對象有兩個相關方法：
1. open()用於 初始化HTTP請求參數，但並不發送；
語法：
open(method, url, async, username, password)
 
下面來看看每一個參數表明的含義：
1）method：取值可爲 GET、 POST和 HEAD。這裏重點討論前兩個。
在以前的一篇博文（ http://blog.sina.com.cn/s/blog_6ccd0a110101002h.html）中，提到關於HTML中 表單（form）標籤的用法，當須要提交用戶輸入的時候，須要設置form標籤中的action和method屬性。其中 action屬性的值指定了目標頁面，而 method屬性的值（GET或POST）則指定了發送信息的方式。
表單屬性中的method和XMLHttpRequest中open()方法的method參數是相同含義。
**************************************************************************************************
下面來看看這兩種請求方式的區別：
在客戶端：
  • GET方式使用URL提交數據，就是說提交的數據會附加在目標URL後，以"?"與URL分開，字符數字原樣發送，空格替換爲"+"，其他字符使用%XX替換（XX是該字符對應的ASCII碼）。
  • POST方式則是將請求的數據放置在HTTP HEADER中提交。
基於上述緣由， GET方式對於提交數據有1024字節的限制，而POST方式則沒有（ 所以上傳文件只能使用POST方式）；且 POST方式要比GET方式要安全，由於GET方式發送的數據是會顯示在地址欄的。
 
 
更多GET和POST請求方式的區別，見 http://net138.blog.163.com/blog/static/28373415200922932453486/
**************************************************************************************************
 
注：當選擇請求方式爲「POST」時，須要使用  setRequestHeader()方法來添加HTTP頭。
 
2）url：指定了 請求的目標文件地址。
3）async：取值爲true或者false。指定了請求模式是 同步（false）仍是 異步（true）。
  • 當async爲true時，表示爲異步請求。即請求以後，不等待響應，繼續執行以後的代碼。此時須要規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數。
  • 當async爲false時，表示爲同步請求。即請求以後，要等待徹底響應才能繼續執行以後的代碼。（此種模式容易形成堵塞，所以推薦使用異步請求模式）
 
 
2. send()用於 發送HTTP請求。
使用open()方法中指定的參數，向服務器發送請求。
 
 
**************************************************************************************************
XMLHttpRequest對象與發送請求相關的屬性： readyState、status、statueText
 
1. readyState屬性表示的是 HTTP請求的狀態，當一個XMLHttpRequest對象被建立時，這個屬性值從0開始，直到接受到完整的HTTP響應，這個值增長到4。
0：Uninitialized 初始化狀態。XMLHttpRequest對象已被建立或已被abort()方法重置；
1：Open open()方法已調用，但send()方法還沒被調用，請求還沒有發送
2：Sent send()方法已調用，HTTP請求已發送到服務器，但尚未收到響應
3：Receiving 全部響應頭部已經收到。響應體開始接收但還沒有完成
4：Loaded HTTP響應已經徹底接收。
 
readyState屬性值不會遞減，除非當一個請求在處理過程當中調用了open()或abort()方法。
每次這個屬性值增長時，都會 觸發onreadystatechange事件句柄。
 
2.  status屬性是 由服務器返回的HTTP代碼狀態。 只能在readyState的值大於或等於3的時候讀取，不然會出錯。
status的值爲 200時，表示 讀取成功；而 404表示 "Not Found"錯誤。
 
3. statusText屬性與status參數表明的含義相同，只是 該參數使用字符串而不是數字來表示當前狀態。
  • status爲200時對應的statusText的值爲"OK"；
  • status爲404時對應的statusText的值爲"Not Found"。
**************************************************************************************************
 
 
3、響應的內容
XMLHttpRequest對象有兩個屬性來存儲響應的內容（應該就是讀取的目標文件的內容）： responseText和 responseXML
 
1. responseText屬性：目前爲止從服務器端接收到的響應體（不包括頭部），若是尚未接收到數據（ 例如readyState<3），則是一個空字符串。
 
注：若是響應包含了爲響應體指定編碼的頭部，則使用該編碼。不然，使用Unicode UTF-8。
 
2.  responseXML屬性：對請求的響應，解析爲XML並做爲Document對象返回。
 
 
 
 
**************************************************************************************************
附一個示例，讀取一個XML文件，並改寫當前頁面的內容：
 
<html>
<head>
<script type="text/javascript">
var xmlhttp;
 
//  函數主體
function loadXMLDoc(url)
{
  xmlhttp=null;
 
  //  初始化XMLHttpRequest對象
  if (window.XMLHttpRequest)
  {
    //  Firefox等現代瀏覽器中的XMLHttpRequest對象建立
    xmlhttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    //  IE中的XMLHttpRequest對象建立
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 
  //  若建立成功，則開始解析目標XML文件
  if (xmlhttp!=null)
  {
    xmlhttp.onreadystatechange=state_Change; //  指定onreadystatechange事件句柄對應的函數
    xmlhttp.open("GET",url,true); //  初始化HTTP請求參數，GET方式，異步請求
    xmlhttp.send(null); //  發送請求
  }
  else
  {
    alert("Your browser does not support XMLHTTP.");
  }
}
 
//  readyState遞增時的監測函數，當"readyState==4"且"status=200"時，執行相應操做
function state_Change()
{
  if (xmlhttp.readyState==4) //  4 = "loaded"
  {
    if (xmlhttp.status==200) //  200 = "OK"
    {
      //  responseText屬性值是響應體的文本
      document.getElementByIdx_x('T1').innerHTML=xmlhttp.responseText;
    }
    else
    {
      alert("Problem retrieving data:" + xmlhttp.statusText);
    }
  }
}
</script>
</head>
 
<body onload="loadXMLDoc('/example/xdom/test_xmlhttp.txt')">
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button onclick="loadXMLDoc('/example/xdom/test_xmlhttp2.txt')">Click</button>
</body>
 
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程