如何學習Ajax 框架

本篇文章為大家展示了如何學習Ajax 框架，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一.XMLHttpRequest 對象的三個重要的屬性。

onreadystatechange 屬性

onreadystatechange 屬性存有處理服務器響應的函數。下面的代碼定義一個空的函數，可同時對 onreadystatechange 屬性進行設置：

xmlHttp.onreadystatechange=function()
{
  // 我們需要在這里寫一些代碼
  }

readyState 屬性

readyState 屬性存有服務器響應的狀態信息。每當 readyState 改變時，onreadystatechange 函數就會被執行。

這是 readyState 屬性可能的值：

我們要向這個 onreadystatechange 函數添加一條 If 語句，來測試我們的響應是否已完成（意味著可獲得數據）：

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    // 從服務器的response獲得數據
    }
  }

responseText 屬性

可以通過 responseText 屬性來取回由服務器返回的數據。

二．基本源碼：

var xmlHttp
 
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
//設置請求響應的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 響應
//document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 
//responseXML 以 XML 返回響應
//服務器端ContentType 屬性為 response 對象設置了 HTTP 內容類型。該屬性的默認值是 "text/html"。服務器端返回responseXML 要把內容類型設置為 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框架：基于瀏覽器的應用框架，基于服務器端的應用框架。

1.基于瀏覽器的應用框架一般分為兩種：

Aplication frameworks:提供了瀏覽器功能，但其最著名的還是在于通過窗口生成組件建立桌面GUI。 如：DOJO，qooxdoo，JavaFX，YUI，ExtJS(最開始的名字是yui-ext，因為擴展了yui的庫，后來發展為可選擇擴展jquery和prototype就改名字為ext)，Flex（與ExtJS有很多相似），TIBET等。

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

•  

• 基于XMLHttpRequest組件的瀏覽器交互功能

• XML解析和操作功能

• 根據XMLHttpRequest的返回信息進行相應的DOM操作

• 一些特殊情況下，和其他的瀏覽器端技術如Flash（或Java Applets）等集合到一起應用

如：jQuery（代碼量少），prototype，MooTools（功能比prototype強大，設計比prototype完善，從prototype中汲取很多有益的設計理念），Google AJAXSLT，Flash/JavaScript，等。

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

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

遠程交互：JavaScript調用服務器端函數(例如調用Java函數)并返回給JavaScript的回調句柄，或者請求服務器端數據信息，例如Session信息，數據庫查詢等。 如DWR。

上述內容就是如何學習Ajax 框架，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。