一.XMLHttpRequest 對(duì)象的三個(gè)重要的屬性。

onreadystatechange 屬性

onreadystatechange 屬性存有處理服務(wù)器響應(yīng)的函數(shù)。下面的代碼定義一個(gè)空的函數(shù)，可同時(shí)對(duì) onreadystatechange 屬性進(jìn)行設(shè)置：

xmlHttp.onreadystatechange=function()

{

  // 我們需要在這里寫一些代碼

  }

readyState 屬性

readyState 屬性存有服務(wù)器響應(yīng)的狀態(tài)信息。每當(dāng) readyState 改變時(shí)，onreadystatechange 函數(shù)就會(huì)被執(zhí)行。

這是 readyState 屬性可能的值：

我們要向這個(gè) onreadystatechange 函數(shù)添加一條 If 語(yǔ)句，來(lái)測(cè)試我們的響應(yīng)是否已完成（意味著可獲得數(shù)據(jù)）：

xmlHttp.onreadystatechange=function()

  {

  if(xmlHttp.readyState==4)

    {

    // 從服務(wù)器的response獲得數(shù)據(jù)

    }

  }

responseText 屬性

可以通過(guò) responseText 屬性來(lái)取回由服務(wù)器返回的數(shù)據(jù)。

二．基本源碼：

var xmlHttp

function showCustomer(str)

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

  {

  alert ("Your browser does not support AJAX!");

  return;

  }

//設(shè)置請(qǐng)求響應(yīng)的url

var url="getcustomer_xml.asp";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

function stateChanged()

{

if (xmlHttp.readyState==4)

{

//responseText 以字符串返回 HTTP 響應(yīng)

//document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

//responseXML 以 XML 返回響應(yīng)

//服務(wù)器端ContentType 屬性為 response 對(duì)象設(shè)置了 HTTP 內(nèi)容類型。該屬性的默認(rèn)值是 "text/html"。服務(wù)器端返回responseXML 要把內(nèi)容類型設(shè)置為 XML。

var xmlDoc=xmlHttp.responseXML.documentElement;

document.getElementById("companyname").innerHTML=

xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;

document.getElementById("contactname").innerHTML=

xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;

document.getElementById("address").innerHTML=

xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;

document.getElementById("city").innerHTML=

xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;

document.getElementById("country").innerHTML=

xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

  {

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();

  }

catch (e)

  {

  // Internet Explorer

  try

    {

    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    }

  catch (e)

    {

    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

  }

return xmlHttp;

}

三．Ajax框架：基于瀏覽器的應(yīng)用框架，基于服務(wù)器端的應(yīng)用框架。

1.基于瀏覽器的應(yīng)用框架一般分為兩種：

Aplication frameworks:提供了瀏覽器功能，但其最著名的還是在于通過(guò)窗口生成組件建立桌面GUI。 如：DOJO，qooxdoo，JavaFX，YUI，ExtJS(最開始的名字是yui-ext，因?yàn)閿U(kuò)展了yui的庫(kù)，后來(lái)發(fā)展為可選擇擴(kuò)展jquery和prototype就改名字為ext)，F(xiàn)lex（與ExtJS有很多相似），TIBET等。

Infrastructural frameworks:提供基本的框架功能和輕便式瀏覽器端操作，讓開發(fā)者去創(chuàng)建具體應(yīng)用，主要功能包括：

•  
  • 基于XMLHttpRequest組件的瀏覽器交互功能
  • XML解析和操作功能
  • 根據(jù)XMLHttpRequest的返回信息進(jìn)行相應(yīng)的DOM操作
  • 一些特殊情況下，和其他的瀏覽器端技術(shù)如Flash（或Java Applets）等集合到一起應(yīng)用

如：jQuery（代碼量少），prototype，MooTools（功能比prototype強(qiáng)大，設(shè)計(jì)比prototype完善，從prototype中汲取很多有益的設(shè)計(jì)理念），Google AJAXSLT，F(xiàn)lash/JavaScript，等。

2.基于服務(wù)器端的應(yīng)用框架通常以下面兩種方式工作(盡管它們根據(jù)不同的語(yǔ)言進(jìn)行了分類) ：

HTML/JS Generation(HTML/JS生成)：通過(guò)服務(wù)器端生成HTML和JS代碼在傳遞給瀏覽器端進(jìn)行直接運(yùn)行 。如：Ext GWT。

遠(yuǎn)程交互：JavaScript調(diào)用服務(wù)器端函數(shù)(例如調(diào)用Java函數(shù))并返回給JavaScript的回調(diào)句柄，或者請(qǐng)求服務(wù)器端數(shù)據(jù)信息，例如Session信息，數(shù)據(jù)庫(kù)查詢等。 如DWR。

最新評(píng)論