如何創建和使用XMLHttpRequest對象?


 

創建XMLHttpRequest對象,我有以下幾種方法,順帶給大家介紹下他們的使用,一起來看看那吧。

  1. 第一種,我們可以使用構造函數的方式。直接new的方式,這樣我們就構造了這個對象。

  request = new XMLHttpRequest()

   但是,這個語句只針對Firefoxopera以及Safari等高級瀏覽器。

  2如果我們要針對IE6或者IE6以上的。那么,我們需要換一個方式,然后里面還要傳一些參數。

  xmlhttp = new ActiveXObject('Msxml2.XMLHTTP')

  3假如這樣創建還是不成功,那我們就要換一個方式,就是修改里面的一些參數。

  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')

  4如果以上3種方式,還不能創建這個對象,那這個用戶使用的瀏覽器就是過時的。我們可以提示它,瀏覽器不支持ajax技術。

  運行注意

  1) 我們創建的這個對象,首先必須運行在web服務器中的一個網頁中,因為它依賴於JavaScriptJavaScript必須在網頁中執行。

  2) 我們一定要注意這個網頁的編碼。不然,通過這個異步獲取的數據,有可能是亂碼。

  代碼演示

  1. 這是一個我寫好的網頁代碼開始的模板。這里面我綁定了一個onclick事件,調用doAjax函數。

 <!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=utf-8" />

<title>Ajax初步入門教學視頻-麥子學院</title>

</head>

<body>

<script type="text/javascript">

function doAjax(the_request)

{

}

</script>

<input type="button" onclick="doAjax('ajax-02.txt')" />

<br/><br/>

<div id="vv"></div>

</body>

</html>

  2. 填充這個函數里面的內容

  1) 首先,我們定義一個默認為null的變量。

  var request = null;

  2) 然后我們就判斷我們的瀏覽器,我們根據這個瀏覽器是否支持這個對象,來生成這個request對象。

  它如果支持,我們就直接用構造函數:

  if (window.XMLHttpRequest) {

  request = new XMLHttpRquest() ;

  }

  它如果不支持這個對象,我們就使用第二種方式生成:

  else if (window.ActiveXObject) {

  request = new ActiveXObject('Microsoft.XMLHTTP');

  }

  這樣我們就創建好了。

  然后就是else,我們也不再去判斷另外一種方式了,我們直接給用戶提示。

  else {

  alert("您的瀏覽器不支持ajax");

  return false;

  }

  3) 因為是個函數,所以必須要有返回值,我們就返回false

  return false;

  4) 好,這就是我們生成XMLHttpRequest對象的代碼了。

 3. 我們在向服務器發送數據之前,我們有必要了解這個對象的一些屬性。

  它有3個比較重要的屬性。

  1) 第一個是我們的onreadystatechange這個屬性。

  這個屬性有什么作用呢?

  它存儲處理服務器響應的函數。

  假如這個request是我們已經生成好的對象,然后我給它的屬性賦一個空函數,里面寫一些代碼。

  request.onreadystatechange = function() {

  //這里要寫一些代碼

  }

  2) 第二個屬性是readyState

  它用來存儲服務器響應的狀態信息。

  每當它的狀態值改變的時候,onreadystatechange這個屬性對應的函數就要被調用一次。

  這個readyState屬性有5個值。

  a) 0:表示請求未初始化,也就是還沒有發起請求。

  b) 1:表示請求已經提出,在請求發出去之前。

  c) 2:表示請求已發送,這里通常可以從響應得到頭部信息。

  d) 3:表示服務器已經正在處理中,但是沒有響應完成。

  e) 4:表示服務器已經請求完成,並且使用它。

  這個readyState,其實針對的這些狀態,我們都要調用onreadystatechange對應的函數。

  那,我們必須要在這個函數里面寫上一條if語句,才能判斷我們的響應是否已經完成,意味着是否可以獲取異步的數據。

  好,我們在這里示范一下:

  request.onreadystatechange = function() {

  //這里要寫一些代碼

  if (request.readyState == 4) {

  //從服務器獲取數據的代碼,並做相應處理

  }

  }

  3) 那,接下來這個屬性叫做:responseText

  這個屬性是用來獲取,由服務器返回的數據,就是當

  readyState4的時候,我們可以獲取到數據。

  例如:我們把它打印出來。

  request.onreadystatechange = function() {

  //這里要寫一些代碼

  if (request.readyState == 4) {

  //從服務器獲取數據的代碼,並做相應處理

  alert(request.responseText);

  }

  }

  這樣我們就把這個服務器返回的數據alert出來了。

  4. 但是我們要把請求發送到服務器,那我們就要調用它的兩個方法。

  1) 第一個是open(),這個參數需要3個參數。

  a) 第一個參數是GET或者是POST,表名這個HTTP方法

  b) 第二個參數就是規定服務器端腳本的url

  c) 第三個參數,規定應當對請求作異步的處理,也就是一個異步處理的標識。

  2) 第二個方法:就是send()方法,send方法可以將請求發送到服務器端。

  我們假設當前這個網頁,跟我們請求的url在同一個目錄下面。

  a) 那我們的代碼可以是這樣的。

  request.open("GET", "test.txt", true);

  這個時候,我們就已經建立了這個請求。

  b) 然后,加一個對服務器響應狀態的代碼。

  request.onreadystatechange = function() {

  //這里要寫一些代碼

  if (request.readyState == 4) {

  //從服務器獲取數據的代碼,並做相應處理

  alert(request.responseText);

  }

  }

  c) 然后,我們就可以通過send方法,將我們的請求發送給服務器端。

  接下來,我們就可以在方法里面做一些處理了。

  做處理的時候,我們其實什么也不用做,只要等到

  request.readyState == 4的時候,才做一些處理。

  做處理,其實一般來說,就是獲取這個

  responseText這個屬性,把它里面的數據做一下解析,然后在相應的網頁位置展示出來。

  這就是我們的ajax里面的核心技術。

 

原文鏈接:http://www.maiziedu.com/wiki/ajax/base/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM